Bekerja dengan elemen bersarang bukanlah mudah kerana, katakan, apabila anda memindahkan elemen induk bersama-sama dengannya, semua anak-anaknya juga bergerak. Oleh itu, kami akan menggunakan beberapa teknik yang akan menyokong terjemahan 3D submenu dan submenu yang dikehendaki elemen kanak-kanak. Idea utama adalah untuk meningkatkan nilai untuk penyiaran untuk memastikan bahawa sub-lapisan tidak ditunjukkan apabila kita menggerakkan semuanya sedikit untuk menunjukkan tepi unsur induk. Sudah tentu, ini tidak perlu dalam kes di mana submenu meliputi elemen induk.
Sila ambil perhatian bahawa kami menggunakan sifat CSS(transformasi, peralihan), yang hanya berfungsi dalam pelayar moden. Contoh pilihan alternatif untuk penyemak imbas yang tidak menyokong anda akan menemuinya di penghujung fail component.css, yang hanya menunjukkan menu peringkat pertama. Kami melakukan perkara yang sama jika tiada JS.
Untuk menu kami memerlukan struktur bersarang berikut:
Semua kategori
- Peranti Peranti
- Telefon bimbit Telefon bimbit
- Telefon bimbit Telefon bimbit
Di sini, setiap peringkat dibalut dengan teg div dengan kelas peringkat mp . Kami tidak akan dapat menggunakan kedudukan tetap jenis ini pada menu kerana perubahan akan menjadikannya berkelakuan seperti elemen kedudukan mutlak, jadi kami perlu menggunakan kedudukan mutlak, yang akan membawa kepada masalah tingkah laku tapak yang tidak diingini (menu menatal dan bergantung pada ketinggian dokumen).
Untuk mengelakkan menu menatal dan terputus jika kandungan tapak terlalu pendek, kami akan menggunakan sedikit helah dengan mengambil struktur berikut muka surat:
Sekarang kami menetapkan elemen berikut kepada elemen: gaya CSS:
Html, body, .container, .scroller ( height: 100%; ) .scroller ( overflow-y: scroll; ) .scroller, .scroller-inner ( position: relative; ) .container ( position: relative; limpahan: tersembunyi; latar belakang: #34495e )
Ini akan membolehkan anda menatal kandungan apabila menu tertutup versi mudah alih tapak, dan ia juga akan menjadi sama dengan ketinggian tetingkap pelayar. Oleh itu, kita meniru apa yang akan kita capai dengan kedudukan tetap. Plugin itu sendiri boleh dipanggil seperti ini:
mlPushMenu baharu(document.getElementById("mp-menu"), document.getElementById("trigger"));
Atau, jika submenu harus menutup tahap sebelumnya:
mlPushMenu baharu(document.getElementById("mp-menu"), document.getElementById("trigger"), (jenis: "cover"));
pemain baharu 16 Januari 2017 pada 01:28 Menu mudah alih untuk tapak. pemalam JQuery mmenu- jQuery
Dalam artikel ini kita akan bercakap tentang cara membuat menu untuk versi mudah alih tapak yang sesuai reka bentuk responsif. Saya ingin memberitahu anda tentang pemalam untuk JQuery yang dipanggil mmenu (anda boleh mengikuti pautan untuk memuat turun pemalam dan segera melihat bagaimana rupa menu yang akan kami buat). Kami akan menggunakan pemalam kerana membina basikal anda sendiri setiap masa bukanlah amalan terbaik. Cara kami ialah menggunakan amalan terbaik. Mari kita mulakan.
Sambungan. Penulis menasihati menggunakan html 5 doctype, baik, di sini saya fikir kita tidak memerlukan alternatif, kita menggunakannya. Di kawasan kepala dokumen kami, kami perlu menyambungkan JQuery itu sendiri dan dua fail pemalam, kami menyambung:
Jika kita memerlukan menu on-canvas, maka kita perlu memasukkan fail jquery.mmenu.oncanvas.min.js dan jquery.mmenu.oncanvas.css. On-canvas ialah versi menu yang mempunyai position:absolute; lebar: 100%; ketinggian:100%, yang meregangkannya untuk memenuhi keseluruhan skrin.
- Rumah
- Tentang kami
- Sejarah
- Pasukan itu
- alamat kami
- Kenalan
- Rumah
- Tentang kami
- Sejarah
- Pasukan itu
- alamat kami
- Kenalan
2. Untuk menjadikan submenu sentiasa kelihatan, anda perlu menambah kelas "Inset" padanya.
3. Tambahkan kelas "Dipilih" pada item menu untuk menjadikannya diserlahkan.
4. Anda boleh membuat pemisah seperti berikut
- laman web
- Rumah
- Tentang kami
- Kenalan
Saya menggunakan kelas Tetap untuk menetapkan position:fixed
Untuk menu mudah alih kami berfungsi, apa yang perlu kami lakukan ialah menyambung yang berikut kod javascript ke halaman:
$(document).ready(function() ( var $menu = $("#my-menu").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("mmenu"); $icon.on("klik", function() ( API.open(); )); ("is-active"); 100); $icon.on("klik", function() ( API.close(); )); ; , 100); $icon.on("klik", function() ( API.open();
Masalah Menggunakan mmenu Saya menghadapi dua masalah. Pada mulanya saya cuba membungkus semua isi badan tag div, kerana ini perlu untuk pemalam berfungsi. Tetapi dalam kes ini, atas sebab tertentu ia menyembunyikan semua kandungan yang saya bungkus. Jadi saya menyerah. Jika anda tidak membungkus segala-galanya dalam badan anda dalam div, maka pemalam akan melakukannya untuk anda. Tetapi akan ada masalah dengan menjalankan dua kali skrip js dan lain-lain. Selepas itu, saya segera menghadapi masalah kedua: pemalam tidak membungkus apa-apa selain div. Iaitu, jika anda mempunyai h1 terus di dalam badan (badan > h1), seperti yang saya ada, maka mmenu akan melangkaunya dan akan membungkus div yang ada di belakangnya, saya menyelesaikannya dengan hanya membungkus semua tag lain dalam div, supaya secara langsung Di dalam badan hanya tinggal div.Ini menjadikan semuanya berfungsi untuk saya. Saya harap artikel ini berguna kepada anda.
Tag: reka bentuk responsif, susun atur, pemalam jquery
Saya mencadangkan untuk pertimbangan teknik untuk mencipta yang mudah, sangat fleksibel dalam tetapan, dan juga agak berkesan, menu penyesuaian, menggunakan penanda semantik tulen, untuk melaksanakan reka bentuk penyesuaian, tanpa sambungan javascript. Akibatnya, dengan menggunakan CSS kita akan mendapat menu yang boleh diselaraskan ke kiri, kanan atau terletak betul-betul di tengah, item aktif/semasa diserlahkan, menu yang boleh, apabila mengubah saiz tetingkap penyemak imbas, dengan cepat menyusun semula dirinya ke dalam drop-down, navigasi menegak bar yang kelihatan hebat pada skrin pelbagai peranti pengguna mudah alih ( tablet, telefon pintar, komputer riba dan telefon bimbit).
Kami melihat contoh dan memastikan menu kami berfungsi. Kaedah ini secara amnya sangat berguna apabila menu digunakan bilangan yang besar pautan. Anda boleh mengumpulkan semua butang dengan mudah ke dalam satu panel menarik yang dibuka pada tuding.
Pertama sekali, kita perlu menandakan keseluruhan struktur utama menu kita. Kami sedang mencipta elemen navigasi, yang bermaksud ia adalah logik dan malah praktikal untuk menggunakan elemen HTML5, teg dengan kelas dengan nama yang sama diberikan kepadanya, untuk seterusnya. Pemformatan CSS gaya, serta mencipta dan kedudukan mutlak drop-down bar navigasi. Kelas semasa menunjuk ke pautan menu aktif/semasa, penampilan yang akan kita bentuk menggunakan css.
- Rumah
- Tentang Kami
- Portfolio
- Perkhidmatan Kami
- Kenalan
Seperti yang anda lihat, menu ialah senarai ringkas yang tidak tersusun dengan bilangan pautan tertentu. Bilangan mata mungkin berbeza, tetapi masih tidak perlu kecoh, semuanya dalam had yang munasabah.
Selanjutnya, sebelum kita pergi terlalu jauh, saya ingin mengingatkan anda dan menerangkan kepada mereka yang tidak tahu bahawa HTML5 dan pertanyaan media tidak disokong oleh versi IE yang lebih lama daripada 9 (tidak mengejutkan sama sekali). Untuk mengelakkan sakit kepala pada masa hadapan dan melakukan segala-galanya dengan betul, ada skrip khas dan, dengan bantuannya kita boleh menyelesaikan masalah keserasian dengan menyambungkannya secara berhemat ke dokumen dalam bahagian tersebut.
Semua. Kami telah menyusun markah asas, kelas telah didaftarkan, dan tongkat telah ditambah. Sekarang mari kita teruskan untuk menentukan gaya item menu, membentuk penampilan dan menjadikan menu kita benar-benar menyesuaikan diri.
Set Gaya menu CSS di bawah skrin monitor komputer meja, agak standard, saya tidak nampak gunanya membincangkan butiran. Saya hanya ingin menarik perhatian anda kepada fakta bahawa saya menetapkan display:inline-block dan bukannya float:left element
- .
- mata */ margin : 0 ;
- ) .nav .current ( paparan : blok ; /* tunjukkan hanya aktif pada masa ini
- Skrin @media dan (lebar maks: 600px) ( .nav ( kedudukan: relatif; ketinggian min: 40px; ) .nav ul ( lebar: 180px; padding: 5px 0; kedudukan: mutlak; atas: 0; kiri: 0 ; sempadan: pepejal 1px #aaa; latar belakang: #FAFAFA url(imej/icon-menu.png) tiada ulangan 10px 11px; 3); .nav li ( paparan: tiada; /* sembunyikan semua
- mata */ margin: 0;
) .nav .current ( paparan: blok; /* tunjukkan hanya aktif pada masa ini
item */ ) .nav a ( paparan: blok; padding: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( latar belakang: tiada; warna: #666; ) /* apabila menuding pada item menu * / .nav ul:hover ( background-image: none; ) .nav ul:hover li ( display: block; margin: 0 0 5px; ) .nav ul:hover .current ( background: url(images/icon-check. png) tiada ulangan 10px 7px; ) /* menu responsif di sebelah kanan */ .nav.kanan ul ( kiri: auto; kanan: 0; ) /* menu responsif di tengah */ .nav.center ul ( kiri: 50%; margin-kiri: -90px ) )
Terjemahan dan penyesuaian percuma: Andrey /driver/Salah satu masalah biasa apabila membuat reka bentuk laman web asas untuk telefon bimbit- Ini menu navigasi. Jika tapak mempunyai banyak bahagian dan halaman, maka ini sepatutnya membuat anda berfikir tentang membuat menu padat, paling ringkas, tetapi pada masa yang sama berfungsi dan berkesan. Kemungkinan besar, menu anda akan mempunyai beberapa baris, atau butang mungkin terletak di atas satu sama lain. Ia tidak kelihatan sangat estetik. Dalam tutorial ini kita akan melihat bagaimana untuk menggunakan jQuery Anda boleh meletakkan item menu secara rasional dan memastikan navigasi pantas.
Masalah.Tangkapan skrin di bawah menunjukkan masalah biasa semasa membina menu. Sekiranya terdapat hanya empat item dalam menu, maka ia akan terletak pada tahap yang sama, tetapi jika terdapat lima atau enam butang, maka menu akan berubah menjadi beberapa baris, yang agak tidak praktikal.
Penyelesaian. 1) Menu lungsur.
http://bitfoundry.ca/Ini adalah salah satu penyelesaian yang paling biasa. Tetapi terdapat juga perangkap di sini. Tidak mustahil untuk menggunakan gaya pada elemen menu sedemikian. jadual CSS. Tetapi anda boleh menggayakan menu menggunakan pemalam Terpilih, jika tidak gaya lungsur turun akan kekal lalai. Selain itu, senarai juntai bawah kelihatan agak tidak profesional. Walaupun, jika anda berpuas hati dengan pilihan ini, maka anda boleh belajar bagaimana untuk melaksanakan menu sedemikian di tapak web anda menggunakan teknik CSS.
2) Blok
http://www.smashingmagazine.com/
http://informationarchitects.net/Satu lagi keluar cepat dari kedudukan, tetapkan setiap item menu individu dalam bentuk blok yang disusun secara menegak. Tetapi kaedah ini mengambil ruang dari tajuk. Jika terdapat banyak item pada menu, maka pilihan ini pasti tidak sesuai dengan anda. Tidak mungkin pembaca akan menikmati menatal senarai panjang item sehingga mereka menemui kandungan tapak yang mereka perlukan.
http://forefathersgroup.com/
http://loveandluxesf.com/
3) Ikon menu.
http://www.londonandpartners.com/Penyelesaian terkini ini ialah menggunakan ikon/butang untuk menogol navigasi. Ia adalah yang paling optimum untuk pengguna tapak. Kaedah ini juga bagus kerana ia menjimatkan ruang (yang sangat penting untuk telefon bimbit), dan juga memberikan kebebasan sepenuhnya untuk pemodelan dalam CSS. Selain itu, simbol menu boleh direka bentuk untuk dipadankan dengan tema keseluruhan tapak.
http://www.sony.com
http://twitter.github.com/bootstrap/
http://zync.ca/
Menu mudah alih dengan jQuery()
http://www.paulrobertlloyd.com/Tutorial ini akan menunjukkan kepada anda cara membuat menu navigasi tapak mudah alih yang diterangkan di atas menggunakan jQuery. jQuery akan digunakan untuk menambah simbol menu dan suis navigasi. Teknik ini tidak memerlukan sebarang teg HTML tambahan.
Di bawah ialah kod HTML ringkas untuk menu yang digunakan dalam tutorial ini:
< nav id = "nav-wrap" >
< ul id = "nav" >
< li > < a href = "#" >Butang< / a > < / li >
< li > < a href = "#" >Butang< / a > < / li >
< / ul >
< / nav >
kod jQuery
Letakkan salinan jQuery dan fungsi di bawah antara tag< head >. Fungsi ini akan menambah tag< div id = "menu-icon" в тег < nav id = "#nav-wrap" >. Dan apabila anda mengklik pada elemen/ikon “MENU”, menu akan dibuka dengan elemen tambahan.
jQuery(dokumen).ready(function($)( /* prepend menu icon */ $("#nav-wrap").prepend("Menu"); /* togol nav */ $("#menu-icon" ).on("klik", function())( $("#nav").slideToggle(); $(this).toggleClass("aktif"); ));
jQuery(dokumen). sedia(fungsi($)(
/* sediakan ikon menu */
$("#nav-wrap") ). prepend("Menu");
/* togol nav */
$("#menu-icon"). pada ("klik", fungsi () (
$("#nav" ) . slideToggle();
$(ini). toggleClass("aktif");
} ) ;
} ) ;
Kod HTML akan kelihatan seperti di bawah (untuk melakukan ini, klik "Lihat Elemen" atau lihat kod yang dijana)
Menu
< nav id = "nav-wrap" >
< div id = "menu-icon" >Menu< / div >
< ul id = "nav" >
helo! Kami terus menganalisis pemalam yang paling menarik dan paling berguna untuk tapak WordPress! Hari ini anda akan belajar cara menambah menu mudah alih ke tapak web anda. Anda boleh menyesuaikan menu yang hanya akan dipaparkan pada peranti mudah alih Oh. Anda akan dapat menentukan saiz skrin maksimum di mana menu mudah alih akan dipaparkan. Anda boleh membuat dua menu, dengan kiri dan dengan sebelah kanan skrin, anda boleh menentukan menu tapak yang berasingan untuk setiap menu. Anda boleh menyesuaikan rupa menu, warna, saiz, padding, dsb.
Anda boleh memasang pemalam terus dari Panel pentadbir WordPress. Pergi ke halaman: Plugins – Add New, masukkan nama plugin dalam borang carian, tekan Enter, pasang dan aktifkan plugin.
Mari lihat tetapan:
Pilihan Umum.
– Dayakan Menu Mudah Alih, anda boleh mendayakan atau melumpuhkan menu mudah alih.
– Dayakan Menu Pengepala Kiri, dayakan atau lumpuhkan menu kiri.
– Dayakan Menu Pengepala Kanan, dayakan atau lumpuhkan menu yang betul.
– Pencetus Lebar, nyatakan pada apa saiz maksimum Menu mudah alih akan dipaparkan.
– Sembunyikan Elemen, sembunyikan sebarang elemen daripada tapak apabila memaparkan menu mudah alih. Anda boleh menentukan kelas CSS atau ID elemen.
– CSS tersuai, anda boleh menentukan gaya CSS anda sendiri untuk menu.
– Simpan Perubahan, simpan perubahan.
Pilihan Pengepala.
– Logo Laman, anda boleh memilih apa yang akan dipaparkan pada tapak mudah alih. Logo atau Teks.
– Logo, klik pada medan untuk memuatkan logo.
– URL Logo Alternatif, anda boleh menentukan URL logo alternatif.
– Ketinggian Pengepala, anda boleh menentukan ketinggian menu.
– Margin Atas Logo, saiz inden, dari bahagian atas tapak ke logo.
– Teks Pengepala, anda boleh menentukan teks yang akan dipaparkan dalam pengepala jika anda memilih untuk memaparkan teks pada permulaan.
– Saiz Fon Teks Pengepala, anda boleh memilih saiz teks pengepala.
– Simpan perubahan.
Pilihan Menu Kiri.
– Menu Kiri, pilih menu tapak untuk menu kiri.
– Ikon Menu, anda boleh memilih ikon atau imej untuk menu.
– Imej Ikon Menu, klik pada medan untuk memuatkan ikon atau imej.
– Lebar Panel Menu Kiri, anda boleh menentukan saiz lebar panel menu kiri.
– Icon Top Margin, margin atas daripada ikon.
– Ikon Margin Kiri, lekukan dari sebelah kiri ke ikon.
– Simpan perubahan.
Pilihan Menu Kanan. Tetapan di sini adalah sama seperti menu kiri. Berikut ialah tetapan untuk menu yang betul.
Pilihan Warna.
– Warna Latar Belakang Pengepala, anda boleh memilih warna untuk pengepala menu.
– Warna Teks Pengepala, anda boleh memilih warna untuk teks tajuk menu.
Pilih warna untuk menu kiri dan kanan (tetapan yang sama).
– Warna Ikon Menu Kiri, warna ikon.
- Warna Latar Belakang, warna latar belakang menu.
– Warna Teks, warna teks menu.
– Warna Hover Latar Belakang, warna latar belakang apabila melayang.
| /* menu */ .nav ( margin : 20px 0 ; ) .nav ul ( margin : 0 ; padding : 0 ; ) .nav li ( margin : 0 5px 10px 0 ; padding : 0 ; list-style : none ; paparan : inline-block ; * display : inline ; /* ie7 */ ) .nav a ( padding : 3px 12px ; text-decoration : none ; color : #999 ; line-height : 100% ; ) .nav a : hover ( color : #000 ; ) .nav .semasa a ( latar belakang : #999 ; warna : #fff ; jejari sempadan : 3px ; ) |
/* menu */ .nav ( margin: 20px 0; ) .nav ul ( margin: 0; padding: 0; ) .nav li ( margin: 0 5px 10px 0; padding: 0; list-style: none; paparan: inline-block; *display:inline; /* ie7 */ ) .nav a ( padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; ) .nav a:hover ( color : #000; ) .nav .current a (latar belakang: #999; warna: #fff; jejari sempadan: 3px; )
Bahagian .nav a:hover dan .nav .current a bertanggungjawab untuk menukar warna pautan dan latar belakang item menu aktif/semasa, masing-masing. Saya tidak cuba untuk menjadi terlalu pandai dalam contoh ini, saya melakukan segala-galanya dalam semangat minimalism, apabila anda melayang di atas pautan warna berubah, teks menjadi warna hitam: #000; , dan untuk item aktif saya tambah latar belakang: #999; , menggantikan warna fon dengan warna putih: #fff; dan bulatkan tepi sedikit jejari sempadan: 3px; pada butang yang terhasil. Anda boleh berkhayal dan mencuba dalam hal ini sesuka hati anda.
Jajarkan tengah dan kananSeperti yang saya nyatakan di atas, kita boleh menukar penjajaran item navigasi menggunakan sifat penjajaran teks, untuk melakukan ini, tambahkan beberapa baris pada kod CSS:
| /* menu di sebelah kanan */ .nav .right ul ( text-align : right ; ) /* menu di tengah */ .nav .center ul ( text-align : center ; ) |
/* menu di sebelah kanan */ .nav.right ul ( text-align: right; ) /* menu di tengah */ .nav.center ul ( text-align: center; )
Menyesuaikan menuKeseronokan bermula. Menu kami pada pada peringkat ini Ia mempunyai format getah (lebar ditentukan sebagai peratusan) dan masih belum adaptif sama sekali. Mula mengubah saiz skrin dan anda akan melihat bahawa menu terbina dalam kekacauan butang.
Kami akan membetulkan keadaan menggunakan pertanyaan media. Pada titik aplikasi pertanyaan media pada 600px, tetapkan kedudukan relatif kedudukan: relatif; untuk elemen nav supaya kita boleh letak senarai menu nanti
- di atas dalam kedudukan kedudukan mutlak: mutlak; . Menggunakan paparan: tiada harta, kami akan menyembunyikan semua item menu li, meninggalkan hanya yang aktif detik semasa pautan dengan kelas semasa, memberikan mereka paparan: harta blok
Apabila anda menuding pada bar navigasi berkumpulan, semua item menu hendaklah ditunjukkan sebagai senarai lungsur turun untuk ini, kami mentakrifkan peraturan .nav ul:hover li dengan kod fungsi>paparan: blok . Untuk item aktif/semasa kami menambah ikon untuk menyerlahkannya daripada yang lain.
Jika anda perlu mengalihkan menu ke kanan atau tengah, gunakan sifat kedudukan kiri dan kanan untuk senarai ul menu kami.
| skrin @media dan (lebar maksimum: 600px) (.nav (kedudukan: relatif; ketinggian min: 40px;).nav ul (lebar: 180px; padding: 5px 0; kedudukan: mutlak; atas: 0; kiri: 0 ; sempadan : padu 1px #aaa ; latar belakang : #FAFAFA url (imej/icon-menu.png ) tiada ulangan 10px 11px ; ; .nav li ( paparan : tiada ; /* sembunyikan semua |
item */ ) .nav a ( paparan : blok ; padding : 5px 5px 5px 32px ; text-align : left ; ) .nav .current a ( background : none ; color : #666 ; ) /* apabila menuding pada item menu * / .nav ul: hover ( background-image : none ; ) .nav ul: hover li ( display : block ; margin : 0 0 5px ; ) .nav ul : hover semasa ( background : url ( images/icon-check. png ) tiada ulangan 10px 7px ; ) /* menu responsif di sebelah kanan */ .nav .kanan ul ( kiri : auto ; kanan : 0 ; ) /* menu responsif di tengah */ .nav .center ul ( kiri : 50% ; ) margin-kiri : -90px )
