Membuat Slide Vertical Menu Dengan Jquery

Membuat Slide Vertical Menu Dengan Jquery

Bola Hero Gawai

Membuat Slide Vertical Menu Dengan Jquery

Slide Vertical Menu Dengan Jquery
Seiring dengan perkembangan jaman web responsive, kini menu vertical banyak juga digunakan oleh pengembang web atau blog khususnya 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.

Banyak jenis slide vertical menu ini dengan fitur-fitur yang keren buatan para master, namun kali ini saya mencoba memberikan efek slide atau show and hide pada menu 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 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 Anda telah menyimpan jquery library di template blog Anda, selesai... Selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

16 Comments Add Comment

Bagus nih, ternyata ada situsnya juga yah ... hehehe baru tau :)

Balas

hahaha, dapat pertamax,
keren nih, bergeser kebawah ketika mengklik menu yang ada sub nya :)

:-bd

Balas

Iya mas di cssmenumaker ada banyak pilihan menu buat web :)

Balas

silahkan dicoba mas :)
hehehe hanya beda 3 detik ya...

Balas

kayaknya bagus ni kang kalau dipasang di template kompidoang :D ijin coba

Balas

kalo di pasang di template kompi males,gimana mas?
maksudnya kode apa yg harus di rubah

Balas

bentar saya lihat kodenya, oh banyak , nanti aja ya om :D

Balas

Coba hapus aja kode menu yang di bawah header mas, tempatkan kode <div class='menu' title='Menu'><span style='font-size:16px;position:absolute;top:1px;left:-48px'>Menu</span> &#8801;</div> di bagian menu di atas header dan atur posisinya.

Balas

saya bukan master tapi boleh dong ke CssMenuMakerdotcom hehe.., BTW, keren mas menu-nya :-bd

Balas

kalau dipasang di blog saya bagus ngga ya kang, terus kode mana yang harus di hilangkan?.

Balas

Boleh atuh mas heheheehe :)

Balas

Dicoba aja mang, mungkin sama dengan mas Reo di atas.

Balas

Keren om menu vertkalnya...

pake bolehya?

Balas

Om Adhy,

Kalau untuk multi level, apa yang perlu ditambahin om...?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×