Creating a Vertical Slide Menu With Jquery
Updated on March 20, 2016
Along with the development of web-responsive, vertical menu now also used by many web developers or blog especially vertical menu with a touch or slide show and hide the menu. With the show and hide this menu, the display web or blog can be more minimalistic without berjejernya label on the bar above or below the header blog.
Add CSS
.menu{position:absolute;top:23px;right:135px;text-align:center;padding:0;color:#333;font-size:46px;font-weight:700;line-height:25px;cursor:pointer}
#css-menu{position:fixed;top:0;right:-340px;z-index:9999;background:#2C2C2D;height:100%;transition:all .4s ease-in-out;}
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1; font-family: "Open Sans", sans-serif;font-size: 14px;position: relative;}
#cssmenu a {line-height: 1.3;padding: 12px 15px;}
#cssmenu {width: 240px;}
#cssmenu > ul > li {cursor: pointer;background: #efefef;border-top:1px solid #3d3d3d;border-bottom: 1px solid #161616;}
#cssmenu > ul > li:first-child {border-top:none;}
#cssmenu > ul > li:last-child {border-bottom:1px solid #3d3d3d;}
#cssmenu > ul > li:last-child > a {border-bottom: 1px solid #161616;}
#cssmenu > ul > li > a {font-size: 14px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #2C2C2D;padding: 12px 15px;}
#cssmenu > ul > li > a:hover {text-decoration: none;background:#3d3d3d}
#cssmenu > ul > li.active {font-weight:700;}
#cssmenu > ul > li.home .close-menu{background: #2C2C2D;color: #fff;font-size:18px;font-weight:700;padding: 12px 15px;display:block}
#cssmenu > ul > li.has-sub > a:after {content: '';position: absolute;top: 15px;right: 10px;border: 5px solid transparent;border-left: 5px solid #ffffff;}
#cssmenu > ul > li.has-sub.active > a:after {right: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #ffffff;}
#cssmenu ul ul {padding: 0;display: none;}
#cssmenu ul ul a {background: #efefef;display: block;color: #797979;font-size: 13px;}
#cssmenu ul ul a:hover {color: #000;}
#cssmenu ul ul li {border-bottom: 1px solid #c9c9c9;}
#cssmenu ul ul li.odd a {background: #e5e5e5;}
#cssmenu ul ul li:last-child {border: none;}
HTML Code
Please save below code <body>
<div class='menu' title='Menu'><span style='font-size:16px;position:absolute;top:1px;left:-48px'>Menu</span> ≡</div><div id='css-menu'><div id='cssmenu'><ul><li class='home'><span class='close-menu' style='font-size:26px;font-weight:400;position:relative' title='Close'>≡ <span style='font-size:18px;font-weight:700;position:absolute;top:17px;left:33px'>Menu</span></span></li><li><a href='/' title='Home'><span>Home</span></a></li><li><a href='#' title='Daftar Isi'><span>Sitemaps</span></a></li><li class='has-sub'><a href='#' title='About This Blog'><span>About This Blog</span></a><ul><li><a href='#' title='About'><span>About</span></a></li><li><a href='#' title='Contact'><span>Contact</span></a></li><li class='last'><a href='#' title='Privacy'><span>Privacy</span></a></li></ul></li><li><a href='#' title='Pasang Iklan'><span>Advertiser</span></a></li><li class='has-sub'><a href='#' title='More'><span>More Menus</span></a><ul><li><a href='#' title='More Menu 1'><span>More Menu 1</span></a></li><li><a href='#' title='More Menu 2'><span>More Menu 2</span></a></li><li><a href='#' title='More Menu 3'><span>More Menu 3</span></a></li><li><a href='#' title='More Menu 4'><span>More Menu 4</span></a></li><li><a href='3' title='More Menu 5'><span>More Menu 5</span></a></li><li class='last'><a href='#' rel='nofollow' target='_blank' title='More Menu 6'><span>More Menu 6</span></a></li></ul></li></ul></div></div>
Javascript Code
Please save the above code </body>
<script type='text/javascript'>
//<![CDATA[
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active'); var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false; } });
$(function() {
$('.menu').click(function () {
$('#css-menu').css({right:'0'});
});
$('.close-menu').click(function() {
$('#css-menu').css({right:'-340px'});
});
});
</script>
And make sure you have saved jquery library in your blog template, complete ... Good luck
http://www.kompiajaib.com/2014/08/membuat-slide-vertical-menu-dengan.html
0 comments for Creating a Vertical Slide Menu With Jquery