Fixed Dropdown Horizontal Menu Navigasi

Phew... bingung juga ngasih namanya... but anni3 udah capek banget bikin yang satu ini...

Jadi yang dimaksud dengan "ini" adalah Menu anni3 yang sekarang... asal menu dari CSS Menu Builder dan terinspirasi dari horizontal menu punya o-om. tapi yang ini ada fixed dan ada dropdownnya... (umm kalo di IE kayaknya rada2 ancur deh! ada yang mau betulin??)

Mau tau caranya??? ini dia...:sinchan

  1. masuk ke akun blogger
  2. masuk ke Tata Letak --> Edit HTML
  3. Masukkan CSS ini... (atau gampangnya di atas kode ]]></b:skin>

    /* @Nn!3 Navbar */
    #menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) repeat-x;
    position:fixed;_position:absolute;top:0px; clip:inherit;
    opacity: 0.85; filter: alpha(opacity: 85);}
    #menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
    #menu ul{padding:0; margin:0;}
    #menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
    #menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
    #menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
    #menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
    #menu ul li ul {display:none;}
    #menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
    display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
    #menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
    #menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
    #menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}

    /* Search */
    #search{float:right; height:30px; margin:0; width:100%; padding:2px;}
    .buttonreset {color : #FfffFF; background-color: #CE0303; border: 2px outset #FF0000;}
    .buttonsubmit {color : #FfffFF; background-color: #CE0303; border: 2px outset #FF0000;}
    .textinput {color : #FfffFF; background-color: #7C01A4; border: 2px inset #C000FF;}


  4. trus masukkan kode ini di paliiiing bawah sebelum kode </body>

    <div id='menu'>
    <ul>
    <li><a class='active' href='/'>Depan</a></li>
    <li><a href='#'>Menu 1</a></li>
    <li><a href='#'>Menu 2</a>
    <ul>
    <li><a href='#'>Menu 2.1</a></li>
    <li><a href='#'>Menu 2.2</a></li>
    </ul></li>
    <li>dan lain lain</li>
    </ul>
    <div id='menu-cari'>
    <form action='/search' method='get'>
    <div><input class='textinput' id='s' name='q' onblur='if (this.value == "") {this.value = "Cari Posting di Sini";}' onfocus='if (this.value == "Cari Posting di Sini") {this.value = "";}' size='25' type='text' value='Cari Posting di Sini'/>
    <input class='buttonsubmit' type='submit' value='Go'/>
    </div>
    </form>
    </div>
    </div>


    Penjelasan: yang warnanya merah itu yang harus diperhatikan...
    Menu 1, Menu 2 adalah menu utamanya... trus Menu 2.1, Menu 2.2 adalah sub-menu dari Menu 2... cobalah tuk mengerti

  5. Dan yang terakhir tapi paling penting! klik Simpan


Jangan Lupa kirim komentar soalnya komentar di sini masih dikit banget!!!

17 komentar:

  1. Thanks infonya, nanti saya pinjam kodenya untuk sy coba di website saya yaaaa

    BalasHapus
  2. Mbak kalo cara bikin menu di atas header seperti punya Mbak di blogspot ato wordpress bgm ?Tlg jwbnya di cc ke email ya di dherdiansyah@gmail.com
    TK

    BalasHapus
  3. Mantafff..coba dulua ah..ini yg gue cari Trimssssssss

    BalasHapus
  4. Mbak udah saya coba di blog saya di http://percobaan.blogspot.com tapi sub menunya kok ga keluar ya ?kenapa ?

    BalasHapus
  5. Sorry Mbak menunya dah bisa keluar tapi posisinya di samping kiri..kalo pingin ditengah bgm ?Biar balance gitu lho...

    BalasHapus
  6. @dhyan: ya anni3 sihmasih bingung... dicoba2 aja ya... btw kalo di IE lebih parah lagi.... secara menunya nggak jadi fixed dan gak keluar sub-menu-nya... hu..hu.. anni3 bukan CSS designer yg baik sih... (kok jadi curhat ya?)

    BalasHapus
  7. thx tutorialnya..
    btw nice template..

    BalasHapus
  8. Tolong Kunjungi Blog Saya Temen - Temen Guru Semua,,saya Ingin Banyak Menjalin Teman,,Saya Ini Pemula Blog...

    BalasHapus
  9. Tema menunya bisa diganti gx?? ,soalnya gx necing sama temlateku

    BalasHapus
  10. terima kasih ya. Mba Anni, kalo supaya buat icon di address bar, sebelah kirinya supaya kaya mba bagaimana ya? terima kasih sebelumnya. saya follow ya.
    ada lagi mba, kalau kita editnya di template terbaru koq ga bisa ya (dropdown menunya ga berfungsi?)

    BalasHapus
  11. ya trimakasih banyak sob....

    BalasHapus
  12. mba' tks tas tutorialx

    mantep...tepz!!!

    oy... mba' berkunjung jg ya ke blogku... syukur2 klo follow...hehehe.

    BalasHapus