Multilevel dd menu for blogger-1 merupakan dropdown menu dengan menggunakan kode css. Memanfaatkan secara maksimal listing li dan ul serta didukung dengan penggunaan kode css3 seperti border-radius dan css3 transition. Dengan penggunaan background yang sangat minimalis dari background rgba sehingga menampilkan efek transparansi. Menu horizontal ini sudah dilengkapi dengan css reset untuk tab blogger yang bertujuan untuk mendapatkan fungsi dropdown secara penuh. Dengan css reset maka anda tak akan kesulitan untuk mendapatkan hasil optimal tanpa terhalang kode css default tabs blogger yang sering menjadi pengganggu untuk membuat menu dropdown horizontal di bawah header blog.
Kode CSS
/* css reset blogger tabs */
.tabs .widget ul,.tabs .widget li,.tabs .widget li a{
margin:0;
padding:0;
}
.tabs .section:first-child,.tabs .section:first-child ul,.tabs .widget ul,.tabs .widget li,.tabs .widget li.selectrd,.tabs .widget li.selected a,.tabs .widget li a,.tabs .widget li:first-child a{
border-radius:0;
background:none;
border:none;
}
.tabs .widget li a:hover{
background:none;
}
.tabs .widget ul{
list-style:none;
overflow:visible;
}
/* css reset blogger tabs */
/* start - dd menu */
.myGRsimpledd31{
padding:2px 0;
margin:0;
position:relative;
background:#aaa;
height:32px;
}
#myGRdd_menu31 li a.arrow:hover{
background-image:url(https://lh6.googleusercontent.com/-Uoci8xI_-1c/UBQ1_4Oy_JI/AAAAAAAAC44/Y8H1XyrM3cw/s128/collapsing-right.gif);
}
#myGRdd_menu31 > li > a.arrow:hover{
background-image:url(https://lh5.googleusercontent.com/-W7J_HZxGMls/UBQ1_cbDfwI/AAAAAAAAC4w/ZSV6Rrz_g-c/s128/collapsing-down.gif) !important;
}
ul#myGRdd_menu31,ul#myGRdd_menu31 ul{
list-style-type:none;
margin:0px;
list-style-image:none;
padding:0px;
}
ul#myGRdd_menu31{
margin:0 70px;
}
ul#myGRdd_menu31 ul{
width:200px;
}
ul#myGRdd_menu31 li{
position:relative;
list-style-type:none;
margin:0px;
width:auto;
float:left;
list-style-image:none;
}
ul#myGRdd_menu31 li li{
width:auto;
float:none;
}
#myGRdd_menu31 a{
text-align:left;
display:block;
font-family:verdana;
white-space:nowrap;
color:#6CF;
font-size:14;
text-decoration:none;
padding:5px 20px 5px 10px;
}
#myGRdd_menu31 a:focus{
outline-style:none;
outline-color:invert;
outline-width:medium;
}
#myGRdd_menu31 a.no-click{cursor:default;}
#myGRdd_menu31 li a{margin:-1px -1px 0px 0px;}
#myGRdd_menu31 li li a{margin:0px 0px -1px;}
#myGRdd_menu31 li a.arrow{
background-repeat:no-repeat;
background-position:98% 50%;
}
#myGRdd_menu31 > li > a.arrow{
background-repeat:no-repeat;
background-position:96% 50%;
}
#myGRdd_menu31 li:hover > a{color:white;}
#myGRdd_menu31 li ul ,
#myGRdd_menu31 li:hover ul ul ,
#myGRdd_menu31 li:hover ul ul ul ,
#myGRdd_menu31 li:hover ul ul ul ul ,
#myGRdd_menu31 li:hover ul ul ul ul ul ,
#myGRdd_menu31 li:hover ul ul ul ul ul ul ,
#myGRdd_menu31 li:hover ul ul ul ul ul ul ul ,
#myGRdd_menu31 li:hover ul ul ul ul ul ul ul ul{
z-index:999;
position:absolute;
display:none;
}
#myGRdd_menu31 li:hover ul{display:block;}
#myGRdd_menu31 li li:hover ul ,
#myGRdd_menu31 li li li:hover ul ,
#myGRdd_menu31 li li li li:hover ul ,
#myGRdd_menu31 li li li li li:hover ul ,
#myGRdd_menu31 li li li li li li:hover ul ,
#myGRdd_menu31 li li li li li li li:hover ul{
display:block;
margin-left:100%;
}
#myGRdd_menu31 ul ul{
top:1px;
left:-1px;
}
#myGRdd_menu31 ul ul.kekiri{
top:1px;
left:-200%;
}
#myGRdd_menu31 li > ul{
background:rgba(0,0,0,.5);
}
#myGRdd_menu31 li:hover ul{
margin-left:0px;
border-radius:0 3px 6px 6px;
}
#myGRdd_menu31 li:hover ul.kekiri{
border-radius:3px 0 6px 6px;
}
#myGRdd_menu31 li > ul li:first-child,#myGRdd_menu31 li > ul li:first-child a{
border-radius:0 3px 0 0;
}
#myGRdd_menu31 li > ul.kekiri li:first-child,#myGRdd_menu31 li > ul.kekiri li:first-child a{
border-radius:3px 0 0 0;
}
#myGRdd_menu31 li > ul li:last-child,#myGRdd_menu31 li > ul li:last-child a{
border-radius:0 3px 6px 6px;
}
#myGRdd_menu31 li > ul.kekiri li:last-child,#myGRdd_menu31 li > ul.kekiri li:last-child a{
border-radius:3px 0 6px 6px;
}
#myGRdd_menu31 li{
top:-1px;
background:rgba(0,0,0,.1);
}
#myGRdd_menu31 li:hover{
background:rgba(0,0,0,.4);
}
#myGRdd_menu31 a{
background-color:rgba(0,0,0,.2);
padding:9px 20px 9px 10px;
letter-spacing:-1px;
}
#myGRdd_menu31 ul li:hover > a{
background-color:rgba(0,0,0,.3);
}
#myGRdd_menu31 li,#myGRdd_menu31 a{
transition:1s;
-o-transition:1s;
-ms-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
#myGRdd_menu31 ul li > a{
font-size:12px;
}
#myGRdd_menu31 li a.kekiwo{
padding-left:20px;
padding-right:10px;
background-position:4px 50%;
}
#myGRdd_menu31 li a.kekiwo:hover{
background-image:url(https://lh6.googleusercontent.com/-LXHjWgzRi_A/UBh61SVkBWI/AAAAAAAAC_w/-2Ig-tWFuus/h120/collapsing-left.png);
background-position:4px 50%;
}
xHTML
<div class="myGRsimpledd31">
<ul id="myGRdd_menu31">
<li><a href="#" class="arrow">My Menu 1</a>
<ul class="arrow-pad">
<li><a href="#">My sub menu item 1</a></li>
<li><a href="#" class="arrow">My sub menu item 2</a>
<ul class="arrow-pad">
<li><a href="#">My Item 1</a></li>
<li><a href="#">My Item 2</a></li>
<li><a href="#" class="arrow no-click">My Sub Menu</a>
<ul>
<li><a href="#">My Item 1</a></li>
<li><a href="#">My Item 2</a></li>
<li><a href="#">My Item 3</a></li>
<li><a href="#">My Item 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">My sub menu item 3</a></li>
</ul>
</li>
<li><a href="#" class="arrow">My Menu 2</a>
<ul class="arrow-pad">
<li><a href="#">My sub menu item 1</a></li>
<li><a href="#" class="arrow">My sub menu item 2</a>
<ul class="arrow-pad">
<li><a href="#">My Item 1</a></li>
<li><a href="#">My Item 2</a></li>
<li><a href="#" class="arrow no-click">My Sub Menu</a>
<ul>
<li><a href="#">My Item 1</a></li>
<li><a href="#">My Item 2</a></li>
<li><a href="#">My Item 3</a></li>
<li><a href="#">My Item 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">My sub menu item 3</a></li>
</ul>
</li>
<li><a href="#" class="arrow">My Menu 3</a>
<ul class="arrow-pad">
<li><a href="#">My sub menu item 1</a></li>
<li><a href="#" class="arrow">My sub menu item 2</a>
<ul class="arrow-pad">
<li><a href="#">My Item 1</a></li>
<li><a href="#">My Item 2</a></li>
<li><a href="#" class="arrow no-click kekiwo">My Sub Menu</a>
<ul class="kekiri">
<li><a href="#">My Item 1</a></li>
<li><a href="#">My Item 2</a></li>
<li><a href="#">My Item 3</a></li>
<li><a href="#" class="arrow no-click kekiwo">My Item 4</a>
<ul class="kekiri">
<li><a href="#">My Item 1</a></li>
<li><a href="#">My Item 2</a></li>
<li><a href="#">My Item 3</a></li>
<li><a href="#">My Item 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">My sub menu item 3</a></li>
</ul>
</li>
</ul>
</div>
Tidak ada komentar:
Posting Komentar