Membuat Menu Off-Canvas

By -

Satu set menu tetap yang akan meluncur keluar dari salah satu tepi halaman. Dua menu yang meluncur keluar dari sisi kiri dan kanan juga bisa digunakan dalam kombinasi dengan bodi yang bergerak ke sisi kiri atau kanan, masing-masing, karenanya "didorong".
Ada contoh bagaimana memicu pembukaan dan penutupan menu dan beberapa contoh kueri media.

HTML
<!-- body has the class "cbp-spmenu-push" -->
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
 <h3>Menu</h3>
 <a href="#">Celery seakale</a>
 <a href="#">Dulse daikon</a>
 <a href="#">Zucchini garlic</a>
 <a href="#">Catsear azuki bean</a>
 <a href="#">Dandelion bunya</a>
 <a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
 <h3>Menu</h3>
 <a href="#">Celery seakale</a>
 <a href="#">Dulse daikon</a>
 <a href="#">Zucchini garlic</a>
 <a href="#">Catsear azuki bean</a>
 <a href="#">Dandelion bunya</a>
 <a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
 <h3>Menu</h3>
 <a href="#">Celery seakale</a>
 <a href="#">Dulse daikon</a>
 <a href="#">Zucchini garlic</a>
 <a href="#">Catsear azuki bean</a>
 <a href="#">Dandelion bunya</a>
 <a href="#">Rutabaga</a>
 <a href="#">Celery seakale</a>
 <a href="#">Dulse daikon</a>
 <a href="#">Zucchini garlic</a>
 <a href="#">Catsear azuki bean</a>
 <a href="#">Dandelion bunya</a>
 <a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
 <h3>Menu</h3>
 <a href="#">Celery seakale</a>
 <a href="#">Dulse daikon</a>
 <a href="#">Zucchini garlic</a>
 <a href="#">Catsear azuki bean</a>
 <a href="#">Dandelion bunya</a>
 <a href="#">Rutabaga</a>
 <a href="#">Celery seakale</a>
 <a href="#">Dulse daikon</a>
 <a href="#">Zucchini garlic</a>
 <a href="#">Catsear azuki bean</a>
 <a href="#">Dandelion bunya</a>
 <a href="#">Rutabaga</a>
</nav>
<div class="container">
 <div class="main">
  <section>
   <h2>Slide Menus</h2>
   <!-- Class "cbp-spmenu-open" gets applied to menu -->
   <button id="showLeft">Show/Hide Left Slide Menu</button>
   <button id="showRight">Show/Hide Right Slide Menu</button>
   <button id="showTop">Show/Hide Top Slide Menu</button>
   <button id="showBottom">Show/Hide Bottom Slide Menu</button>
  </section>
  <section class="buttonset">
   <h2>Push Menus</h2>
   <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
   <button id="showLeftPush">Show/Hide Left Push Menu</button>
   <button id="showRightPush">Show/Hide Right Push Menu</button>
  </section>
 </div>
</div>
CSS
/* General styles for all menus */

.cbp-spmenu {
 background: #47a3da;
 position: fixed;
}

.cbp-spmenu h3 {
 color: #afdefa;
 font-size: 1.9em;
 padding: 20px;
 margin: 0;
 font-weight: 300;
 background: #0d77b6;
}

.cbp-spmenu a {
 display: block;
 color: #fff;
 font-size: 1.1em;
 font-weight: 300;
}

.cbp-spmenu a:hover {
 background: #258ecd;
}

.cbp-spmenu a:active {
 background: #afdefa;
 color: #47a3da;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
 width: 240px;
 height: 100%;
 top: 0;
 z-index: 1000;
}

.cbp-spmenu-vertical a {
 border-bottom: 1px solid #258ecd;
 padding: 1em;
}

.cbp-spmenu-horizontal {
 width: 100%;
 height: 150px;
 left: 0;
 z-index: 1000;
 overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
 height: 100%;
 width: 20%;
 float: left;
}

.cbp-spmenu-horizontal a {
 float: left;
 width: 20%;
 padding: 0.8em;
 border-left: 1px solid #258ecd;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
 left: -240px;
}

.cbp-spmenu-right {
 right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
 left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
 right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
 top: -150px;
}

.cbp-spmenu-bottom {
 bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
 top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
 bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
 overflow-x: hidden;
 position: relative;
 left: 0;
}

.cbp-spmenu-push-toright {
 left: 240px;
}

.cbp-spmenu-push-toleft {
 left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

 .cbp-spmenu-horizontal {
  font-size: 75%;
  height: 110px;
 }

 .cbp-spmenu-top {
  top: -110px;
 }

 .cbp-spmenu-bottom {
  bottom: -110px;
 }

}

@media screen and (max-height: 26.375em){

 .cbp-spmenu-vertical {
  font-size: 90%;
  width: 190px;
 }

 .cbp-spmenu-left,
 .cbp-spmenu-push-toleft {
  left: -190px;
 }

 .cbp-spmenu-right {
  right: -190px;
 }

 .cbp-spmenu-push-toright {
  left: 190px;
 }
}
JavaScript
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
  menuRight = document.getElementById( 'cbp-spmenu-s2' ),
  menuTop = document.getElementById( 'cbp-spmenu-s3' ),
  menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
  showLeft = document.getElementById( 'showLeft' ),
  showRight = document.getElementById( 'showRight' ),
  showTop = document.getElementById( 'showTop' ),
  showBottom = document.getElementById( 'showBottom' ),
  showLeftPush = document.getElementById( 'showLeftPush' ),
  showRightPush = document.getElementById( 'showRightPush' ),
  body = document.body;

