Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design

Memeriksa Navigasi Responsif: Pola Toggle

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Examining Responsive Navigation Patterns.
Examining Responsive Navigation: Footer Patterns
Examining Responsive Navigation: Off Canvas Patterns

Indonesian (Bahasa Indonesia) translation by Anggun Cornelis (you can also view the original English article)

Selamat datang di seri ketiga tentang bagaimana mengembangkan pola navigasi responsif. Tutorial ini akan memandu Anda melalui tiga pola di mana navigasi dinyalakan dan dimatikan untuk menghemat ruang di bagian atas halaman.

Untuk rekap, di bagian 1 kami mengembangkan tiga pola dimana navigasi tetap berada di header tidak peduli apa ukuran layarnya. Pada bagian 2 kami memindahkan navigasi ke footer dan mengembangkan empat pola lagi untuk membantu pengunjung mengaksesnya. Dalam kedua kasus, tujuannya adalah untuk meminimalkan ruang vertikal saat navigasi dilihat pada layar yang lebih kecil

Hari ini kita akan melewati tiga pola baru dimana navigasi disembunyikan secara default dan kemudian terungkap saat diminta. Pola toggle ini menghemat ruang dengan tidak menggunakan navigasi sampai diperlukan. Seperti artikel sebelumnya, pola ini mungkin sudah Anda ketahui melalui Brad Frost yang menyusun pola yang digunakan di situs responsif serta beberapa pola kompleks yang digunakan.


Pola

Tiga pola yang akan kita kembangkan di sini mengambil salah satu pola footer sebagai isyarat mereka. Jika Anda ingat, pola jangkar footer menempatkan navigasi di bagian bawah halaman dan menggunakan tombol di bagian atas untuk segera sampai ke sana. Kelemahan dari pola itu adalah pengunjung Anda melompat tiba-tiba dari atas halaman ke bawah, mungkin akan mengecewakan mereka.

Pola pengalih yang akan kita lihat saat ini bertujuan memperbaiki kelemahan pola jangkar footer. Sekali lagi kita akan mulai dengan tombol untuk mengaktifkan menu dan mematikan, tapi kita akan menghilangkan lompatan dengan membuka dan menutup navigasi di tempat.

Pola yang akan kita kembangkan dalam artikel ini adalah:

  • Toggle - Menu terbuka dengan mengklik sebuah tombol dan menutup dengan mengklik apapun dari menu
  • Multi-Toggle - Menambahkan submenu akordeon ke pola toggle dasar
  • Toggle & Slide - Slides submenu ke tempatnya dari layar off

Seperti artikel sebelumnya, pola-pola ini saling membangun satu sama lain. Pertama kita akan membuat basic toggle. Kami akan menggunakan metode yang sama namun berbeda untuk menampilkan dan menyembunyikan menu utama daripada yang telah kami gunakan sebelumnya di seri ini. Kemudian kita akan menambahkan submenu, pertama dengan pola akordeon dan akhirnya dengan menggeser submenu pada dan di luar layar.

Kode lengkap untuk semua pola ini tersedia melalui link download di atas dan juga bisa dilihat dengan mengunjungi demo dan melihat kode sumbernya. Saya akan menyimpan kode di posting ini khusus untuk menu, submenu, dan elemen terkait.



Pola

Pola toggle adalah salah satu pola yang lebih populer untuk penanganan navigasi responsif. Secara default menu tersembunyi dan di tempatnya adalah satu tombol menu atau link. Ini memanfaatkan ruang vertikal dengan mengikuti prinsip desain pengungkapan progresif. Hanya pengaktifan yang awalnya terlihat sampai menu diminta.

Pendekatan: Pada layar terkecil kita akan membuat tombol toggle dan menggunakan kotak centang hack untuk menampilkan dan menyembunyikan menu. Kami akan menata menu vertikal dan menyembunyikannya secara default. Kami akan menata menu vertikal dan aktifnya secara default.

Metode ini diadaptasi dari yang dipaparkan oleh Aaron Gustafson.

Langkah 1: HTML

