Kamis, 25 April 2013

Dropdown Menu Dengan "CheckBox".



CheckBox


 









Demo Dropdownmenu dengan "CheckBox".






Tempatkan kode css3 dibawah ini diatas kode ]]><b:skin>

#menunya {position:relative;width:100%;background:#72BBFF;}
.checkbox {display: none;}
.label{
-webkit-transition:.3s;
-moz-transition:.3s;
-o-transition:.3s;
transition:.3s;
width: 64px;height:64px;font-size: 20px;display: inline-block;background-size:cover;margin:.5em;background:rgba(0,132,255,0.15);box-shadow: 0 1px 3px #000000 inset;border-radius:1px;
}
.checkbox:checked + .label {
-webkit-transition:.3s;
-moz-transition:.3s;
-o-transition:.3s;
transition:.3s;
box-shadow:inset 0px 0px 10px rgba(0, 135, 255,0.5);
background:rgba(0,132,255,0.3)
}
#mobiledropmenu:checked ~ .title1 {
-webkit-transition:1s;
width: 100%;
height: auto;
opacity: 1;
}
.title1 {
-webkit-transition:1s;
width: 0%;
height: 0px;
opacity: 0;
} .button a{color:#fff;text-decoration:none;border-top:1px solid #fff;text-align:center;text-transform:uppercase;width:auto;padding:1.2em;display:block}
.button a:hover {cursor:pointer;background:rgba(0,132,255,0.15);}
Kode HTML.
Anda bisa menempatkan kode ini di widget Html/JavaScript.
<div id="menunya">
<div id="logo">
</div>
    <input type="checkbox" class="checkbox" name="menu" value="mobiledropmenu" id="mobiledropmenu"/>
    <label for="mobiledropmenu" class="label"><img src="http://2.bp.blogspot.com/-NGRs3RKerYc/UWU6H0oM94I/AAAAAAAAA88/lOqlSoL2MLQ/s1600/dropmenu.png"/></label>
<div class="title1">
<div class="button">
<a href='#'>Menu1</a>
</div>
<div class="button">
<a href='#'>Menu2</a>
</div>
<div class="button">
<a href='#'>Menu3</a>
</div>
<div class="button">
<a href='#'>Menu3</a>
</div>
<div class="button">
<a href='#'>Menu4</a>
</div>
</div>
</div>
Ganti text yang berwarna "Biru" dengan url yang dituju dan warna "Merah" ganti dengan nama menu yang anda inginkan.
___________________________________
Sumber : http://maz-waone.blogspot.com/2013/04/dropdown-menu-dengan-checkbox.html

0 komentar:

Poskan Komentar

| Guru Madrasah Blog © 2013. All Rights Reserved | Template Style by My Blogger Tricks .com | Edited by Abdul Hanan | Back To Top |