Saya bingung, Artikel ini mau saya beri judul apa, tapi artikel kali ini yang pastinya berhubungan dengan menu navigasi yang melayang atau floating yang akan tetap muncul pada bagian atas blog pada saat pengunjung melakukan scroll kebawah, selain itu menu ini juga sudah saya modifikasi sedemikan rupa dengan penggabungan beberapa kode CSS dan HTML serta penggabungan sebuah menu navigasi dropdown dan menu search sehingga akan tampak lebih menarik untuk anda pasang pada blog anda.
Menu Navigasi Droopdown/Toolbar Melayang ini sebenarnya hampir sama dengan Toolbar Melayang yang pernah saya bahas sebelumnya di blog ini tentunya. Nah, untuk contoh menu navigasi melayang yang akan saya berikan disini bisa anda lihat pada blog ini dan tanpa berkata-kata panjang lebar lagi, langsung saja saya berikan tutorial cara memasangnya beserta kode CSS dan HTML yang diperlukan.
CSS
Untuk meletakkan kode CSS di bawah ini, terlebih dahulu login ke akun Blogger yang anda miliki kemudian lakukan pengeditan pada Template » Edit HTML kemudian Copy CSS di bawah ini dan letakkan tepat di atas tag ]]></b:skin>
#lscnav{width:100%;min-width:960px;position:fixed;top:0;left:0;right:0;height:30px;font-size:13px;z-index:99;background-color:#1E6510;border-bottom:1px solid #000}
#lscwrapper{width:980px;height:30px;margin:0 auto;}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#lscmenunav{width:960px}
#lscmenunav,#lscmenunav ul{list-style:none;font-family:Arial, serif;margin:0;padding:0;}
#lscmenunav a{display:block;text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;color:#fff;padding:8px 8px 8px;border-left:0px solid #000;text-shadow:0 1px 1px #000;}
#lscmenunav a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD8MGBtfaoaDgvkY_M2NYQ_IFRoyiTemwxlMHkp_7w4MvcGiTMM-bdqUPHKo0ehEMj2ispW5rZEnQ96B1jLJu_5kq1OOFjJv1pcC6LaQGDbNHmfiLM_CMeGyd0i6_PgwJiycPzkgGnKdI/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 8px}
#lscmenunav li{float:left;position:static;width:auto}
#lscmenunav li ul,#menubar ul li{width:150px}
#lscmenunav ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#lscmenunav li ul{z-index:50;position:absolute;display:none;background:#26231c;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#lscmenunav li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#000;color:#fff;-webkit-transition: background-color .555s;-moz-transition: background-color .555s;-o-transition: background-color .555s;-ms-transition: background-color .555s;}
#lscmenunav li:hover ul,#menubar li.hvr ul{display:block}
#lscmenunav li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#lscmenunav li ul li.hr{border-bottom:1px solid #433e31;border-top:1px solid #11100d;display:block;font-size:1px;height:0;line-height:0;}
#lscmenunav ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#menu-right{float:right;display:inline;width:160px;padding-top:5px;margin-right:5px}
#topsearch1 #feed-1{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#333}
#topsearch1 #feed-s{width:126px}
#search{height:18px;width:150px;background:#aeaeae;padding:0}
#search input{border:0;background:none;color:#575757}
#s{font-size:12px;width:120px;padding-left:4px;background:none;margin:0}
#topsearch #search{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;border:1px solid #999}
#topsearch #s{width:125px}
Jangan simpan template dulu, namun lanjutkan dengan memasukkan kode HTML-nya juga ke dalam template. Oh ya mungkin anda bertanya, mengapa saya membagi dan memberi warna berbeda pada kode CSS di atas. Sebentar saya jelaskan.
HTML
Copy kode HTML di bawah ini tepat di bawah tag <body>
<div id='lscnav'>Keterangan :
<div id='lscwrapper'>
<ul id='lscmenunav'>
<li class='home'><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Drop menu 1</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 2</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
<li><a href='#'>Sub menu 5</a></li>
<li><a href='#>Sub menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<div style='float:right'>
<div id='menu-right'>
<div id='topsearch'>
<div id='search'>
<form action='/search' id='searchform' method='get' name='searchform'><input class='keyword' id='s' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/><input alt='search' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHA9-v9ebJLbnOxucIYjxQl_IVvJzqjPB6q4cJZ57y8eWhcanCaZtHBJ1gL9TAYUGwCnu3_qr7srkENK1PMupdQN9AV0nPk568ha6cRL6cH0IfRqaFpZshhOip2y5Q57dG16DPCgQ_0Y/s1600/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' title='Search' type='image'/></form>
</div>
</div>
</div>
</div>
<br class='clearit'/>
</div>
</div>
Ganti tanda # dengan link blog anda dan Menu 1, Sub Menu dst sesuai dengan kata-kata anda sendiri dan jika sudah selesai, silahkan klik pratinjau atau simpan untuk melihat hasilnya
Penjelasan Singkat
CSS dan HTML yang saya beri tanda dengan warna Biru adalah CSS dan HTML untuk Menu Search (Pencarian), jika anda tidak ingin memakai/memasangnya pada blog anda, silahkan anda hapus kode tersebut.
facebook
twitter
google+
fb share