Menu horizontal bercabang

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...

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!!!

Posted in: WEBLOGGER