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
Leave a comment
To insert a link, use tag
[url=http://your_link]your-link[/url]To insert the code , use the tag
<i rel="code">your-code</i>The long code can use the tag
<i rel="pre">your-long-code</i>To insert an image , use the code
[img]URL Image[/img]To insert a title , use tag
<b rel="h4">Your Title here...</b>To creat Bold text
<strong>Your text here...</strong>To create Italic text used tag
<em>Your text here...</em>