Vertical Slide Menu Push Page Content

Ditulis oleh: Adhy Suryadi
Ditulis pada: 11/03/2014

Vertical Slide Menu Push Page Content - Masih ingat dengan postingan saya sebelumnya tentang vertical slide menu dengan jquery? Di situ kita membuat vertical menu seolah melayang dengan show and hide dengan efek slide dari sisi blog.

Nah kali ini kita akan merubah sedikit cara kerja vertical slide menu ini yang kita buat seolah-olah mendorong halaman blog ketika vertical menu-nya keluar dari sisi blog. Kita hanya menambahkan elemen div selektor untuk menandai page content atau halaman blog untuk digeser bersamaan dengan keluarnya vertical menu dari sisi blog.

Pada jquery kita menambahkan id elemen div untuk menandai halaman blog tersebut agar bisa bergeser ketika vertical menu keluar sehingga seolah-olah didorong oleh vertical menu. Untuk demonya silahkan coba pada link demo di bawah ini. Bisa Anda bandingkan vertical menu slide yang melayang dan vertical menu yang mendorong halaman blog.

DEMO 1

Vertical Slide Menu Dengan Jquery

DEMO 2

Vertical Slide Menu Push Page Content

Dan saya pun menambahkan tombol Donasi via Paypal yang disembunyikan di dalam menu. Cara membuat halaman donasi via Paypal bisa Anda simak DI SINI.

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'>&#8801;</div>

<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'>&#8801;</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>

Kemudian tambahkan kode <div id="page_content"> dan penutupnya </div> untuk menandai halaman blog atau page content, misalnya seperti di bawah ini:


<div class='content-wrapper'>

<div id='page_content'>

<div id='headerpic-wrapper'>

    <header id='header-wrapper'>

............

............

      </header><!-- end header-wrapper -->

  </div>

<div id='outer-wrapper'>

     <div id='main-wrapper'>

............

............

      </div>



<aside id='sidebar-wrapper'>

............

............

</aside>

      <!-- spacer for skins that want sidebar and main to be the same height-->

      <div class='clear'>&#160;</div>

  </div><!-- end outer-wrapper -->



<footer id='footer-wrapper'>

............

............

</footer>

</div>

</div>

Dan jika ditambah dengan kode HTML menu menjadi seperti di bawah ini


<div class='content-wrapper'>



<div class='menu'>&#8801;</div>

<div id='css-menu'>

<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

............

............

</nav>

</div>



<div id='page_content'>

<div id='headerpic-wrapper'>

    <header id='header-wrapper'>

............

............

      </header><!-- end header-wrapper -->

  </div>

<div id='outer-wrapper'>

     <div id='main-wrapper'>

............

............

      </div>



<aside id='sidebar-wrapper'>

............

............

</aside>

      <!-- spacer for skins that want sidebar and main to be the same height-->

      <div class='clear'>&#160;</div>

  </div><!-- end outer-wrapper -->



<footer id='footer-wrapper'>

............

............

</footer>

</div>

</div>

Kode Javascript


<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>

Dan pastikan Anda sudah menyimpan Jquery Library di template blog Anda berapa pun versinya.

Vertical Slide Menu Push Page Content

Ditulis oleh: Adhy Suryadi Ditulis pada: 11/03/2014

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 11/03/2014