Membuat Floating Drop Down Menu atau Menu Melayang

FLOATING MENU - Juga dikenal sebagai "MenuTetap" atau "Menu Melayang", menu mengambang di posisi tetap bila Anda menggulir halaman. Makan Menu ini akan  muncul untuk "mengambang" di atas halaman saat Anda menggulir. contoh bisa lihat di blog ini.

Membuat Floating Drop Down Menu atau Menu Melayang

Setelah melakukan  beberapa percobaan tentang menu ini ahirnya ane share untuk sobat sebuah tutorial tentang pembuatan Dropdown Menu Floating atau Menu melayang. dan selanjutnya silakan sobat bisa modifikasi untuk penyesuaian dengan template blog sobat.

Untuk demonya sobat bisa lihat sendiri di blog ini

Cara Penerapannya:-

  • Seperti biasa sobat Login ke akun Blogger sobat
  • Klik Tataletak >>> Add Widget lalu kopas kode dibawah ini

UNTUK KODE NYA
 <style type='text/css'>

#top-wrapper{background:url(http://1.bp.blogspot.com/-Dz55XjfHfIU/T2AtDWgb0aI/AAAAAAAAA9I/vZgjL1iEbgk/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 40px 7px}
#top a.arrow{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 30px 7px 20px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top 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}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

</style>


    <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href='/'><span>Welcome</span>Homepage</a></li>
    <li><a href='#'><span>This is</span>About Us</a></li>

    <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 5</a></li>
    </ul>
    </li>


    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div></div>

Demikian artikel ini semoga bermanfaat dan bisa membantu sobat blogger yang ingin membuat Floating menu.

Note :
Ganti Tanda # dengan URL Sobat

36 Responses to "Membuat Floating Drop Down Menu atau Menu Melayang"

  1. mantab banget, ntar ku pasang ah biar tambah indah blog ku

    ReplyDelete
  2. keren mas....boleh nih sewaktu2 nanti sy pasang
    trims mas Alex buat tutorialnya :)

    ReplyDelete
    Replies
    1. sama2 mas terimakasih kembali ats kunjungannya.

      Delete
  3. boleh jg nih. ntar kalok mnurutku bgus, aku implementasiin ke blog...
    (y)

    ReplyDelete
  4. wuiiiiiih kang alex memang jozzzzzzt klo mslh css nih,,,semangat kang jangan lp kopinya :D

    ReplyDelete
    Replies
    1. pasti gan, css sama kopi kan sohibnya, apalagi sama html wkwkkwkkwkkk, thank gan kunjungannya

      Delete
  5. Selamat sore Master Alex hehe,,Tutornya keren euyy,,sory Mas Ale ada beberapa tutor yang ane pakai tuh,soalnya banyak yang cocok dengan template saya hehehe,,,Makasih Mas Alex,,,

    ReplyDelete
    Replies
    1. silakan mas, gak perlu izin ko, terimakasih banyak sudah berkunjung.

      Delete
  6. wow mantep banget nih mas, sangat bagus diterapkan.
    thanks tutorialnya mas

    ReplyDelete
    Replies
    1. sama masd, terimakasih juga ats kunjungannya.

      Delete
  7. Bang Alex terus terang saya suka mengkoleksi tutor seperti ini buat jaga2 seandainya lagi kangen kepengen mau memakai,izin mau disave dulu nih bang Alex...hahahayyy

    ReplyDelete
    Replies
    1. silakan mas, waduh jadi malu ni, sang master dari banjarmasin berkunjung tidak di jamu, hehhehhe, terimakasih banyak mas sudah ditengokin.

      Delete
  8. wah keren sob, terima kasih sudah berbagi... :-d

    ReplyDelete
    Replies
    1. terimakasih miz atas kunjungan serta supportnya. \o/

      Delete
  9. keren jg ni mas.., thx sharenya.. *smile

    ReplyDelete
    Replies
    1. ok gan, sama2 thank kembali atas kunjungannya.

      Delete
  10. Izin nyimak dan Copas ya Mas... hehehe buat bekal di padepokan :)

    ReplyDelete
    Replies
    1. Silakan Mas, terimakasih banyak support serta kunjungannya.

      Delete
  11. oke sobat..terimakasih sudah berbagi ilmu, sekarang saatnya untuk bersiap diri latihan dengan ilmu baru ini :-)

    ReplyDelete
    Replies
    1. hehhehhe bisa aja ni mas, terimakasoh banyak mas kunjungannya.

      Delete
  12. datang lagi mas, masih penasaran sama floating drop down menunya :)

    ReplyDelete
  13. Wah bagus juga ya... senang bisa belajar banyak di sini... makasih infonya kawan :)

    ReplyDelete
  14. Mantap tutorialnya mas bro... thanks sharenya yaa.. salam kenal n sukses selalu...

    ReplyDelete
    Replies
    1. thank mas atas kunjungannya, salam kenal kembali

      Delete
  15. berkunjung malam kang alex tetep support dan hapy weekend yah :) jgn lp kopinya di sruput biar maknyuzzzzzzzzzzt

    ReplyDelete
    Replies
    1. pastinya mass, terimakasih banyak kunjungannyamas

      Delete
  16. wah terimakasih sob tutorialnya

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat