Border Menu Dengan Animasi dan CSS

By -

Suatu hari saya melihat konsep menu yang sangat bagus di situs UI8. CreativeDash menerapkan konsep cantik itu dan saya langsung memiliki beberapa gagasan untuk lebih banyak efek yang melibatkan transisi perbatasan namun juga dengan pemikiran desktop. Jadi hari ini saya ingin menunjukkan cara membuat sesuatu seperti itu dan memberikan beberapa contoh yang lebih inspiratif.

Dalam tutorial ini kita akan melalui demo 2 dimana ikon menu ada di pojok kiri atas dan border paling tebal di sisi kiri.

Harap perhatikan bahwa kami akan menggunakan transisi dan animasi pada elemen semu yang tidak akan berfungsi di beberapa browser (misalnya Safari dan Safari Seluler).

Jadi, mari kita mulai!

Markup
Struktur HTML untuk menu kita akan terdiri dari elemen nav yang akan berisi trigger anchor dan unordered list dengan item menu yang akan terdiri dari ikon:
<nav id="bt-menu" class="bt-menu">
 <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
 <ul>
  <li><a href="#" class="bt-icon icon-zoom">Zoom</a></li>
  <li><a href="#" class="bt-icon icon-refresh">Refresh</a></li>
  <li><a href="#" class="bt-icon icon-lock">Lock</a></li>
  <li><a href="#" class="bt-icon icon-speaker">Sound</a></li>
  <li><a href="#" class="bt-icon icon-star">Favorite</a></li>
 </ul>
</nav>

CSS
Perhatikan bahwa CSS tidak akan berisi prefiks vendor apapun, namun Anda akan menemukannya di file.
Mari kita gunakan kotak-kotak ukurannya:
*,
*:after,
*::before {
 box-sizing: border-box;
}
Dan mari kita menetapkan beberapa gaya untuk tubuh dan wadah utama:
body  {
 background: #04a466;
}

.container {
 padding: 80px;
}
Padding akan membantu menyediakan beberapa ruang di sekitar konten kami sehingga ketika perbatasan muncul, kami menjamin bahwa ada cukup ruang di sekitar.

Elemen menu utama akan memiliki posisi tetap sehingga, tidak peduli di mana kita berada di halaman, perbatasan selalu berada di sekitar area pandang. Kami menetapkan gaya perbatasan awal yang akan kita transisi ke perbatasan yang lebih besar. Menetapkan tinggi awal menjadi 0 akan memastikan bahwa menu tidak menutupi apapun pada awalnya. Transisi ketinggian "terbelakang" atau penutupan akan mengalami penundaan sebesar 0,3 detik:
.bt-menu {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 0;
 border-width: 0px;
 border-style: solid;
 border-color: #333;
 background-color: rgba(0,0,0,0);
 transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}
Saat kita membuka menu, kita akan mengatur ketinggian sampai 100% (tapi kita tidak akan mentransisikan properti itu) dan perbatasan akan bernyawa hingga 90px di sisi kiri dan 30px di semua sisi lainnya. Warna latar belakang akan semi transparan menggunakan nilai RGBA. Ini akan menjadi server sebagai overlay warna:
.bt-menu.bt-menu-open {
 height: 100%;
 border-width: 30px 30px 30px 90px;
 background-color: rgba(0,0,0,0.3);
 transition: border-width 0.3s, background-color 0.3s;
}
Sekarang kita harus menggunakan sedikit trik. Kami akan menambahkan elemen lain menggunakan JavaScript yang akan server sebagai wadah dummy yang menutupi keseluruhan halaman kecuali border. Ini akan memungkinkan kita membedakan mana yang kita klik untuk menutup semuanya. Kami tidak ingin menu tutup saat mengklik di perbatasan tapi hanya saat mengklik spasi di antaranya:
.bt-overlay {
 position: absolute;
 width: 100%;
}
Saat kita membuka menu, elemen ini akan memiliki tinggi penuh:
.bt-menu-open .bt-overlay {
 height: 100%;
}
Mari kita gaya elemen pemicu yang kecil itu. Kami akan memberikannya posisi tetap dan kami akan menunjukkannya di pojok kiri atas halaman:
.bt-menu-trigger {
 position: fixed;
 top: 15px;
 left: 20px;
 display: block;
 width: 50px;
 height: 50px;
 cursor: pointer;
}
Jangkar pemicu itu sendiri akan berfungsi sebagai wadah dan bentangnya akan menjadi garis tengah ikon menu hamburger kita. Jadi kita posisi itu di tengah dengan menetapkan bagian atas sampai 50% dan memberikan margin atas negatif dari setengah tingginya:
.bt-menu-trigger span {
 position: absolute;
 top: 50%;
 left: 0;
 display: block;
 width: 100%;
 height: 4px;
 margin-top: -2px;
 background-color: #fff;
 font-size: 0px;
 user-select: none;
 transition: background-color 0.3s;
}
Saat membuka menu, kita akan membuat tanda silang dari ikon. Dua baris lainnya akan dibuat oleh elemen semu dan saat menu terbuka, garis tengah akan hilang:
.bt-menu-open .bt-menu-trigger span {
 background-color: transparent;
}
Sekarang, mari kita buat dua baris lainnya. Elemen pseudo akan diposisikan secara mutlak dan tinggi badan mereka akan sama seperti induknya dengan mengaturnya menjadi 100%:
.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
 position: absolute;
 left: 0;
 width: 100%;
 height: 100%;
 background: #fff;
 content: '';
 transition: transform 0.3s;
}
Untuk memposisikan mereka dengan benar, kita akan menggunakan translateY:
.bt-menu-trigger span:before {
 transform: translateY(-250%);
}

.bt-menu-trigger span:after {
 transform: translateY(250%);
}
Salib akan terbentuk saat membuka menu dengan mengatur translateY menjadi 0 dan memutar elemen pseudo sesuai:
.bt-menu-open .bt-menu-trigger span:before {
 transform: translateY(0) rotate(45deg);
}

.bt-menu-open .bt-menu-trigger span:after {
 transform: translateY(0) rotate(-45deg);
}
Daftar unordered dengan ikon kami juga akan memiliki posisi tetap dan kami akan mengaturnya ke sisi kiri jendela:
.bt-menu ul {
 position: fixed;
 top: 75px;
 left: 0;
 margin: 0;
 padding: 0;
 width: 90px;
 list-style: none;
 backface-visibility: hidden;
}
Mari kita atur daftar item dan jangkar yang akan ditampilkan: blok dan beri mereka lebar penuh:
.bt-menu ul li,
.bt-menu ul li a {
 display: block;
 width: 100%;
 text-align: center;
}
Setiap item daftar akan disembunyikan pada awalnya dan opacitynya adalah 0. Transisi "mundur" dari visibilitas akan tertunda sampai semua transisi lain dari transformasi dan keburaman selesai:
.bt-menu ul li {
 padding: 16px 0;
 opacity: 0;
 visibility: hidden;
 transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
}
Sekarang kita akan mengubah masing-masing daftar item secara berbeda sehingga semuanya ditempatkan di tengah dan ke kiri sampai tersembunyi (-100% pada sumbu Y):
.bt-menu ul li:first-child { 
 transform: translate3d(-100%,200%,0);
}

.bt-menu ul li:nth-child(2) { 
 transform: translate3d(-100%,100%,0);
}

.bt-menu ul li:nth-child(3) { 
 transform: translate3d(-100%,0,0);
}

.bt-menu ul li:nth-child(4) { 
 transform: translate3d(-100%,-100%,0);
}

.bt-menu ul li:nth-child(5) { 
 transform: translate3d(-100%,-200%,0);
}
Saat membuka menu, item daftar akan terlihat (seketika, karena kita tidak mengatur transisi untuk itu) dan akan memudar. Mereka juga akan beralih ke posisi semula dengan menetapkan transform3d menjadi 0 untuk semua sumbu:
.bt-menu.bt-menu-open ul li {
 visibility: visible;
 opacity: 1;
 transition: transform 0.3s, opacity 0.3s;
 transform: translate3d(0,0,0);
}
Sekarang, ayo gaya jangkar. Kami akan menggunakan font ikon dan menyertakan referensi font dan kelas ikon di CSS lain yang akan disediakan oleh layanan seperti aplikasi Fontastic atau IcoMoon.

Dengan mengatur ukuran font jangkar menjadi 0 dan membuatnya transparan, kita akan menyembunyikan teksnya:
.bt-menu ul li a {
 display: block;
 outline: none;
 color: transparent;
 text-decoration: none;
 font-size: 0px;
}
Kami akan mengatur ulang ukuran font untuk elemen pseudo yang berisi ikon. Kita harus menggunakan nilai berbasis piksel karena elemen utamanya memiliki ukuran font 0 sehingga ems tidak akan bekerja di sini:
.bt-menu ul li a:before {
 color: #04a466;
 font-size: 48px;
 transition: color 0.2s;
}
Pada hover kita akan membuat mereka putih:
.bt-menu ul li a:hover:before,
.bt-menu ul li a:focus:before  {
 color: #fff;
}
Dan yang terakhir, namun tidak kalah pentingnya, kami ingin ikonnya lebih kecil di layar ponsel:
@media screen and (max-height: 31.125em) {
 .bt-menu ul li a:before {
  font-size: 32px;
 }
}
Dan itu semua gaya. Sekarang, mari beralih ke JavaScript.

JavaScript
Naskah kita cukup mudah; Saat kita klik pada trigger anchor, kita matikan kelas bt-menu-open dan bt-menu-close pada nav element. (Menambahkan kelas penutup hanya diperlukan jika Anda menggunakan animasi untuk efek ikon pemicu, seperti yang kita lakukan di demo 1. Ini akan memungkinkan kita untuk hanya memutar animasi mundur, saat kita menutup menu).

Saat kita klik di overlay, kita akan menutup menu. Kami juga akan menambahkan beberapa dukungan sentuhan:
(function() {

  // http://stackoverflow.com/a/11381730/989439
 function mobilecheck() {
  var check = false;
  (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
 }

 function init() {

  var menu = document.getElementById( 'bt-menu' ),
   trigger = menu.querySelector( 'a.bt-menu-trigger' ),
   // event type (if mobile, use touch events)
   eventtype = mobilecheck() ? 'touchstart' : 'click',
   resetMenu = function() {
    classie.remove( menu, 'bt-menu-open' );
    classie.add( menu, 'bt-menu-close' );
   },
   closeClickFn = function( ev ) {
    resetMenu();
    overlay.removeEventListener( eventtype, closeClickFn );
   };

  var overlay = document.createElement('div');
  overlay.className = 'bt-overlay';
  menu.appendChild( overlay );

  trigger.addEventListener( eventtype, function( ev ) {
   ev.stopPropagation();
   ev.preventDefault();
   
   if( classie.has( menu, 'bt-menu-open' ) ) {
    resetMenu();
   }
   else {
    classie.remove( menu, 'bt-menu-close' );
    classie.add( menu, 'bt-menu-open' );
    overlay.addEventListener( eventtype, closeClickFn );
   }
  });

 }

 init();

})();


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

Dan itu dia! Saya harap Anda menikmati tutorial ini dan merasa berguna!
Pastikan untuk memeriksa demo lainnya. Yang terakhir adalah konsep untuk pemutar video fullscreen.
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