Dalam posting pertama dalam seri ini saya memperkenalkan: target pseudo-selector sebagai salah satu cara untuk menghasilkan css hanya klik event. Pemilih target cocok saat hash dalam url dan id pada elemen sama. Dengan kata lain jika Anda memiliki url domain.com#more kemudian: target akan cocok setiap elemen dengan id = "lebih" ditambahkan.

Di sini kita akan menggunakan klik event css lain, hack kotak centang. Ia bekerja dengan menciptakan sebuah label bentuk yang terhubung ke kotak centang masukan. Label akan menjadi tombol menu kami dan mengkliknya akan mengecek dan hapus centang pada checkbox. Kita kemudian bisa menggunakan kombinator saudara yang berdekatan untuk menargetkan menu dan menunjukkan dan menyembunyikannya tergantung pada: keadaan cek dari masukan.

Html untuk pola ini dimulai dengan label yang disebutkan di atas dan kotak centang. Melalui kelas .btn kita akan memberi label pada label agar terlihat seperti tombol. Anda akan melihat onclick kosong telah ditambahkan ke label. Ini adalah bagian dari perbaikan untuk iOS di bawah versi 6, yang akan saya dapatkan sebentar lagi.

Setelah label dan checkbox adalah daftar link reguler yang tidak biasa dengan satu pengecualian. Perhatikan item terakhir dalam daftar label lain yang menargetkan kotak centang. Kita akan menggunakannya nanti untuk menyembunyikan menu.

Sebelum sampai css biarkan saya menjelaskan bagaimana ini akan bekerja. Anda mungkin ingin memeriksa demo (jika Anda belum) untuk melihat apa yang terjadi juga. Anda ingin mengubah ukuran browser Anda (atau perangkat apa pun yang Anda gunakan) jadi di bawah 600px. Di bawah lebar ini Anda hanya harus melihat tombol menu di bagian atas halaman.

Mengklik tombol akan membuka menu di akordeon seperti fashion. Setelah terbuka Anda dapat mengklik di manapun di luar 4 link dalam menu untuk menutupnya. Anda tidak perlu klik lagi tombol menu untuk menutup menu. Perhatikan juga, bahwa ketika menu ditutup warna perubahan tombol ketika Anda membawa lebih dari itu, tapi tombol tidak mengubah warna ketika Anda membawa lebih dari itu dengan menu terbuka.

Apa yang terjadi adalah beberapa elemen telah dibentuk untuk duduk di tingkat z-index yang berbeda dalam tumpukan. Saat menu buka itu diatas tombol menu. Apa yang tidak Anda lihat adalah label yang dekat. Label ini disembunyikan dan diregangkan untuk menutupi lebih dari layar yang terlihat. Dalam menu itu duduk di belakang item menu lainnya.

Jadi dengan menu buka link terlihat 4 ada di bagian atas atas. Tepat di bawah mereka adalah label tutup yang akan menghapus centang pada kotak centang dan mematikan navigasi. Label harus menutupi segala sesuatu di layar selain item 4 menu. Ketika Anda mengarahkan mouse di atas tombol menu dengan menu membuka Anda tidak benar-benar melayang di atas itu. Anda sedang melayang di atas dekat label.

Memperhatikan z-indeks terletak di bawah saat Anda membaca kode.

Langkah 2: Default CSS

Kita akan mulai dengan posisi label .btn di sudut kanan atas halaman. Kami memberikan indeks z-100, meskipun jumlah itu sendiri sewenang-wenang. Setelah diposisikan, kami akan memberi tombol beberapa padding di sekitar teks itu, mengelilingi sudut-sudutnya sedikit dan kemudian mengatur teks dan warna latar belakang.

Untuk memberi tombol sedikit kedalaman kita akan menggunakan gradien dan kita akan meringankan gradien pada hover.

Catatan: saya menggunakan versi lama dari sintaks gradien selama posting ini karena browser Webkit belum mengadopsi spesifikasi terbaru. Sintaksnya harus bekerja di browser yang menggunakan spec baru dan gradien tidak diperlukan untuk pola-pola ini.

