Yeni nesil CSS top menu (Search Box Destekli)

Artık her sitenin, her blog'un vazgeçilmezi olan top menüler bir hayli yaygın. Bir çok site'de css destekli menüler bulabilmek mümkün. Ancak bu menüde search box(arama kutucuğu) desteği mevcut.

Blogunuza/Sitenize top menu bar eklemenizi sağlar.

1. Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;

* {
margin: 0px auto;
padding: 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.nav {
background: #000;
height: 60px;
display: inline-block;
margin-left: 350px;
position: fixed;
z-index: 9999;
}

.nav li {
float: left;
list-style-type: none;
position: relative;

}
.nav li a {
font-size: 16px;
background: #000;
color: white;
display: block;
line-height: 60px;
padding: 0 26px;
text-decoration: none;
border-left: 0px solid #2e2e2e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);

}
.nav li a:hover {
color: white;
background-color: #323131;
}

#settings a {
padding: 18px;
height: 24px;
font-size: 10px;
line-height: 24px;
}
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 1px solid: #fff;
height: 52px;
margin-right: 0;
color: black;
outline: none;
background: #000;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#search_text:focus {
background: #DEDEDE;
}
#search_button {
border: 0 none;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1T4oXoWz9cPhytmXOpcLOzkS90Z9nFjkQ2FBT40cEoA8m-FjN_SjOOzBTShQkI6PxVVMJ1STT2ZytcZ_T1tRPxMUQIllzGwgZ08R6ORXoLapKq0BDhrhYs9ZytPQfGV0OVLndu0x1-5Wt/h120/search.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
}
#options a{
border-left: 0 none;
}
#options>a {
background-image: url(triangle.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: transparent;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 0px solid #DEDEDE;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}

2. Yine CTRL ve F kombinasyonu'nu kullanarak sayfada " <div id='content-wrapper'> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;

<ul class='nav'>
<li id='settings'>
<a href='/'><img src='https://lh3.googleusercontent.com/-libiDemH_bw/Vmm-Q_3Y3KI/AAAAAAAAS8Q/gE-E-Y18fCQ/h120/logo.png'/></a>
</li>
<li>
<a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrZWTbJyizC15byibgO1xW9NkRztnFccD5sm0Sr8D0H3ljcWp6fJhtF0JNu3NBiNd_ZjuObpqogY1Vmiddu46CE-HDMVNsIVHQkoFet08S83_D4PCE59Z-9s6SWfFSnYd-Y5BKg1WSgFr/h120/anasayfa.png'/> Anasayfa</a>
</li>
<li id='search'>
<form action='/search/label' method='get'>
<input id='search_text' name='search_text' placeholder='Ne arıyorsun ?' type='text'/>
<input id='search_button' name='search_button' type='button'/>
</form>
</li>

<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Blogger</a>
<ul class='subnav'>
<li><a href='http://metamorpheuss.blogspot.com/search/label/blogger'><img src='https://lh3.googleusercontent.com/-_gP2Be7ZYI8/VNev3wqcH2I/AAAAAAAAP7g/XVUZyKERpg8/h120/blogger.png'/> Blogger</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/tema'><img src='https://lh4.googleusercontent.com/-kd7_u5ekjPA/VNev3hvyCZI/AAAAAAAAP7c/s5RnQ83jyVQ/h120/blogger-temalari.png'/> Şablonlar</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/eklenti'><img src='https://lh5.googleusercontent.com/-rTaGj7iQv20/VNev3PhF0pI/AAAAAAAAP70/U7PVHldJ0wc/h120/blogger-eklentileri.png'/> Eklenti/Widget</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/ders'><img src='https://lh3.googleusercontent.com/-HEvsw4-tfng/VNev3LcblaI/AAAAAAAAP7U/SYSxVd0jDeA/h120/blogger-dersleri.png'/> Anlatımlar</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/seo'><img src='https://lh3.googleusercontent.com/-XBwaJucDc9Y/VckrCnnavII/AAAAAAAASMM/asEQYA9RP50/h120/seo.png'/> SEO</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/menuler'><img src='https://lh3.googleusercontent.com/-RdSqypKi8yE/VckrbghWzxI/AAAAAAAASMU/kI2-NWd32x0/h120/menu.png'/> Menüler</a></li>
</ul>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Webmaster</a>
<ul class='subnav'>
<li><a href='/search?q=web'><img src='https://lh3.googleusercontent.com/-TE70w0nwTJY/VXr05HciFOI/AAAAAAAAQ5U/L2q7HFev030/h120/d%25C3%25BCnya.png'/> WEB</a></li>
<li><a href='/search?q=htmlkodları'><img src='https://lh3.googleusercontent.com/-e7ZNutGq8x0/Vck84hYR1CI/AAAAAAAASMw/YHly7SIRa6g/h120/html.png'/> HTML</a></li>
<li><a href='/search?q=csskodlari'><img src='https://lh3.googleusercontent.com/-NoClNWDIFAc/Vck9NxJoLaI/AAAAAAAASM4/WMjytbjMV94/h120/css.png'/> CSS</a></li>
<li><a href='/search?q=fontlar'><img src='https://lh3.googleusercontent.com/-nevONAlubcA/Vck9ma2u8zI/AAAAAAAASNA/KsOJXTirALE/h120/font.png'/> Yazı Fontları</a></li>
</ul>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Uygulama</a>
<ul class='subnav'>
<li>
<a href='/search?q=program'>
<img src='https://lh3.googleusercontent.com/-TF91W1357Zc/VXr48GBCvhI/AAAAAAAAQ6M/Uq_jvmM24rc/h120/programs.png'/> PROGRAM
</a>
</li>
<li>
<a href='/search?q=crack'>
<img src='https://lh3.googleusercontent.com/-fD3ewmd5Swg/VXr48Kdo40I/AAAAAAAAQ6Y/ypTUc-ffV6w/h120/crack.png'/> CRACK/PATCH
</a>
</li>
<li>
<a href='/search?q=oyun'>
<img src='https://lh3.googleusercontent.com/-dH6UywbvhXU/VXr6gnCAHlI/AAAAAAAAQ6o/VteJVagsluw/h120/oyun-indir.png'/> OYUN iNDiR
</a>
</li>
</ul>
</li>

<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Kategoriler</a>
<ul class='subnav'>
<li>
<a href='/search?q=caps'>
<img src='https://lh3.googleusercontent.com/-LV09xc-ie3s/VXr7sLYwsPI/AAAAAAAAQ7I/4ZBvDJuEfJY/h120/komik.png'/> CAPS
</a>
</li>
<li>
<a href='/search?q=video'>
<img src='https://lh3.googleusercontent.com/-LV09xc-ie3s/VXr7sLYwsPI/AAAAAAAAQ7I/4ZBvDJuEfJY/h120/komik.png'/> ViDEO
</a>
</li>
<li>
<a href='/search?q=karikatür'>
<img src='https://lh3.googleusercontent.com/-R_fgXTyVd0I/VXr7rccuzNI/AAAAAAAAQ7A/wZd-W3qYEek/h120/karikatur.png'/> KARiKATüR
</a>
</li>
<li>
<a href='/search?q=full-album'>
<img src='https://lh3.googleusercontent.com/-4DWG-l9DR7Q/VXr7rUbsGlI/AAAAAAAAQ68/hJoAhhUw0bU/h120/full-album.png'/> FULL ALBUM
</a>
</li>
<li>
<a href='/search?q=mp3'>
<img src='https://lh3.googleusercontent.com/-zpX25VOm35U/VXr8_qmd2CI/AAAAAAAAQ8A/VmrlaMYLpDE/h120/mp3.png'/> MP3 İNDİR
</a>
</li>
<li>
<a href='/search?q=videoklip'>
<img src='https://lh3.googleusercontent.com/-Wx7KDz94cFk/VXr7stbooqI/AAAAAAAAQ7Q/NLniGwnE_q4/h120/video.png'/> VİDEOKLİP İZLE
</a>
</li>
<li><a href='/search?q=web'><img src='https://lh3.googleusercontent.com/-TE70w0nwTJY/VXr05HciFOI/AAAAAAAAQ5U/L2q7HFev030/h120/d%25C3%25BCnya.png'/> WEB</a></li>
<li><a href='/search?q=galeri'><img src='https://lh3.googleusercontent.com/-pLWgSsWlrto/VXr1emQVOtI/AAAAAAAAQ5c/F2annDrXb44/h120/galeri.png'/> GALERİ</a></li>

</ul>
</li>

</ul>

<script src='prefixfree-1.0.7.js' type='text/javascript'/>

MetamorpheuS

Pages

Kategoriler

Arşivden

Yeni nesil CSS top menu (Search Box Destekli)

Sıcak

Popüler Yayınlar

En Yeniler