showLeft.onclick = function() {
 classie.toggle( this, 'active' );
 classie.toggle( menuLeft, 'cbp-spmenu-open' );
 disableOther( 'showLeft' );
};
showRight.onclick = function() {
 classie.toggle( this, 'active' );
 classie.toggle( menuRight, 'cbp-spmenu-open' );
 disableOther( 'showRight' );
};
showTop.onclick = function() {
 classie.toggle( this, 'active' );
 classie.toggle( menuTop, 'cbp-spmenu-open' );
 disableOther( 'showTop' );
};
showBottom.onclick = function() {
 classie.toggle( this, 'active' );
 classie.toggle( menuBottom, 'cbp-spmenu-open' );
 disableOther( 'showBottom' );
};
showLeftPush.onclick = function() {
 classie.toggle( this, 'active' );
 classie.toggle( body, 'cbp-spmenu-push-toright' );
 classie.toggle( menuLeft, 'cbp-spmenu-open' );
 disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
 classie.toggle( this, 'active' );
 classie.toggle( body, 'cbp-spmenu-push-toleft' );
 classie.toggle( menuRight, 'cbp-spmenu-open' );
 disableOther( 'showRightPush' );
};

function disableOther( button ) {
 if( button !== 'showLeft' ) {
  classie.toggle( showLeft, 'disabled' );
 }
 if( button !== 'showRight' ) {
  classie.toggle( showRight, 'disabled' );
 }
 if( button !== 'showTop' ) {
  classie.toggle( showTop, 'disabled' );
 }
 if( button !== 'showBottom' ) {
  classie.toggle( showBottom, 'disabled' );
 }
 if( button !== 'showLeftPush' ) {
  classie.toggle( showLeftPush, 'disabled' );
 }
 if( button !== 'showRightPush' ) {
  classie.toggle( showRightPush, 'disabled' );
 }
}


Password: www.duniadesain.net
Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)
Source: Tympanus

Comments

Post a Comment

Popular posts from this blog

Navigasi Button Untuk SlideShow

By -
Image
Hari ini kami ingin berbagi beberapa inspirasi untuk navigasi navigasi dengan Anda. Ada begitu banyak cara kreatif untuk menunjukkan elemen kecil yang merupakan bagian penting dari banyak situs web saat ini. Anda dapat menemukannya di tayangan slide konten, sebagai bagian dari navigasi halaman, galeri foto dan banyak lagi. Indikator ini sebagian besar digambarkan sebagai panah yang menunjuk ke kiri dan kanan. Tentu saja ada panah yang mengarah ke atas dan ke bawah juga. Tapi hari ini kita ingin fokus pada yang lateral dan menciptakan beberapa efek hover yang menarik yang dalam beberapa kasus meningkatkan elemen, atau menunjukkan preview konten yang akan datang. Efek ini untuk inspirasi Anda. Harap dicatat bahwa mereka hanya akan bekerja di browser modern. Perhatikan juga bahwa kita menggunakan status elemen hover untuk menunjukkan efek yang bukan merupakan solusi untuk perangkat sentuh. Gambar yang digunakan dalam demo tersebut adalah oleh Joanna Kustra, Idleformat dan Andrey Yako...
Read more

Cara Custom Gaya Form File Upload

By -
Image
Ada beberapa teknik untuk "menyesuaikan" elemen <input type = "file" />. Aku mencoba sebagian besar dari mereka, tapi tidak ada yang cukup baik untuk memiliki di Readerrr (untuk mengimpor feed dengan mengunggah file). Mungkin teknik yang paling buruk adalah di mana elemen input dimasukkan ke dalam wadah (yang meniru tombol), dan masukan mengikuti kursor sehingga saat Anda mengklik di mana saja pada wadah, Anda benar-benar mengeklik masukan. Kedengarannya menarik dan aneh pada saat bersamaan, bukan? Bagaimanapun, itu memiliki beberapa kekurangan yang tidak dapat diterima (kegunaan, sentuhan). Sebagai hasilnya, saya mencoba googling untuk mendapatkan solusi yang tak terlihat. Setelah itu sepertinya tidak ada yang baru, mata saya tertangkap oleh sebuah komentar di StackOverflow. Itu hanya beberapa suara dan hilang di suatu tempat di tengah halaman, tapi yang terpenting berisi kata ajaib - <label>! Seperti yang mungkin Anda ketahui, menekan label pada...
Read more

Transisi untuk Menu Off-Canvas

By -
Image
Hari ini kami ingin berbagi beberapa gaya dan efek untuk menu di luar kanvas. Sidebar off-kanvas banyak digunakan dan kami telah menciptakan beberapa efek inspirasi sebelumnya. Seperti dengan segalanya, gaya berkembang dan hari ini kita ingin menunjukkan seperangkat efek modern baru untuk inspirasi Anda. Tata letak yang berbeda dan transisi menu yang disinkronkan dan halamannya bisa membuat semuanya terlihat lebih menarik dan kami dapat memanfaatkan ruang yang tersedia untuk menu samping dan kontrol. SVG memungkinkan kita bermain dengan bentuk organik dan menambahkan beberapa gerakan tak terduga dan bergaya ke desain. Kami menggunakan transisi CSS, animasi CSS yang dibuat dengan bounce.js dan SVG animasi dengan bantuan Snap.svg. Kami juga menggunakan Font Awesome dan gambar profilnya berasal dari Random User Generator. Perlu diketahui bahwa efeknya berfungsi sebagai inspirasi dan akan bekerja (terbaik) di browser modern. Mari kita lihat beberapa gaya: 1. Demo pertama ini ter...
Read more