Karena kita tidak perlu atau ingin melihat kotak centang, kita akan memposisikannya jauh dari halaman. Sebelum memindahkan kotak centang dari halaman, Anda mungkin ingin mengklik tombol dan juga label #close, hanya untuk memastikan keduanya benar-benar mengganti kotak centang. Setelah Anda membuktikan kepada diri sendiri bahwa mereka melakukannya, Anda dapat memindahkan kotak centang dari layar dan melupakannya.

Dengan menu itu sendiri kita mulai dengan memposisikannya tepat di bawah header dan memberinya z-index kurang dari tombolnya. Ketika menu menunjukkan sebagai tertutup kami ingin tombol untuk berada di atas tumpukan karena itu adalah satu-satunya hal yang akan membuka menu.

Menu disembunyikan dengan mengatur tinggi dan tinggi garis link ke 0 dan setting overflow menjadi hidden. Tanpa pengaturan overflow, link tersebut terlihat mengikis satu di atas satu sama lain. Efek akordeon datang sebagai hasil dari perubahan tinggi dan tinggi garis dari waktu ke waktu sehingga transisi ditambahkan.


Langkah 3: CSS untuk Toggle Menu

Sekali lagi kami menggunakan hack kotak centang untuk membuka dan menutup menu. #toggle adalah kotak centang kami dan kami dapat menggunakan hack untuk menargetkan elemen sibling yang berdekatan, yang dalam kasus kami adalah elemen nav. Hal ini memungkinkan kita untuk lebih menargetkan sesuatu di dalam elemen nav, dimana kita benar-benar ingin menerapkan css kita.

Pertama kita akan mengubah z-index dari menu sehingga berada di atas tombol menu. Nilai 101 bekerja. Kemudian kita beri menu bayangan untuk memberikan tampilan duduk di atas halaman. Bayangan perlu ditambahkan disini, karena masih akan muncul saat menu ditutup sebaliknya.

Selanjutnya kita akan membuka menu dengan mengatur tinggi dan tinggi baris link ke 3em. Sekali lagi, peralihan transisi di atas mengarah pada pembukaan dengan akordeon seperti itu. Perhatikan bagaimana kita mengatur link untuk memiliki indeks-z dari 1. Seluruh navigasi masih di 101, tapi di dalam link navigasi ada di z-index 1.

Hal ini penting ketika Anda melihat ke bawah sedikit lebih jauh. #close link yang diberikan indeks z-0 menjaganya agar tetap di bawah link lainnya. Untuk menyembunyikan dan peregangan #close label, kami menetapkan latar belakang menjadi transparan, dan mengatur besar atas dan bawah nilai negatif. Angka-angka agak sewenang-wenang dan dapat bervariasi tergantung pada desain Anda.

Pada titik ini menu harus bekerja dan Anda harus bisa mengaktifkannya dengan mengklik tombol menu dan matikan dengan mengklik di manapun di luar menu yang terlihat.


Langkah 4: CSS di Media Queries

Satu-satunya yang tersisa untuk dilakukan adalah mengubah menu kami ke bar navigasi horizontal begitu memungkinkan ruang. Pada saat kita memiliki cukup ruang. Pertama kita akan menyembunyikan tombol dengan mengatur tampilan ke none. Selanjutnya kita akan menyesuaikan posisi menu dan mematikan bayangan. Kita harus melakukan ini di kedua pernyataan yang dicek dan tidak dicentang kalau-kalau seorang pengunjung mengubah ukuran browser mereka, dengan mengatakan bahwa mengubah tablet dari potret menjadi landscape.

Untuk menampilkan link secara horisontal kita akan mengatur daftar-item untuk ditampilkan secara inline dan kemudian mengambang semuanya ke kiri. Kemudian kita akan mengatur ulang tinggi dan tinggi garis dari link, mengatur ulang untuk menampilkan inline, mengambangnya ke kanan, dan memberi mereka sedikit padding. Akhirnya kita menetapkan label dekat untuk menampilkan: tidak ada karena kita tidak membutuhkannya lagi.

