Blogger Sabit Üst Menü

26 Ocak 2014 Pazar, 16:13
Blogger Sabit Üst Menü

Bloglarda  şıklığa ve tasarıma özen gösteren bloggerlar en çok aradıkları menülerden biride sanırım kayıt üzerinde sabit menüdür.Sitemizdeki sabit üst menü ile ilgili okuyucularımız bizimle iletişime geçiyor. Okuyucularımızın bu istediğini karşılamak adına bir süredir araştırma yapıyorduk ve okuyucularımızın istediğine cevap vermek için  bu şık menüyü sizinle paylaşıyoruz.

  • Şablonda Öncellikle Şu kodu ]]></b:skin>  bulun kodun üstüne aşağıdaki  kodları yapıştırın.
 <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--><!--biribiziokuyor.com-->  
#menu {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}.biribiziokuyor {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#0091d6; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }.biribiziokuyor ul.nav li {display:inline-block; display:inline;}.biribiziokuyor ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }.biribiziokuyor ul.nav li {float:left; display:block; padding:0 4px;}.biribiziokuyor ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}.biribiziokuyor ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}.biribiziokuyor ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}.biribiziokuyor ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }.biribiziokuyor ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }.biribiziokuyor ul.nav div.left {left:auto; right:4px;} .biribiziokuyor ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }.biribiziokuyor ul.nav div ul.colLeft {margin-left:10px;}.biribiziokuyor ul.nav div ul.colRight {margin-right:10px;}.biribiziokuyor ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}.biribiziokuyor ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}.biribiziokuyor ul.nav div ul li:last-child {border:0;}.biribiziokuyor ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat left center;}.biribiziokuyor ul.nav div ul li a:hover {color:#09c; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat 1px center;}.biribiziokuyor ul.nav div.col1 {width:160px;}.biribiziokuyor ul.nav div.col2 {width:310px;}.biribiziokuyor ul.nav div.col3 {width:460px;}.biribiziokuyor ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }  
  • Şimde şu kodu <body>  bulalım üzerine Aşağıdaki kodları yapıştırıp  kaydettinz.

 <div id='menu'><div class='biribiziokuyor'>  <ul class='nav'>  <li><a class='top-a' href='http://www.biribiziokuyor.com/'><b>Ana Sayfa</b></a></li>   <li><a class='top-a' href='http://www.biribiziokuyor.com/'><b>Menu 1</b></a>    <div class='col3'>      <ul class='colLeft'>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 1</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 2</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 3</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 4</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 5</a></li>      </ul>      <ul class='col'>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 6</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 7</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 8</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 9</a></li>      </ul>      <ul class='colRight'>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 10</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 11</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 12</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 13</a></li>      </ul>    </div>    </li>    <li><a class='top-a' href='http://www.biribiziokuyor.com/'><b>Menu 2</b></a>    <div class='col2'>      <ul class='colLeft'>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 1</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 2</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 3</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 4</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 5</a></li>      </ul>      <ul class='colRight'>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 6</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 7</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 8</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 9</a></li>      </ul>    </div>    </li>    <li><a class='top-a' href='http://www.biribiziokuyor.com/'><b>Menu 3</b></a>    <div class='col1'>      <ul class='colSingle'>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 1</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 2</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 3</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 4</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 5</a></li>      </ul>    </div>    </li>    <li><a class='top-a' href='http://www.biribiziokuyor.com/'><b>Menu 4</b></a>    <div class='col2 left'>      <ul class='colLeft'>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 1</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 2</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 3</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 4</a></li>      </ul>      <ul class='colRight'>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 5</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 6</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 7</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 8</a></li>        <li><a href='http://www.biribiziokuyor.com/'>Sub Menu 9</a></li>      </ul>    </div>    </li>    <li><a class='top-a' href='http://www.biribiziokuyor.com/'><b>Menu 5</b></a></li>  </ul></div></div>  
Bu çalışma DMCA ve Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.KAYNAK GÖSTERİLMEDEN çoğaltılamaz ve paylaşılamaz

Yorum yazın...

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

porno porno izle porno