Dropdown Menu Dengan "CheckBox".

 









Demo Dropdownmenu dengan "CheckBox".

Silahkan anda klik gambar "≡" untuk memunculkan menu-nya.

Kode Css3.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDL_31W3Y3IpwufYLqck8s3nAZnnbOJYjYoggZUv-iBbpl-MnKFPmPoBqiBwcJQwiwL40gunOvB3Oy3K0cQuqVvilhFGLbL4xOnikLOeUHQN0eexFVSr3xzDPshYf5P6CFCGRv5ukY5wbY/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

Tweet