Di atas lebar ini tidak banyak yang perlu dilakukan selain menambahkan sedikit tambahan padding antar link.

Langkah 5: Perbaikaqn untuk iOS dan Android

Saya sebutkan di atas kami membutuhkan sesuatu dari sebuah memperbaiki untuk iOS yang kurang dari versi 6. Kita juga perlu memperbaiki untuk Android versi 4.1.2. Tidak peduli banyak untuk kotak centang hack, tapi keduanya memiliki perbaikan yang sederhana namun tidak biasa.

Kita sudah melihat perbaikan iOS, yaitu menambahkan event onclick kosong ke label. Untuk Android kami menambahkan animasi yang palsu ke elemen tubuh.

Dan dengan itu kita selesai dengan menu dasar toggle.

Pikiran

Pola toggle ini populer karena bekerja dengan baik. Ini menghemat ruang vertikal, dengan menggunakan hanya cukup untuk tombol toggle sampai diperlukan. Sebagian besar css di atas adalah untuk gaya tombol dan menu Tampilan ketika terlihat. Kunci untuk pola adalah dalam bagaimana kita beralih menu on dan off.

Di sini saya menggunakan hack kotak centang untuk beralih, tapi kita bisa sama-sama menggunakan: hack target yang kita lihat dalam posting pertama dalam seri ini. Jika Anda ingin, Anda juga dapat menggunakan beberapa Javascript untuk menambah dan menghapus kelas yang mengubah menu on dan off. Kita akan melihat bagaimana menggunakan Javascript, jQuery khusus untuk menambah dan menghapus kelas dalam pola-pola di bawah ini.

Contoh

Situs di bawah ini semuanya menggunakan pola toggle. Perhatikan berbagai cara masing-masing gaya tombol toggle dan menu itu sendiri saat terlihat.


Multi-Toggle

Pola muti-toggle adalah sama dengan pola toggle dengan satu penambahan. Hal ini memungkinkan untuk setiap item menu berisi submenu. Beberapa situs akan menggunakan pola ini dengan menjaga submenu terlihat ketika membuka menu utama. Mereka hanya gaya mereka berbeda sehingga Anda dapat memberitahu memang submenu sebagai lawan dari menu utama. Itulah tidak menyenangkan sehingga kita akan menyembunyikan submenu sampai mereka diminta.

Pendekatan: Kita akan mulai dengan membangun menu toggle sama yang dijelaskan di atas. Salah satu item menu (tautan multi-toggle) akan berisi submenu. Submenu ini akan disembunyikan pada awalnya saat menu utama toggle terbuka. Kami akan menambahkan indikator untuk link dan menggunakan jQuery untuk membuka dan menutup submenu di akordeon seperti caranya.


Langkah 1: HTML

Html ini sebagian besar sama seperti di atas, dengan beberapa tambahan. Tambahan yang jelas adalah submenu untuk link Multi-Toggle. Tambahan lainnya adalah kelas yang diberikan ke link ini (containts-sub dan multi) dan yang diberikan ke submenu.

Karena toggling menu utama persis sama seperti di atas kita akan langsung terjun ke submenu

Langkah 2: Submenu CSS

Pertama mari kita pastikan kita membiarkan pengunjung tahu bahwa mengklik Mutli-Toggle melakukan sesuatu selain membawa mereka ke halaman baru. Kami akan menambahkan sebuah segitiga menunjuk ke bawah untuk menunjukan ini. Untuk menjaga hal-hal sederhana yang kita akan menggunakan: setelah pseudo elemen konten properti dan menambahkan beberapa unicode untuk menampilkan segitiga. Karena tampilannya agak kecil awalnya kita akan mengurangi ukuran fontnya.

Kami akan menggunakan teknik yang sama seperti di atas (menyesuaikan tinggi dan tinggi garis link) agar submenu terbuka dengan akordeon. Pemilih tidak terlihat cantik, tapi kami masih perlu menargetkan semuanya saat checkbox dicentang. Kami akan menjaga submenu ditutup dengan menetapkan tinggi dan tinggi garis dari link dan daftar item ke 0 dan sekali lagi kita akan menambahkan sebuah transisi. Untuk membedakan link submenu dari link utama, kami akan memberi mereka beberapa padding tambahan untuk menjelaskannya dan juga warna latar belakang yang lebih ringan.

