Menu Vertikal ini dapat berfungsi sebagai sitemap atau daftar isi yang merupakan salah satu alternatif untuk mengurangi beban blog dan banyaknya javascript di sidebar. Menu ini juga bisa slideshow/buka tutup ketika di klik icon menu utama sehingga terlihat blog anda lebih keren. Jadi Menu Vertikal ini bisa menjadi pilihan untuk diterapkan di blog sobat. Untuk Jelasnya klik demo di bawah gambar berikut ini
#accordian {
width:250px;
margin:auto;
border:1px solid #6E6E6E;
color: #00FF00;
}
#accordian h3 {
padding:10px 10px;
background-color:#6E6E6E;
background-repeat: no-repeat;
font-size: 12px;
line-height: 28px;
padding: 0 10px;
cursor: pointer;
}
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian h3 span {
font-size: 16px;
margin-right: 10px;
}
#accordian li {
list-style-type: none;
}
#accordian ul ul li a {
text-decoration: none;
font-size: 11px;
line-height: 20px;
display: block;
padding: 0 10px;
transition: all 0.15s;
}
#accordian ul ul li a:
hover {text-decoration:none;color:#000;
}
#accordian ul ul {
display: none;
}
#accordian li.active ul {
background-color:#000000;
background-repeat: no-repeat;
}
width:250px;
margin:auto;
border:1px solid #6E6E6E;
color: #00FF00;
}
#accordian h3 {
padding:10px 10px;
background-color:#6E6E6E;
background-repeat: no-repeat;
font-size: 12px;
line-height: 28px;
padding: 0 10px;
cursor: pointer;
}
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian h3 span {
font-size: 16px;
margin-right: 10px;
}
#accordian li {
list-style-type: none;
}
#accordian ul ul li a {
text-decoration: none;
font-size: 11px;
line-height: 20px;
display: block;
padding: 0 10px;
transition: all 0.15s;
}
#accordian ul ul li a:
hover {text-decoration:none;color:#000;
}
#accordian ul ul {
display: none;
}
#accordian li.active ul {
background-color:#000000;
background-repeat: no-repeat;
}
HTML
<div id="accordian">
<ul>
<li>
<h3><span class="fa
fa-tachometer"></span>Dashboard</h3>
<ul>
<li><a href="#">Reports</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Graphs</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<!-- we will keep this LI open by default -->
<li class="active">
<h3><span class="fa fa-tasks"></span>Tasks</h3>
<ul>
<li><a href="#">Today's tasks</a></li>
<li><a href="#">Urgent</a></li>
<li><a href="#">Overdues</a></li>
<li><a href="#">Recurring</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li>
<h3><span class="fa
fa-calendar"></span>Calendar</h3>
<ul>
<li><a href="#">Current Month</a></li>
<li><a href="#">Current Week</a></li>
<li><a href="#">Previous
Month</a></li>
<li><a href="#">Previous Week</a></li>
<li><a href="#">Next Month</a></li>
<li><a href="#">Next Week</a></li>
<li><a href="#">Team Calendar</a></li>
<li><a href="#">Private
Calendar</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li>
<h3><span class="fa
fa-heart"></span>Favourites</h3>
<ul>
<li><a href="#">Global favs</a></li>
<li><a href="#">My favs</a></li>
<li><a href="#">Team favs</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
jQuery
<script
type="text/javascript">
//<
No comments :
Post a Comment