Hidden Menu Tab Menu - Menu Tersembunyi

Posted by 'cah ndeso kluthuk

Meskipun Hidden Tab Menu ini hanya menggunakan KODE CSS, namun ternyata bisa memberikan penampilan yang sangat hebat dan memuaskan. Sangat kompatible untuk semua browser dan dapat dengan cepat aplikasikan disetiap blog.

D E M O

Langkah untuk membuat Hidden Menu Tab Menu :

1. Amankan Template terlebih dahulu! Silahkan caranya lihat di sini.

2. Tetap di Edit HTML kemudian cari KODE ]]>.

3. Copy paste KODE CSS di bawah ini dan letakkan persis di atasnya.

KODE CSS Hidden Menu Tab Menu :

.menu {font-family: verdana; position:; font-family:verdana;margin-bottom:170px;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {position:relative;float:left;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none;       width:30px;height:150px;
font-weight:bold;background:transparent url(http://i45.tinypic.com/14dm242.gif) top right no-repeat; text-indent:-999px;}
.menu ul li ul{visibility:hidden;position:absolute;width:250px;top:0;left:0;
border-top:40px solid #450401;border-bottom:10px solid #450401;
border-left:4px solid #450401;border-right:4px solid #450401;}
table {margin:0; padding:0; border:0; border-collapse:collapse;font-size:12px;}
/* opera - mozilla */
.menu ul li:hover a {color: #fff;width:288px;}
.menu ul li:hover ul {visibility:visible;}
.menu ul li:hover ul li a {display:block; background:#ac8d64 url(http://i45.tinypic.com/3320w06.gif);
border-right:2px solid #999999;border-left:2px solid #999999;border-bottom:1px solid #CCCCCC;
margin:0;text-indent:0;color: #fff;font-size:11px;font-weight:normal; 
height:auto; line-height:1em; padding:5px; width:236px;text-align:left;}
.menu ul li:hover ul li a:hover {background: #000 url(http://i49.tinypic.com/1079ef7.gif); color: #FF9900;}
.menu ul li a:hover {width:288px;}
.menu ul li a:hover ul {visibility:visible;}
.menu ul li a:hover ul li a {display:block;background:#ac8d64 url(http://i45.tinypic.com/3320w06.gif);
border-left:2px solid #999999;border-right:2px solid #999999;border-bottom:1px solid #CCCCCC;
margin:0;text-indent:0;color:#fff;font-size:11px;font-weight:normal; 
height:auto; line-height:1em; padding:5px; width:246px;w\idth:236px;text-align:left;}
.menu ul li a:hover ul li a:hover {background: #000 url(http://i49.tinypic.com/1079ef7.gif); color: #ff9900;}

4. KLIK Simpan Template.

5. Gunakan KODE HTML berikut di bagian body atau saat posting

xHTML Hidden Menu Tab Menu :

 class="menu">
 

   

 href="http://bloggerstuars.blogspot.com" target="_blank">00
     

       

           

 href="LinkMenu1" title="Title Link Menu1" target="_blank1">Nama Link Menu1
           

 href="LinkMenu2" title="Title Link Menu2" target="_blank2">Nama Link Menu2
           

 href="LinkMenu3" title="Title Link Menu3" target="_blank3">Nama Link Menu3
           

 href="LinkMenu4" title="Title Link Menu4" target="_blank4">Nama Link Menu4
           

 href="LinkMenu5" title="Title Link Menu5" target="_blank5">Nama Link Menu5
           

 href="LinkMenu6" title="Title Link Menu6" target="_blank6">Nama Link Menu6
           

 href="LinkMenu7" title="Title Link Menu7" target="_blank7">Nama Link Menu7
           

 href="LinkMenu8" title="Title Link Menu8" target="_blank8">Nama Link Menu8
           

 href="LinkMenu9" title="Title Link Menu9" target="_blank9">Nama Link Menu9
           

 href="LinkMenu10" title="Title Link Menu10" target="_blank10">Nama Link Menu10
           

 href="LinkMenu11" title="Title Link Menu11" target="_blank11">Nama Link Menu11
           

 href="LinkMenu12" title="Title Link Menu12" target="_blank12">Nama Link Menu12
           

 href="LinkMenu13" title="Title Link Menu13" target="_blank13">Nama Link Menu13
           

 href="LinkMenu14" title="Title Link Menu14" target="_blank14">Nama Link Menu14
           

 href="LinkMenu15" title="Title Link Menu15" target="_blank15">Nama Link Menu15
           

 href="LinkMenu16" title="Title Link Menu16" target="_blank16">Nama Link Menu16
           

 href="LinkMenu17" title="Title Link Menu17" target="_blank17">Nama Link Menu17
           

 href="LinkMenu18" title="Title Link Menu18" target="_blank18">Nama Link Menu18
       
     
   
 

Catatan :

1. Yang paling penting dri penerapan tab menu ini adalah pada penyesuaian lebar menu(width).

2. Untuk perubahan lebar silahkan lakukan perubahan pada semua nilai width pada syntax :.menu ul li ul, .menu ul li:hover a, .menu ul li:hover ul li a , .menu ul li a:hover, .menu ul li a:hover ul li a .

3. Selisih nilai width dari CSS yang tersedia bisa digunakan sebagai pembanding.