Menu Vertikal By xkomo

Ini coding di buat oleh mas diksain dan di publish oleh blog x komo :)

by Febri Tri Harmoko

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <div id="menu-wrap">
      <ul id="menu">
        <li><a href="#">Menu I</a></li>
        <li><a class="tutup" href="#">Menu II</a>
          <ul class="sub">
          <li><a href="#">Sub Menu I</a></li>
          <li><a href="#">Sub Menu II</a></li>
          </ul>
        </li>
        <li><a href="#">Menu III</a></li>
        <li><a class="tutup" href="#">Menu IV</a>
          <ul class="sub">
          <li><a href="#">Sub Menu I</a></li>
          <li><a href="#">Sub Menu II</a></li>
          </ul>
        </li>
      </ul>
    </div>

CSS

ul,
ul li,
ul li ul {
    list-style: none outside none;
    padding:0;
    margin:0;
}
#menu-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -140px;
    margin-left: -140px;
    width: 280px;
}
#menu {
    padding: 18px 0;
}
#menu > li > a {
    display: block;
    margin: 0 auto;
    width: 90%;
    text-indent: 18px;
    line-height: 39px;
}
#menu > li > a.tutup::after {
    position: absolute;
    right: 30px;
    margin-top: 2px;
    font-family: "FontAwesome";
    content: "\f054";
}
#menu > li > a.tutup:hover, 
#menu > li > a.tutup.buka {
    color: #333;
}
#menu > li > a.tutup.buka::after {
    content: "\f078";
}
.sub {
    display: none;
}
.sub a {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 212px;
    text-indent: 0px;
    line-height: 39px;
}

JavaScript

$("#menu > li > a").click(function(e){
	e.preventDefault();
	if($(this).hasClass("buka"))
	{
	$(this).removeClass("buka");
	$(this).parent().children("ul").stop(true,true).slideUp("normal");
	} else {
	$("#menu a.tutup.buka").removeClass("buka");
	$(this).addClass("buka");
	$(".sub").filter(":visible").slideUp("normal");
	$(this).parent().children("ul").stop(true,true).slideDown("normal");
	}
});