Agar submenu ditampilkan sebagai open, itu hanya masalah atau peningkatan tinggi dan tinggi garis link dan item daftar. Perhatikan bahwa pemilih di sini berisi kelas terbuka tambahan. Langkah selanjutnya adalah menambahkan dan menghapus kelas ini secara dinamis dengan beberapa jQuery.


Langkah 3: JQuery untuk membuka dan menutup Submenu

Tentu saja langkah pertama adalah untuk menyertakan jQuery itu sendiri. Anda mungkin sudah melakukan ini tergantung pada situs Anda, tapi inilah cara memasukkannya melalui Google.

Semua yang kita butuhkan adalah satu fungsi untuk menambah dan menghapus kelas. Pertama kita akan meraih link apapun dengan .contains-sub kelas dan membuat fungsi klik baru untuk menggantikan perilaku default link.

Submenu adalah saudara dari link ini sehingga kita menemukan saudara kandung dan tes untuk melihat apakah sudah memiliki kelas terbuka. Jika demikian kami menghapus kelas. Jika kelas tidak ada kami menambahkannya. Itu saja yang perlu kita lakukan. Css kami menangani segala hal lain tergantung pada apakah kelas itu ada atau tidak.


Langkah 4: Media query

Kumpulan pertama css yang kami tambahkan ke kueri media adalah menyembunyikan tombol pengalih dan mengubah menu dari daftar vertikal menjadi horizontal yang diposisikan di sebelah kanan logo. Ini adalah persis kode yang sama kami gunakan dalam pola toggle di atas sehingga saya tidak akan mengulanginya di sini. Salah satu tambahannya, adalah dengan menghapus segitiga pada: setelah konten semu.

Kita memiliki beberapa css yang kita perlu tambahkan untuk submenu. Dalam keadaan default, kami tidak ingin submenu ditampilkan sehingga kami akan memposisikannya dan memindahkannya dari layar. Pada hover, kita akan membawa submenu kembali dengan mengubah nilai kiri ke auto dan menyesuaikan bagian atas sedikit.

Catatan: IE6 hanya menerima: hover pada link. Jika Anda perlu mendukung IE6, Anda pasti ingin menggunakan kelas sfhover dan Javascript kecil di sistem drop-down Suckerfish. IE7 menerima: arahkan pada unsur-unsur non-link asalkan Anda menggunakan doctype tepat.

Sebagian besar kode yang tersisa di bawah ini murni estetika. Kami menetapkan warna latar belakang dan perbatasan dan mengatur lebar dan paddings. Ada beberapa hal untuk mencatat. Pertama kita perlu me-reset tinggi dan tinggi baris link submenu. Mereka hanya punya bebas nilai nol ketika kotak centang dicentang dan kita tidak lagi memiliki bahwa kotak centang untuk memeriksa.

Kedua untuk demo ini aku mematikan transisi pada submenu. Ada banyak bagian yang bergerak ke submenu pada titik ini dan membiarkan semuanya bergerak ke tempatnya tidak terlihat benar. Mematikan transisi daripada mencari kombinasi yang tepat apa yang harus pergi pada dan apa untuk mematikan dibuat lebih masuk akal.

Setelah menu dan submenu berada pada layar yang lebih lebar, kueri media yang tersisa ada untuk membuat beberapa penyesuaian pada padding dan jarak lainnya.

Pikiran

Semua yang dikatakan di atas tentang pola toggle berlaku sama dengan pola mutli-toggle. Ini menghemat ruang vertikal sampai diperlukan. Itu masuk akal karena hanya perpanjangan dari toggle asli. Sebagian besar css di sini adalah juga untuk estetika lebih dari apa pun. Kunci dengan submenu pertama-tama menentukan apakah tetap terbuka selalu atau tidak atau untuk membuka atau menutupnya pada perintah.

