Membuat slideout navigation

MurliCyber    5/13/2014    Css3 , Jquery , Tutorial blog    Comment   

Yeay,udah lama nihhh gak post udah berapa hari yahhh? ah lupakan

udah jarang ngurusin blog nih gw bukan karena sibuk atau apa sih cuma lagi malas post aja,padahal gw udha libur panjang nihhh harus nya ngurusin blog donk enak,karena gw ada yang lebih penting dari pada ngurusin blog jadi gw tinggalin aja deh blog ini,kurang bahan buat ngepost juga jadi kalau lagi ngewifi gw cuma pantau blog gw aja sekali kali juga ada blogwalking ke blog blog kalian pastinya

ngurusin pacar juga gak kalah penting dari pada ngurusin blog hahahaha XD

kok udah ngomong masalah pacar ini? lupakan lagi

okay,kali ini gw mau share tutorial slideout navigation,ya!

slideout navigation ini adalah navigasi bertema FLAT kali ye,cocok soal nya buat template FLAT karena menu nya muncul dari samping,buat yang template nya FLAT gw saranin pasang navigasi ini soal nya cocok banget gak percaya? liat demo nya aja

• DEMO

gimana? anda terkejutkan
yuk pasang

1.letakkan kode di bawah ini di atas kode ]]><b:skin atau </style>

.pushmenu { /*this is the nav*/
  background: #3c3933;
  font-family: Arial, Helvetics, sans-serif;
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position:fixed;
}
.pushmenu h3 {
  color: #cbbfad;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  margin: 0;
  background: #282522;  
  height: 16px;
}
.pushmenu a {
  display: block; /* drops the nav vertically*/
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-top: 1px solid #56544e;
  border-bottom: 1px solid #312e2a;
  padding: 14px;
}
.pushmenu a:hover {
  background:#00A287;
}
.pushmenu a:active {
  background: #454f5c;
  color: #fff;
}
.pushmenu-left {
  left: -240px;
}
.pushmenu-left.pushmenu-open {
  left: 0;
}
.pushmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}
.pushmenu-push-toright {
  left: 240px;
}
/*Transition*/
.pushmenu, .pushmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#nav_list {
  background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
  cursor: pointer;
  height: 27px;
  width: 33px;
  text-indent: -99999em;
}
nav-list.active {
  background-position: -33px top;
}
 .buttonset {
      background: #00A287;
      height: 16px;
      padding: 10px 20px 20px;
 }

3.lanjut,letakkan kode HTML di bawah ini di atas kode outer-wrapper (setiap template kode nya berbeda beda)

<nav class="pushmenu pushmenu-left">
    <h3>Menu</h3>
    <a href="#">Home</a>
    <a href="#">Nav2</a>
    <a href="#">Nav3</a>
    <a href="#">Nav4</a>
    <a href="#">Nav5</a>
    <a href="#">Nav6</a>
    <a href="#">Nav7</a>
  </nav>

4.kode JS nya jangan lupa

$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});

gampangkan?
selebih nya bisa di edit sendiri

see you

source