Membuat Slide Vertical Sajian Dengan Jquery
Seiring dengan perkembangan jaman web responsive, sekarang sajian vertical banyak juga dipakai oleh pengembang web atau blog khususnya sajian vertical dengan sentuhan slide atau show and hide menu. Dengan show and hide sajian ini, maka tampilan web atau blog dapat semakin minimalis tanpa berjejernya label pada kafe di atas atau di bawah header blog.
Banyak jenis slide vertical sajian ini dengan fitur-fitur yang keren buatan para master, namun kali ini aku mencoba memperlihatkan dampak slide atau show and hide pada sajian vertical dari CssMenuMaker.com
Tertarik untuk mencoba Slide Vertical Menu dengan jquery? Silahkan copy kode-kodenya di bawah ini.
Kode 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;}Kode HTML
Silahkan simpan di bawah aba-aba <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>Kode Javascript
Silahkan simpan di atas aba-aba </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;
}
});
//]]>
</script>
<script type='text/javascript'>
$(function() {
$('.menu').click(function () {
$('#css-menu').css({right:'0'});
});
$('.close-menu').click(function() {
$('#css-menu').css({right:'-340px'});
});
});
</script>Dan pastikan Anda telah menyimpan jquery library di template blog Anda, selesai... Selamat mencoba...
0 Response to "Membuat Slide Vertical Sajian Dengan Jquery"
Posting Komentar