Dengan asumsi yang kedua Anda harus memutuskan bagaimana untuk membuka dan menutup itu. Di sini kami menggunakan jQuery untuk membuka submenu di akordeon seperti cara. Pola berikutnya kami akan menawarkan cara lain untuk mengungkapkan dan menyembunyikan submenu.

Contoh

Sementara setiap situs di bawah ini menggunakan pola mutl-toggle, perhatikan bagaimana masing-masing berbeda dalam implementasi pola. Perlu diingat bahwa Anda tidak terbatas untuk mengembangkan pola ini dengan cara yang sama saya miliki di sini.


Toggle & Slide

Pola toggle & slide sama dengan pola multi-toggle kecuali bagaimana kita mengungkapkan dan menyembunyikan submenu. Jika tidak, ini sangat mirip. Mungkin ada sedikit 'wow' untuk melihat sesuatu yang terlepas dari layar karena tidak membuka dan menutup di tempat.

Pendekatan: Karena pola ini sangat mirip dengan apa yang telah kita lihat di atas, kita akan beralih ke barang baru secepat mungkin. Kita akan memindahkan submenu ke item menu baru dan seperti di atas, kita akan menyembunyikannya sampai seseorang memintanya. Namun, alih-alih mengungkapkan submenu dengan akordeon, kami akan menggesernya dari kiri ke kiri.

Langkah 1 : HTML

Html di bawah ini akan terlihat sangat familiar sekarang. Ada beberapa perbedaan dari atas, meskipun. Kami telah memindahkan submenu ke item menu Toggle & Slide dan mengganti nama salah satu kelas pada submenu dari multi ke slide. Perhatikan juga bahwa slide dan sub kelas berisi telah dipindahkan ke submenu (idealnya berisi-sub akan memiliki nama yang lebih baik di sini, karena ini adalah submenu dan tidak berisi satu). Ada juga link baru dalam submenu. Karena kita akan meliput item menu saat submenu meluncur masuk, kita memerlukan cara untuk menggesernya kembali dari layar.


Langkah 2 : Submenu CSS

Meskipun gagasan dasar tentang apa yang kami lakukan dalam pola ini serupa dengan yang kami lakukan dalam pola multi-toggle, kami memerlukan beberapa css yang berbeda untuk mencapainya. Pertama kita akan memodifikasi indikator yang kita gunakan dan pergi dengan segitiga menunjuk kanan untuk lebih menunjukkan arah submenu akan bergerak.

Agar menu slide masuk dari layar, kita harus memposisikannya di layar awal. Menetapkan posisi absolut dengan nilai kiri -100% menyelesaikan ini. Seperti yang telah kami lakukan beberapa kali, kami akan menambahkan transisi sehingga submenu tampak bergerak melintasi layar saat nilainya berubah.

Seperti multi-toggle kita akan menambahkan kelas .open untuk membuka submenu dan semua yang perlu kita lakukan untuk menyelesaikan slide adalah mengatur ulang nilai kiri ke auto. Sementara kita melakukannya, kita akan mengubah warna latar belakang dari link submenu agar lebih jelas apa yang sedang terjadi. Dan karena kita sekarang menutupi item menu dan perlu mengklik link belakang, kita akan memberikannya segitiga menunjuk kiri, sekali lagi pada elemen semu.


Langkah 3: JQuery untuk mengungkapkan dan menyembunyikan Submenu

Kita perlu memperluas fungsi jQuery yang kita gunakan untuk membuka dan menutup submenu multi-toggle untuk submenu geser. Dengan pola multi-toggle kita mengklik link yang sama untuk membuka dan menutup submenu. Dengan tombol toggle & slide begitu kita membuka submenu maka cover link kita gunakan untuk membukanya.

Di html kita menambahkan link baru "Back" yang akan kita gunakan untuk menutup submenu. Itu tidak bisa menggunakan fungsi jQuery yang sama meskipun. Dalam kode asli kita mencari saudara dari link yang memiliki kelas berisi-sub. Kami tidak memiliki kondisi dengan Backlink baru.

