Dropdown horizontal menu for blogger-2 hanya menggunakan kode css dan merupakan dropdown menu horizontal 2 tingkat. Dropdown menu dilengkapi kode css3 transition untuk memberi sedikit efek pada hover. Dua buah backgound image berfungsi untuk memberi penampilan yang lebih menarik dan untuk fungsi di IE. Anda dapat membuat anak menu jatuh di posisi sebelah kiri atau di kanan agar dapat menyesuaikan menu dengan lebar halaman blog. Pada dasarnya setiap kelompok menu dibuat terlihat disebelah kanan, namun dalam menu dropdown ini juga ditambah sebuah class "kiwo" untuk membuat kelompok menu keluar di sebelah kiri ketika hover bekerja. Kode css dan xHTML| disertakan di bawah ini.
Kode css
ul.GRdd01_jan12{
list-style-type:none;
padding:2px;
margin:0;
background:rgba(0,0,0,.7);
height:30px;
}
.GRdd01_jan12 ul,.GRdd01_jan12 li{
list-style-type:none;
padding:0;
margin:0;
}
.GRdd01_jan12 li a{
background:#fff url(https://lh5.googleusercontent.com/-0Q3diuGAKIs/UBqmNIiqR3I/AAAAAAAADD4/YCIBe7SKLbk/h120/bg_hor-grad-transp-60x3.png) left center;
}
.GRdd01_jan12 li{
float:left;
background:rgba(0,0,0,.4);
margin:1px 1px 0 0;
position:relative;
}
.GRdd01_jan12 li.GRayah.GRberanda a{
width:100px;
}
.GRdd01_jan12 li.GRayah ul> li a{
background:transparent;
}
.GRdd01_jan12 li.GRayah ul> li a{
background:rgba(0,0,0,.2);
}
.GRdd01_jan12 table{
border-collapse:collapse;
position:absolute;
top:0;
left:0;
z-index:80;
font-size:1em;
}
.GRdd01_jan12 li a{
display:block;
color:#eee;
text-shadow:1px 1px 1px #000;
font-family:arial;
font-size:14px;
line-height:30px;
width:160px;
text-decoration:none;
text-align:center;
}
.GRdd01_jan12 ul > li a{
text-align:left;
padding:0 10px;
width:140px;
background:yellow;
letter-spacing:-1px;
}
.GRdd01_jan12 :hover{
color:#ff0;
background:red;
background:#fff url(https://lh5.googleusercontent.com/-0Q3diuGAKIs/UBqmNIiqR3I/AAAAAAAADD4/YCIBe7SKLbk/h120/bg_hor-grad-transp-60x3.png) left top !important;
}
.GRdd01_jan12 :hover > a{
color:#ff0;
}
.GRdd01_jan12 :hover,.GRdd01_jan12 li a{
transition:1s;
-o-transition:1s;
-ms-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.GRdd01_jan12 ul, .GRdd01_jan12 :hover ul ul{
position:absolute;
left:-9999px;
width:160px;
background:rgba(0,0,0,.6);
}
.GRdd01_jan12 :hover ul{
left:0px;
top:30px;/* background for IE */
background:url(https://lh4.googleusercontent.com/-IkKdZxE55pQ/UBlKXO4i5WI/AAAAAAAADCs/LFtKX04XlhE/s128/transparent.gif);
}
.GRdd01_jan12 :hover ul :hover ul{
padding:0 1px;
left:160px;
top:-3px;
}
.GRdd01_jan12 li ul li.kiwo:hover ul{
left:-162px;
position:absolute;
top:0;
}
xHTML
<ul class="GRdd01_jan12">
<li class="GRayah GRberanda"><a href="http://bestbloggermenus.blogspot.com" target="_blank">Home</a></li>
<li class="GRayah GRberanda"><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></li>
<li class="GRayah"><a href="http://gubhugreyot.blogspot.com" target="_blank">Blogger Menu-1
<ins><table><tr><td>
<ul>
<li><a href="#yourURL">Blogger Menu-1a</a></li>
<li class="GRayah"><a href="#yourURL">Blogger Menu-1b
<ins><table><tr><td>
<ul>
<li><a href="#yourURL">Blogger Menu-1b-01</a></li>
<li><a href="#yourURL">Blogger Menu-1b-02</a></li>
<li><a href="#yourURL">Blogger Menu-1b-03</a></li>
<li><a href="#yourURL">Blogger Menu-1b-04</a></li>
<li><a href="#yourURL">Blogger Menu-1b-05</a></li>
</ul>
</td></tr></table></ins></a>
</li>
<li><a href="#yourURL">Blogger Menu-1c</a></li>
<li><a href="#yourURL">Blogger Menu-1d</a></li>
<li><a href="#yourURL">Blogger Menu-1e</a></li>
</ul>
</td></tr></table></ins></a>
</li>
<li class="GRayah"><a href="http://gubhugreyot.blogspot.com" target="_blank">Blogger Menu-2
<ins><table><tr><td>
<ul>
<li><a href="#yourURL">Blogger Menu-2a</a></li>
<li class="GRayah kiwo"><a href="#yourURL">Blogger Menu-2b
<ins><table><tr><td>
<ul class="kiwo">
<li><a href="#yourURL">Blogger Menu-2b-01</a></li>
<li><a href="#yourURL">Blogger Menu-2b-02</a></li>
<li><a href="#yourURL">Blogger Menu-2b-03</a></li>
<li><a href="#yourURL">Blogger Menu-2b-04</a></li>
<li><a href="#yourURL">Blogger Menu-2b-05</a></li>
</ul>
</td></tr></table></ins></a>
</li>
<li><a href="#yourURL">Blogger Menu-2c</a></li>
<li class="GRayah"><a href="#yourURL">Blogger Menu-2c
<ins><table><tr><td>
<ul>
<li><a href="#yourURL">Blogger Menu-2c-01</a></li>
<li><a href="#yourURL">Blogger Menu-2c-02</a></li>
<li><a href="#yourURL">Blogger Menu-2c-03</a></li>
<li><a href="#yourURL">Blogger Menu-2c-04</a></li>
<li><a href="#yourURL">Blogger Menu-2c-05</a></li>
</ul>
</td></tr></table></ins></a>
</li>
</ul>
</td></tr></table></ins></a>
</li>
<li class="GRayah"><a href="http://gubhugreyot.blogspot.com" target="_blank">Blogger Menu-3
<ins><table><tr><td>
<ul>
<li><a href="#yourURL">Blogger Menu-3a</a></li>
<li><a href="#yourURL">Blogger Menu-3b</a></li>
<li><a href="#yourURL">Blogger Menu-3c</a></li>
</ul>
</td></tr></table></ins></a>
</li>
<li class="GRayah"><a href="http://gubhugreyot.blogspot.com" target="_blank">Blogger Menu-4
<ins><table><tr><td>
<ul>
<li><a href="#yourURL">Blogger Menu-4a</a></li>
<li><a href="#yourURL">Blogger Menu-4b</a></li>
<li><a href="#yourURL">Blogger Menu-4c</a></li>
<li class="GRayah kiwo"><a href="#yourURL">Blogger Menu-4d
<ins><table><tr><td>
<ul class="kiwo">
<li><a href="#yourURL">Blogger Menu-4d-01</a></li>
<li><a href="#yourURL">Blogger Menu-4d-02</a></li>
<li><a href="#yourURL">Blogger Menu-4d-03</a></li>
<li><a href="#yourURL">Blogger Menu-4d-04</a></li>
<li><a href="#yourURL">Blogger Menu-4d-05</a></li>
</ul>
</td></tr></table></ins></a>
</li>
<li><a href="#yourURL">Blogger Menu-4e</a></li>
<li><a href="#yourURL">Blogger Menu-4f</a></li>
</ul>
</td></tr></table></ins></a>
</li>
</ul>
Tidak ada komentar:
Posting Komentar