Membuat menu pop-up untuk web. Menu samping tarik keluar. Menu vertikal dengan ikon
Bagaimana menu navigasi menurut situs, menu profil pengguna dll. Anda dapat menyembunyikan dan mereka akan muncul saat Anda mengklik dan mengarahkan kursor. Beberapa orang mungkin mengatakan bahwa kegunaan halaman menderita karenanya. Saya kira tidak, karena halaman menjadi lebih bersih, yang berarti lebih mudah dinavigasi. Seseorang tidak bingung di gunung tautan.
Hari ini saya membuat koleksi panel geser, yang tersembunyi di halaman secara default. Memanggil menu, Anda perlu mengeklik atau mengarahkan kursor ke ikon yang sesuai. Teknik ini datang ke desain web dari aplikasi seluler, di mana Anda tidak dapat menandai banyak elemen di satu layar. Seiring waktu, panel semacam itu bermigrasi ke situs web. Koleksi ini akan berguna, pertama-tama, untuk pengembang seluler, . Dengan resolusi layar kecil, ini akan muncul navigasi keluar, dan pada monitor normal yang besar, Anda dapat membuat menu biasa yang biasa digunakan semua orang. Dengan demikian, seseorang dengan perangkat seluler tidak akan bingung di situs Anda, seperti yang biasa dia gunakan untuk waktu yang lama panel geser, karena semua aplikasi di smartphone-nya bekerja dengan prinsip yang sama.
Saya ingin mencatat bahwa koleksi ini termasuk plugin, yang diasah hanya di bawah situs seluler dan pada monitor lebar penggunaannya tidak sesuai. Meskipun ada panel universal yang cocok untuk situs web apa pun. Lihat demo dan pilih yang sesuai dengan kebutuhan Anda.
Panel dropdown bekerja pada . Menerapkan menu seperti itu ke situs web Anda tidak akan sulit, dan situs web pengembang berisi instruksi terperinci tentang cara menggunakan produk mereka.
Segera kami berencana untuk mendesain ulang situs web Postovoy dan akan menggunakan salah satunya plugin jquery yang disajikan di bawah ini.
Jadi. Berikut adalah kumpulan dari 20 plugin dropdown slidebar jquery untuk situs Anda. Jangan lupa untuk meninggalkan komentar.
Menu Samping yang Dapat Digeser
Menu navigasi slide-out yang bagus di jquery. Ideal untuk situs seluler dan reguler.
Transisi untuk Navigasi di Luar Kanvas
Plugin yang sangat kuat yang memungkinkan Anda mengatur panel slide yang akan ditampilkan dengan berbagai efek animasi, termasuk 3D. Plugin ini mencakup 14 efek animasi.
jPanelMenu
Bilah navigasi dibuat dengan gaya aplikasi iOS. Menu ringan dan cepat yang akan memudahkan pengembangan situs seluler.
Buat ulang Menu Google Nexus
Panel geser dibuat dengan analogi dengan menu Google Nexus.
bigSlide - Bilah navigasi slide Jquery
Panel slide cocok untuk situs seluler dan situs biasa. Untuk memanggilnya, Anda perlu mengklik ikon yang menggambarkan tiga garis.
Menu Dorong Multi Level
Plugin Jqutry bekerja mirip dengan bigSlide. Panel dipanggil saat Anda mengklik ikon. Keuntungan dari menu ini adalah mendukung struktur multi level.
Menu Tutup Kotak
Bilah navigasi slide yang sangat indah dengan efek 3D.
Menu Perbatasan Animasi
Dengan mengklik tanda plus di pojok layar, sidebar kecil dengan ikon akan muncul. Untuk menyembunyikannya, Anda perlu mengklik ikon dengan simbol "-".
Snap.js
Panel slide dirancang untuk perangkat seluler. Menu dipanggil dengan menyeret layar dengan kursor mouse atau, jika menggunakan perangkat seluler, dengan jari Anda.
Menu Geser dan Tekan
|
Meny
Plugin Jquery memungkinkan Anda menerapkan bilah navigasi slide keren dengan efek 3D di situs Anda.
mb.jquery
Tidak seperti panel lainnya, panel ini muncul di atas layar alih-alih memindahkannya. Di blok, Anda dapat meletakkan html, teks, dan secara umum apa pun yang Anda inginkan.
Dermaga Android
Panel dipertajam untuk situs seluler dan terletak di bagian bawah layar. Saat ditekan, ikon muncul di mana Anda dapat menempatkan tautan apa pun.
Bilah slide konten
Panel slide keren dibuat dalam bentuk dua tingkat. Yang pertama adalah menunya. Yang kedua adalah konten. Sekarang efek ini sangat populer di kalangan desainer dan pengembang web. Anda dapat menemukan banyak aplikasi. Mailer Microsoft bekerja dengan prinsip yang sama.Dalam tutorial ini, kami akan menunjukkan cara membuat menu tarik-turun samping untuk navigasi situs yang lebih mudah. Menu ini adalah tren populer dalam desain web modern. Banyak situs menggunakan menu jenis ini. Dengannya, Anda dapat menghilangkan kekacauan di halaman proyek, membuatnya lebih mudah dibaca, memusatkan perhatian pengguna pada konten utama.
Ini adalah cara yang bagus untuk mencapai minimalisme tanpa gangguan. Hari ini kita akan membuat menu seperti itu sendiri.
Untuk membuat menu navigasi, mari kita lihat pengaturannya terlebih dahulu:
Pertama Anda perlu memuat Normalize.css dan menyesuaikan gaya browser default, pastikan menu terlihat sama di semua browser. Kami akan menggunakan FontAwesome untuk menampilkan panah di depan item menu dengan subitem. Untuk beralih kelas di menu, kami memuat jQuery dan memindahkan semua kode jQuery khusus ke script.js. Tautan terakhir adalah tabel utama untuk proyek web.
ikon Hamburger
Ikon hamburger adalah atribut navigasi situs yang umum. Ini sering dibuat dengan ikon font seperti FontAwesome, namun dalam tutorial ini kita akan menambahkan beberapa animasi, jadi kita akan membangunnya dari awal. Ikon hamburger kami adalah tag rentang yang berisi tiga kelas div, yang ditampilkan sebagai bilah horizontal.
Gaya terlihat seperti ini:
Toggle-button ( position: fixed; width: 44px; height: 40px; padding: 4px; transition: .25s; z-index: 15; ) .toggle-button:hover ( kursor: pointer; ) .toggle-button .menu -bar ( position: absolute; border-radius: 2px; width: 80%; transition: .5s; ) .toggle-button .menu-bar-top ( border: 4px solid #555; border-bottom: none; top: 0; ) .toggle-button .menu-bar-middle (tinggi: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; atas: 4px; ) .toggle-button .menu-bar -bottom ( border: 4px solid #555; border-top: none; top: 22px; ) .button-open .menu-bar-top ( transform: rotate(45deg) translate(8px, 8px); transition: .5s; ) .button-open .menu-bar-middle ( transform: translate(230px); transition: .1s ease-in; opacity: 0; ) .button-open .menu-bar-bottom ( transform: rotate(-45deg) terjemahkan(8px, -7px); transisi: .5s; )
Ikon memiliki posisi tetap dan tidak berubah saat halaman digulir. Ini juga memiliki indeks-z 15, yang berarti akan selalu berada di atas elemen lainnya. Terdiri dari tiga bar, yang masing-masing memiliki gaya yang berbeda. Oleh karena itu, kami akan memindahkan setiap bilah ke kelas .menu-bar. Gaya yang tersisa dipindahkan ke kelas terpisah. Keajaiban terjadi saat kita menambahkan kelas lain ke tag span yang bersifat publik. Kami menambahkannya dengan jQuery seperti ini:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("klik", function() ( $(ini).toggleClass("tombol-buka" ); ) ); ) );
Bagi mereka yang tidak terbiasa dengan jQuery, kami menginisialisasi variabel dengan $toggleButton yang berisi ikon kami. Kami menyimpannya dalam variabel tanpa perlu JavaScript. Kami kemudian membuat pendengar acara yang mendengarkan klik ikon. Setiap kali pengguna mengklik ikon hamburger, event listener mengaktifkan fungsi toggleClass(), yang mengaktifkan kelas .button-open.
Setelah class .button-open ditambahkan, kita dapat menggunakannya untuk mengubah cara elemen ditampilkan. Kami menggunakan fungsi CSS3 translate() dan rotate() untuk membuat bilah atas dan bawah berputar 45 derajat dan bilah tengah bergeser ke kanan dan menghilang. Berikut adalah animasi yang dapat Anda sesuaikan:
Menu navigasi tarik-turun
Sekarang setelah Anda memiliki ikon hamburger, mari kita buat itu berguna dan buat menu tarik-turun saat Anda mengekliknya. Berikut adalah tampilan markup menu:
Kami tidak akan merinci setiap gaya untuk menu ini sekarang, melainkan fokus pada beberapa poin penting. Pertama-tama, ini adalah kelas div dan .menu-wrap. Lihat gayanya:
Menu-bungkus ( background-color: #6968AB; posisi: tetap; atas: 0; tinggi: 100%; lebar: 280px; margin-kiri: -280px; ukuran font: 1em; berat font: 700; luapan: otomatis ; transisi: .25s; indeks-z: 10; )
Posisinya tetap, sehingga menu selalu berada di posisi yang sama saat menggulir halaman. Ketinggian 100% memungkinkan menu mengambil semua ruang vertikal pada halaman. Perhatikan bahwa bidang margin-left diatur ke angka negatif yang sama dengan lebar menu. Artinya menu akan hilang dari viewport. Untuk membuatnya terlihat lagi, kami membuat kelas toggler lain dengan jQuery. File JavaScript kita akan terlihat seperti ini:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() ( $(ini).toggleClass("tombol-buka"); $menuWrap.toggleClass("menu-tampilkan"); ) ); ) );
Tambahkan variabel $menuWrap lain yang berisi pembungkus menu. Gunakan event handler yang sama dengan yang kita buat sebelumnya. Hanya saja kali ini kami mengganti dua kelas: satu untuk tombol dan satu lagi untuk pembungkus menu. Nilai margin kiri kelas .menu-show adalah 0, ini akan menambah efek bayangan.
Menu-tampilkan ( margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; )
Submenu dan tautan
Anda mungkin memperhatikan bahwa salah satu item daftar memiliki kelas .menu-item-has-children yang berisi submenu. Juga, tepat di bawah tautan ada tag rentang dengan panah kelas .sidebar-menu.
span memiliki::setelah elemen semu dan berisi panah FontAwesome. Secara default, submenu disembunyikan dan hanya akan terlihat saat Anda mengklik tanda panah. Inilah cara kami melakukannya dengan jQuery:
$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-panah"); $sidebarArrow.klik(function() ( $(this).next().slideToggle(300); ) ); ) );
Saat kami mengklik panah, kami memanggil fungsi, yang pada gilirannya menargetkan elemen berikutnya segera setelah rentang (dalam kasus kami, submenu) dan membuatnya terlihat. Fungsi yang kami gunakan adalah slideToggle . Itu membuat elemen muncul dan menghilang. Fungsi dalam contoh kita memiliki satu parameter - durasi animasi.
Item menu dalam contoh memiliki efek hover. Itu dibuat menggunakan::setelah elemen semu. Kodenya terlihat seperti ini:
Menu-sidebar li > a::after ( konten: ""; tampilan: blok; tinggi: 0,15em; posisi: absolut; atas: 100%; lebar: 102%; kiri: 50%; transformasi: terjemahkan(-50% ); background-image: linear-gradient(ke kanan, transparan 50,3%, #FFFA3B 50,3%); transisi: background-position .2s .1s ease-out; background-size: 200% otomatis; ) .menu-sidebar li > a:hover::setelah ( background-position: -100% 0; )
The ::after pseudo-elemen berisi elemen level blok di bagian bawah setiap tautan dengan lebar penuh dan tinggi 0,15em. Semuanya terlihat seperti garis bawah. Keunikannya adalah kita tidak hanya menerapkan warna latar belakang ke garis, kita menggunakan fungsi linear-gradient() pada gambar latar belakang. Meskipun fungsi ini dimaksudkan untuk membuat gradasi warna, kita dapat mengubah warna dengan menentukan persentase yang diinginkan.
Menu-sidebar li > a::after ( background-image: linear-gradient(ke kanan, transparan 50,3%, #FFFA3B 50,3%); )
Separuh dari garis di sini transparan dan separuh lainnya berwarna kuning. Dengan membuat ukuran background 200%, kita menggandakan lebar kotak kita. Sekarang bagian transparan menempati seluruh lebar tautan, dan bagian kuning bergerak ke kiri dan menjadi tidak terlihat. Kami mengubah posisi background hover ke -100%. Sekarang bagian kuning menjadi terlihat dan bagian transparan disembunyikan.
Alih-alih bagian transparan, Anda dapat menggunakan warna lain. Anda juga dapat bereksperimen dengan gradien.
Setiap elemen yang telah kami pertimbangkan bekerja secara keseluruhan. Anda dapat membuat menu seperti itu menggunakan desain situs web apa pun dari koleksi TemplateMonster. Seperti yang Anda lihat, ini lebih mudah dari yang Anda kira. Semoga berhasil membuat situs web yang profesional dan ramah pengguna!
Sekarang kita akan dengan cepat dan mudah membuat menu vertikal yang akan bergerak dari samping saat Anda mengklik tombol panggilnya.
LANGKAH 1. Menambahkan Menu ke File HTML
Rekatkan kode di bawah ini ke dalam file html:
Anda dapat melihat bahwa untuk semua tombol menu, termasuk tombol menu itu sendiri, sebuah kelas telah ditambahkan openButton. Ini dilakukan agar skrip kami, yang akan kami sambungkan, dapat mengikat tombol-tombol ini dengan tindakan membuka dan menutup menu.
LANGKAH 2. Menambahkan Gaya
Sekarang kita menata menu kita dan semua tombol sedikit. Masukkan ke Anda css kode file di bawah ini:
Tombol ( latar belakang: transparan; batas: transparan; garis besar: tidak ada; kursor: penunjuk; margin: 50px 90px; berat font: tebal; ukuran font: 24px; warna: #6c7d96; transisi: 0,2s; ) tombol:hover ( transisi: 0,2s; opacity: 0,7; ) tombol:aktif ( transisi: 0,2s; opacity: 0,4; ) nav ( warna latar: #6c7d96; lebar: 250px; posisi: relatif; kiri: -999px; transisi: 0,5s kemudahan; ) nav ul li ( padding: 20px 0; text-align: center; transition: 0.2s; ) nav ul li:hover ( cursor: pointer; background-color: #454954; transition: 0.2s; ) nav ul li :aktif ( background-color: #23252b; transition: 0.2s; ) nav ul li a ( color: white; text-decoration: none; font-weight: bold; font-size: 21px; )
Bagian terpenting dari kode ditulis di pemilih nav. Dengan penentuan posisi relatif, kami menyembunyikan menu kami di luar bagian halaman yang terlihat dengan memberikan nilai negatif untuk kiri.
Catatan. Anda juga dapat menggunakan pemosisian tetap jika Anda perlu menempelkan menu ke layar saat Anda menggulir. Ini akan bekerja secara identik dengan versi kami.
LANGKAH 3. Menghubungkan skrip
Di file js Anda, Anda perlu menempelkan kode ini:
$(document).ready(function() ( $(".openButton").klik(function() ( if(!$(".openButton").hasClass("openDone")) ( $(".openButton" .addClass("openDone"); $("nav").css("left", "0px"); ) else ( $(".openButton").removeClass("openDone"); $("nav" ).css("left", "-999px"); ) )); /* Hubungkan ketika Anda awalnya ingin membuat menu responsif setelah ukuran layar tertentu yang memungkinkan desain responsif menu Anda $(window).resize( function() ( if ($(window).width() > 1200) ( $("nav ul li").removeAttr("style"); ) )) ;*/));
Pemeriksaan skrip untuk suatu acara klik untuk tombol dengan kelas tombol terbuka, yang kami berikan sebelumnya. Segera cek keberadaan kelasnya buka Selesai. Bergantung pada apakah tombol memiliki kelas ini, skrip ini memutuskan apakah akan menutup menu atau membukanya.
Omong-omong, kami tidak mendaftarkan kelas ini di mana pun. Ini bertindak sebagai semacam saklar. Ini bekerja sedemikian rupa ketika tombol ditekan MENU", ke semua tombol dengan kelas openButton kelas ditambahkan buka Selesai. Dan ketika pengguna mengklik salah satu tombol menu lagi, skrip menghapus kelas openDone tombol-tombol ini.
Oleh karena itu, kelas ini diperlukan hanya untuk skrip, sehingga memahami pada saat apa menu perlu ditampilkan, dan pada saat apa harus menutupnya. Jika kita tidak menambahkan kelas buka Selesai, skrip akan bekerja dengan tidak benar, dan menu, saat Anda mengklik tombol untuk membukanya, akan langsung terbuka dan langsung tertutup.
Catatan. Kode yang dikomentari di bawah harus disertakan jika Anda menggunakan skrip ini untuk menganimasikan versi responsif menu horizontal Anda. Ini memecahkan masalah menu yang menghilang saat layar diperbesar.
Ringkasan
Kami membuat menu animasi paling sederhana yang muncul di samping saat Anda mengklik tombol. Seperti yang Anda lihat, sama sekali tidak ada yang rumit di sini. Anda dapat memperbaiki kode ini dan memodifikasinya sesuka Anda.
Menu vertikal dilakukan berdasarkan daftar, bullet atau nomor. Secara default, semua item daftar ditumpuk secara vertikal, memenuhi seluruh lebar elemen penampung, yang kemudian mengambil seluruh lebar blok penampungnya.
Elemen daftar tidak hanya berisi tautan, tetapi juga judul, ikon, gambar. Menggunakan menu vertikal, Anda dapat membuat komentar di situs, daftar kategori, dll.
1. Menu vertikal dengan judul
Desain sederhana yang elegan. Cocok untuk kategori gaya di situs. Saat mengarahkan kursor, item daftar mengubah warna tautan.
* (ukuran kotak: border-box; margin: 0;) .widget ( padding: 20px 30px; background: white; font-family: "Roboto", sans-serif; ) .widget-title ( text-transform: huruf besar ; jarak huruf: 2px; warna: #222; ukuran font: 16px; padding-kiri: 15px; margin-bawah: 15px; batas-kiri: 2px solid #b99d61; ) .widget-list ( padding: 0; daftar -style: none; ) .widget-list a:before ( content: "\2014"; margin-right: 14px; ) .widget-list a ( text-decoration: none; outline: none; display: block; padding: 6px 0; spasi huruf: 1px; berat font: 300; warna: #444; transisi: .3s linear; ) .widget-list a:hover (warna: #b99d61;)
2. Menu vertikal dengan gaya "peta metro"
Solusi menarik untuk desain menu vertikal, dimungkinkan untuk menambahkan menu bersarang. "Cabang metro" - batas kiri daftar, penanda dibuat sebelum setiap tautan.
- Daftar barang
- item daftar bersarang
- item daftar bersarang
- item daftar bersarang
- Daftar barang
- Daftar barang
3. Menu vertikal dengan efek hover
Ikon dan isian latar belakang yang muncul saat mengarahkan kursor ke item daftar akan membantu mendiversifikasi desain elemen menu vertikal.
.category-wrap ( padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .kategori-bungkus h3 ( ukuran font: 16px; warna: rgba(0,0,0,.6); margin: 0 0 10px; bantalan: 0 5px; posisi: relatif; ) .kategori-bungkus h3:setelah ( konten: ""; lebar: 6px; tinggi: 6px; latar belakang: #80C8A0; posisi: absolut; kanan: 5px; bawah: 2px; bayangan kotak: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul ( list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); ) .category- bungkus li (margin: 12px 0 0 0px;) .kategori-bungkus a ( dekorasi teks: tidak ada; tampilan: blok; ukuran font: 13px; warna: rgba(0,0,0,.6); padding: 5px ; posisi: relatif; transisi: .3s linear; ) .kategori-bungkus a:setelah ( konten:"\f18e"; font-family: FontAwesome; posisi: absolut; kanan: 5px; warna: putih; transisi: .2s linier ; ) .category-wrap a:hover ( background: #80C8A0; warna putih; )
4. Menu vertikal dengan ikon
Ikon menu memberikan jangkar visual, melengkapi deskripsi verbal dari setiap kategori. Untuk menampilkan ikon, Anda perlu menghubungkan . Anda juga dapat menggunakan font ikon atau ikon gambar lainnya.
* (ukuran kotak: kotak batas; margin: 0;) .widget ( padding: 20px; batas: 5px padat #f1f1f1; latar belakang: #fff; radius batas: 5px; font-family: "Roboto", sans- serif; ) .widget h3 ( margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; ) .widget ul ( margin: 0; padding: 0; daftar -style: none; width: 250px; ) .widget li ( border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; ) .widget li:last-child ( border-bottom: none; margin-bottom: 0; padding-bottom: 0; ) .widget a ( text-decoration: none; color: #616a6b; display: inline-block; ) .widget li:before ( font-family: FontAwesome; font-size : 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; ) .widget li:nth-child(1):before (content:"\f1fc";) .widget li:nth-child( 2):sebelum (konten:"\f0d0";) .widget li:nth-child(3):sebelum (konten:"\f0cd";) .widget li:nth-child(4):sebelum (konten:" \f028";) .widget li:nth-child(5):sebelum (konten:"\f03d";)
5. Menu vertikal dengan gambar
Contoh ini dapat digunakan untuk mendesain blok dengan produk baru, produk serupa, dll. situs web toko online.
Jpeg">
