Vertical Slide Sajian Push Page Content

Vertical Slide Menu Push Page Content - Masih ingat dengan postingan aku sebelumnya wacana vertical slide sajian dengan jquery? Di situ kita menciptakan vertical sajian seolah melayang dengan show and hide dengan dampak slide dari sisi blog.

Nah kali ini kita akan merubah sedikit cara kerja vertical slide sajian ini yang kita buat seakan-akan mendorong halaman blog dikala 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 sajian dari sisi blog.

Pada jquery kita menambahkan id elemen div untuk menandai halaman blog tersebut semoga dapat bergeser dikala vertical sajian keluar sehingga seakan-akan didorong oleh vertical menu. Untuk demonya silahkan coba pada link demo di bawah ini. Bisa Anda bandingkan vertical sajian slide yang melayang dan vertical sajian yang mendorong halaman blog.

DEMO 1

Vertical Slide Menu Dengan Jquery

DEMO 2

Vertical Slide Menu Push Page Content

Dan aku pun menambahkan tombol Donasi via Paypal yang disembunyikan di dalam menu. Cara menciptakan halaman bantuan via Paypal dapat 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 aku menciptakan tutorial. Donasi Anda dapat membantu aku 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, contohnya ibarat 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 jikalau ditambah dengan isyarat HTML sajian menjadi ibarat 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.

Sumber https://www.kompiajaib.com/

Vertical Slide Sajian Push Page Content

0 Response to "Vertical Slide Sajian Push Page Content"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel