30 September 2014

Membuat Slide Vertical Menu Dengan Jquery

Membuat Slide Vertical Menu Dengan Jquery

Menu vertical dengan sentuhan slide atau show and hide menu. Dengan show and hide menu ini, maka tampilan web atau blog bisa semakin minimalis tanpa berjejernya label pada bar di atas atau di bawah header blog, jadi blog terlihat lebih simple dan rapih.
Banyak jenis slide vertical menu ini dengan fitur-fitur yang keren buatan para master lainnya.

Tertarik untuk mencoba Slide Vertical Menu dengan jquery? Silahkan copy kode-kodenya di bawah ini.


Kode CSS

Silahkan sobat letakan di atas ]]></b:skin> atau </style>

.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 kode <body>


<div class='menu' title='Menu'><span style='font-size:16px;position:absolute;top:1px;left:-48px'>Menu</span> &#8801;</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'>&#8801; <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 kode </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 Sobat telah menyimpan jquery library di template blog Sobat, selesai... Selamat mencoba... Jangan Lupa Share tutorial ini yaa...
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic