Pada kesempatan kali ini saya akan share vertikal menu menggunakan CSS3 and HTML5 yang keren tentunya. Contohnya seperti gambar diatas. Mari, langsung saja gan, disimak ya...
Duplicat atau centang expand template dulu ya, sekedar jaga-jaga aja.
1. Letakkan kode script dibawah ini di gadget HTML kalian...
<nav id="menu">
<ul class="parent-menu">
<li><a href="#">Home & Kitchen</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Electronics</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul></li>
<li><a href="#">Clothing</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul></li>
<li><a href="#">Cars & Motorbikes</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Books</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Support</a>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Deliveries</a></li>
<li><a href="#">T&C</a></li>
</ul>
</li>
</ul>
</nav>
2. Save/Simpan
3. Masuk Blogger edit HTML kalian lalu Cari kode ]]:</skin> dan paste kode dibawah ini tepat dibawahnya.
p, ul, li, div, nav
{
padding:0;
margin:0;
}
body
{
font-family:Calibri;
}
#menu {
overflow: auto;
position:relative;
z-index:2;
}
.parent-menu {
background-color: #0c8fff;
min-width:200px;
float:left;
}
#menu ul
{
list-style-type:none;
}
#menu ul li a
{
padding:10px 15px;
display:block;
color:#fff;
text-decoration:none;
}
#menu ul li a:hover
{
background-color:#007ee9;
}
#menu ul li:hover > ul {
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul {
position: absolute;
background-color: #333;
top: 0;
left: -200px;
min-width: 200px;
z-index: -1;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul li a:hover
{
background-color:#2e2e2e;
}
4. Klik save/simpan
5. Selesai
Sekian artikel ini dibuat untuk berbagi saja...
0 komentar