Membuat Menu Navigasi Horizontal Melayang Dengan CSS

Membuat Menu Navigasi Horizontal Melayang Dengan CSS

ARTIKEL TERKAIT:

Pada kesempatan kali ini saya akan share tentang cara membuat menu navigasi horizontal melayang dengan CSS. Menu navigasi horizontal melayang ini terbilang unik dan elegant. Selain tampilannya yang berbeda dengan menu-menu navigasi pada umumnya dan memang sangat indah, menu ini juga fast loading (ringan) sehingga tidak membebani bobot loading blog anda. Kita bisa membuat menu navigasi horizontal melayang ini dengan menggunakan CSS.

jika berminat untuk membuat menu navigasi horizontal melayang seperti yang terlihat pada gambar di atas.
Silahkan ikuti langkah -langkah bertikut :
1. Login ke blogger kamu.
2. Tata letak
3. Tambah Gadget.
4. Pilih HTML/Javascript
5. Copy kode di bawah ini dan Letakkan di dalamnya.

<style type="text/css"> #kumpulsuka ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#kumpulsuka li .current{color: transparant;}#kumpulsuka li a:hover, #kumpulsuka li a:active {background: #009900; background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff; margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#kumpulsuka {width: auto;float: left;margin: 0;padding: 0;}#kumpulsuka {margin: 0;padding: 0;}#kumpulsuka ul {float: left;list-style: none;margin: 0;padding: 0;}#kumpulsuka li {list-style: none;margin: 0;padding: 0;}#kumpulsuka li a, #kumpulsuka li a:link, #kumpulsuka li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kumpulsuka li a:hover, #kumpulsuka li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kumpulsuka li li a, #kumpulsuka li li a:link, #kumpulsuka li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#kumpulsuka li li a:hover, #kumpulsuka li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#kumpulsuka li {float: left;padding: 0;}#kumpulsuka li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kumpulsuka li ul a {width: 140px;}#kumpulsuka li ul ul {margin: -32px 0 0 171px;}#kumpulsuka li:hover ul ul, #kumpulsuka li:hover ul ul ul, #kumpulsuka li.sfhover ul ul, #kumpulsuka  li.sfhover ul ul ul {left: -999em;}#kumpulsuka  li:hover ul, #kumpulsuka  li li:hover ul, #kumpulsuka  li li li:hover ul, #kumpulsuka  li.sfhover ul, #kumpulsuka  li li.sfhover ul, #kumpulsuka  li li li.sfhover ul {left: auto;}#kumpulsuka  li:hover, #kumpulsuka  li.sfhover {position: static;}#footer-column-divide {clear:both;}#kumpulsuka{font-family:Comic Sans Ms;background:#000  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD23nYPHGrUfAXzLYmh0A7pFWBWdYWY8cPH90bE3Xyk6ygg7FdAFNkbh0KvRw-mxd9zwBYbUwsnartR6R7slatY-_CqBR97V4U87LzFxLtd4O59j8J9lyT_rVNyNr9i4q8V3NGxlk3a7un/)repeat-x;(0,0,0, 0.80);border: 0; padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> <div id='kumpulsuka'> <ul id='kumpulsuka'> <li><a href='#'>Beranda</a></li> <li><a href='#'>Daftar Isi</a></li> <li><a href='#'>Tutorial Blog</a> <ul class='children'> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> </ul> </li> <li><a href='#'>About Me</a> <ul class='children'> <li><a href='#'>Facebook</a></li> <li><a href='#'>Tweeter</a></li> <li><a href='#'>Google+</a></li> </ul> </li> <li><a href='#'>Tips And Triks</a> <ul class='children'> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> </ul> </li> <li><a href='#'>Tutorial Blog</a> <ul class='children' target='_blank'> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> </ul> </li> <li><a href='#'>kumpulsuka</a> <ul class='children'> <li><a href='#' target='_blank'>Null</a></li> <li><a href='#' target='_blank'>Null</a></li> </ul> </li> <li><a href='#'>xxx</a></li> </ul> </div>

6. Simpan dan lihat hasilnya...

Note :
Ganti tanda # dengan alamar URL tujuan kamu, dan sesuaikan teks atau tulisan yang ada di sampingnya.

Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.