Cara Membuat Slide Menu Mirip Kompi Ajaib
Monday, November 3, 2014
Bagi sobat yang ingin membuat Slide Menu seperti Blog Kompi Ajaib, berikut kode - kodenya:
Kode CSS
.menu{position:absolute;top:23px;right:135px;text-align:center;padding:0;color:#000;font-size:44px;font-weight:400;line-height:25px;cursor:pointer;transition:all .4s ease-in-out}
#css-menu{position:fixed;top:0;right:-240px;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.expand{height:200px;overflow:auto}
#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}
#cssmenu ul ul li.odd .tombolpaypal a{background:none}
#cssmenu ul ul li.odd:last-child{border:0;text-align:center;padding:10px 5px 0}
.tombolpaypal{text-align:center;text-decoration:none;padding:0;background:0}
.paypal{background:#555;border:0;margin:0 auto;padding:5px 18px;font-size:18px;font-weight:700;color:#fff;text-align:center;display:inline-block;border-radius:3px}
.paypal:hover{background:#333}
.tombolpaypal a{text-decoration:none}
.tombolpaypal span.infopaypal{color:#333;font-size:14px;margin:0;padding:0;line-height:1.4em}
Kode HTML
<div class='menu'>≡</div>Kode Javascript
<div id='css-menu'>
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='home'><span class='close-menu' style='font-size:26px;font-weight:400;position:relative' title='Close'>≡</span></li>
<li><a href='http://www.kompiajaib.com/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url' title='Daftar Isi'><span itemprop='name'>Daftar Isi</span></a></li>
<li class='has-sub'><a href='#' title='About This Blog'><span>About This Blog</span></a>
<ul>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li class='last'><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url' title='Forum'><span itemprop='name'>Forum</span></a></li>
<li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Pasang Iklan</span></a></li>
<li class='has-sub'><a href='#' title='More'><span>Web Tools</span></a>
<ul class='expand'>
<li><a href='#' itemprop='url' title='Blogger Button Generator'><span itemprop='name'>Blogger Button Generator</span></a></li>
<li><a href='#' itemprop='url' title='Speed Test'><span itemprop='name'>Speed Test</span></a></li>
<li><a href='#' itemprop='url' title='Speed Test 2'><span itemprop='name'>Speed Test 2</span></a></li>
<li><a href='#' itemprop='url' title='Color Code'><span itemprop='name'>Color Code</span></a></li>
<li><a href='#' itemprop='url' title='Parse HTML'><span itemprop='name'>Parse HTML</span></a></li>
<li><a href='#' itemprop='url' title='Pagerank Checker'><span itemprop='name'>Pagerank Checker</span></a></li>
<li><a href='#' itemprop='url' title='Al-Quran Flash'><span itemprop='name'>Al-Quran Flash</span></a></li>
<li><a href='#' itemprop='url' title='Photoshop Online'><span itemprop='name'>Photoshop Online</span></a></li>
<li><a href='#' itemprop='url' title='Online TV'><span itemprop='name'>Online TV</span></a></li>
<li class='last'><a href='#' rel='nofollow' target='_blank' title='Online TV'><span>Character Count Tool</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#' title='Donasi Untuk Blog Ini'><span>Donasi Untuk Blog Ini</span></a>
<ul>
<li>
<span class='tombolpaypal'>
<span class='infopaypal'>Secangkir kopi selalu menemani saya membuat tutorial. Donasi Anda bisa membantu saya menyediakannya.<br/>
Terima kasih.</span>
<a href='URL HALAMAN DONASI PAYPAL DI SINI' target='_blank' title='Donasi via Paypal'>
<span class='paypal'>Donasi via Paypal</span></a>
</span>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".menu").click(function(){$("#css-menu").css({right:"0"});$("#page_content").css({margin:"0 240px 0 -240px"})});$(".close-menu").click(function(){$("#css-menu").css({right:"-240px"});$("#page_content").css({margin:"0"})})});
$("#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 e=$(this).next();if(e.is("ul")&&e.is(":visible")){$(this).closest("li").removeClass("active");e.slideUp("normal")}if(e.is("ul")&&!e.is(":visible")){$("#cssmenu ul ul:visible").slideUp("normal");e.slideDown("normal")}if($(this).closest("li").find("ul").children().length==0){return true}else{return false}});
//]]>
</script>
Sumber: Kompiajaib.com