Sebagai gantinya kita perlu menarik ul dari link dan menghapus kelas terbuka. Sejujurnya kita tidak perlu memasukkan kode tambahan untuk kemungkinan penambahan kelas, karena backlink hanya akan terlihat jika kelas sudah ada. Kami tidak perlu menyertakan kode untuk menghapus kelas di bagian pertama, karena hanya saat kelas tidak ada, kami akan mengeklik tautan asli.

Untuk contoh khusus jQuery dapat disederhanakan:


Langkah 4 : Media Queries

Kode di kueri media untuk pola pengalih & slide sebagian besar sama dengan yang kami lihat di atas untuk pola multi-toggle. Sekali lagi kita menyembunyikan toggle, dan panah pada link, dan mengubah menu vertikal menjadi horizontal dengan drop down. Alih-alih menunjukkan semua kode itu lagi, saya akan menunjukkan beberapa perbedaan penting.

Pertama karena letak submenu pada item terakhir dalam daftar beberapa margin negatif telah ditambahkan untuk menariknya kembali ke kiri sedikit. Lebih penting lagi transisi harus dihapus di satu tempat lagi. Karena submenu itu sendiri dibuat untuk memiliki transisi ke slide di layar, kita perlu menghapus transisi itu. Terakhir karena kita tidak perlu menunjukkan link "Kembali" lagi akan menyembunyikannya dengan tampilan: tidak ada.

Di luar hal di atas segalanya adalah penyesuaian kecil dalam jarak seperti semua pertanyaan media di atas titik ini.

Pikiran

Seperti pola lainnya, pola toggle & slide melestarikan ruang vertikal sampai dibutuhkan. Ini sangat mirip dengan pola multi-toggle kecuali kita sekarang meluncur di submenu dari samping, bukan membukanya seperti akordeon. Slide ini lebih sering terjadi pada perangkat sentuh dan mungkin pilihan yang lebih disukai.

Satu pertimbangan tambahan adalah tempat submenu ditampilkan setelah dilipat pada tempatnya. Ini mencakup link asli yang digunakan untuk menggesernya ke tempatnya dan memerlukan penambahan tautan "Kembali" dan beberapa penyesuaian pada jQuery untuk menggeser submenu dari layar. Pilihan lain mungkin memilikinya tampil sedikit lebih rendah sehingga tidak menutupi link asli yang digunakan untuk membukanya.

Contoh

Sementara pola pengalih & slide bekerja dengan baik dan memiliki sentuhan "wow" dalam transisi slide, tidak ditemukan sesering pada situs live. 2 situs di bawah ini sama-sama memanfaatkan pola ini sampai tingkat tertentu. Sony menggunakannya mirip dengan cara kita menggunakannya disini. Curry's hanya menggunakan slide untuk menu yang terbuka secara default ke bagian bawah halaman.

  • Sony
  • Curry digunakan di bagian bawah halaman

Ringkasan

Seperti pada 2 artikel sebelumnya, ini semua adalah pola pada sebuah tema. Mereka semua menyembunyikan menu secara default pada layar kecil dan di tempatnya menawarkan satu tombol menu yang bisa digunakan untuk mengaktifkan menu yang terbuka dan tertutup. Mereka semua menu utama secara default pada layar pilihan satu menu yang bisa digunakan untuk mengaktifkan menu yang terbuka dan tertutup.

Pola mutli-toggle and toggle & slide memperluas toggle dasar, dengan menyediakan submenu. Kedua fungsinya sama dengan menggunakan jQuery untuk mengganti fungsi klik default dari sebuah link dan menambahkan dan menghapus kelas baru yang memungkinkan kita untuk menata submenu di dua negara bagian. Mereka berbeda dalam bagaimana css menunjukkan, menyembunyikan, dan menampilkan submenu.

Ada satu set pola lagi untuk sampai ke sana. Pada artikel berikutnya kita akan melihat beberapa pola di luar kanvas dimana navigasi utama atau beberapa konten dimulai dari kanvas secara default dan hanya terlihat sesuai permintaan.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.