Yang juga tertarik, Anda dapat melihat cara sebelumnya dengan menggunakan CSS.yang dijelaskan dalam artikel -
Sekarang untuk bisnis. Seperti pada artikel terakhir, pertama-tama, mari kita tulis Html. Kode menu kami. Kode ini seperti pada artikel itu sehingga tidak ada kebingungan dan lebih mudah dimengerti. Menu dengan dua item dan keduanya memiliki submenu.
Jika Anda memiliki garis atau serupa, yang sebelumnya telah menghubungkan perpustakaan, maka Anda tidak boleh melakukannya lagi.
Dalam string kedua skrip, Anda menentukan IDI menu kami. Jika Anda menggunakannya metode ini Ke menu Anda sendiri, maka secara alami ubah nama menjadi milik Anda. DI kasus ini ini adalah - #Slow_nav..
Anda juga dapat menyesuaikan waktu animasi. Skrip ini untuk pembukaan dan penutupan adalah 400 milidetik, ini 0,4 detik. Jika Anda ingin mengubah ke yang lebih besar atau lebih kecil.
Langkah terakhir, tambahkan gaya. Mereka sangat mirip dengan gaya dari artikel masa lalu, tidak ada properti CSS. Animasi.
#Slow_nav\u003e UL (lebar: 500px; margin: 25px auto 0;) #slow_nav\u003e ul\u003e li (daftar-gaya: tidak ada; display: inline-blok; Posisi: 0;) #slow_nav a (Text- Dekorasi: tidak ada;) #slow_nav\u003e ul\u003e li\u003e a (font-ukuran: 18px; padding: 5px; latar belakang-warna: # 333; warna: #fff;) #slow_nav li ul (posisi: mutlak; tidak ada; teks-align: pusat; top: 15px; ukuran font: 15px; kiri: 0; margin: 0; padding: 0; Tampilan: #slow_nav Li (warna-warna: # 333; Bawah: 1px solid # 888;) #slow_nav li ul: anak-anak terakhir (border bottom: none;) #slow_nav li ul li a (padding: 5px 12px; Warna: blok;) #slow_nav Li ul LI: hover (latar belakang-warna: # 444;) #slow_nav Li ul Li: anak pertama (margin-top: 25px; Posisi: relatif;) #slow_nav Li ul Li: Anak Pertama: "Sebelum (Posisi:"; Posisi : Absolut; lebar: 1px; tinggi: 1px; batas: 5px padat transparan; border-bottom-color: # 333; kiri: 10px; -10px;)
Juga ditambahkan ke gaya garis baruDengan mana skrip bekerja dengan benar. Untuk elemen - #Slow_nav li ul. Properti didefinisikan tampilan: Tidak ada;. Jika tidak ditambahkan, maka menu drop-down pada awalnya akan terlihat dan hilang hanya setelah kursor di atasnya. Semua gaya lain sebagai artikel sebelumnya.
Seperti metode masa lalu, ini dapat diterapkan tidak hanya untuk menu mandiri, tetapi juga ke menu dinamis yang sama yang dibuat oleh sistem manajemen, seperti WordPress.. Untuk melakukan ini, Anda perlu menyesuaikan gaya dan semua. Artinya, kode HTML pertama tidak perlu digunakan, hanya gaya. Dalam gaya Anda perlu mengganti nama Iyidi #slow_nav pada apa yang akan bersama Anda, well, dimungkinkan untuk memperbaiki sesuatu dengan trifles. Saya tidak akan berhenti secara detail. Untuk setiap kasus, Anda memerlukan pendekatan pribadi, jadi saya minta maaf 🙂
Itu saja, terima kasih atas perhatiannya. 🙂.
Dalam artikel ini kita akan mengembangkan yang sederhana menu drop down Menggunakan jQuery. Sebagai permulaan, lihat file demo. Kami berharap Anda bahkan sedikit tahu dasar-dasar jQuery dan CSS. Aspek-aspek utama dari membuat menu drop-down ini adalah penggunaan CSS: Position, Top, Kiri, Z-Index.
Dengan menggunakan parameter ini, kami dapat yakin bahwa menu kami akan muncul tepat di bawah tautan ke mana kursor diposting, dan itu pasti akan menjadi elemen lain. Kami juga akan membuat menu untuk ditampilkan ketika melayang kursor, dan menghilang ketika kursor ditugaskan ke samping. Untuk mengimplementasikan peristiwa ini, kami akan menggunakan jQuery: fungsi mouseenter dan mouseleave. Dan hanya itu yang perlu kita buat menu drop-down!
File akhir file demo dan tautan unduhan
Kode HTML.
Lihat kode HTML dari menu drop-down:
Seperti yang Anda lihat, di sini kita akan menggunakan daftar yang tidak teratur untuk mengimplementasikan item menu. Setiap referensi menu ditugaskan kelas menu drop-down, dan menu drop-down itu sendiri ditutupi oleh kelas sub-link. Nama kelas akan digunakan jQuery untuk menentukan menu mana yang perlu Anda tampilkan.
Kode CSS.
Lihat kode CSS:
/ * CSS untuk menu dropdown mulai * /
Ule
{
Daftar-Gaya: Tidak Ada;
Padding: 0px;
MARGIN: 0PX
}
uL LI.
{
Tampilan: inline;
Float: kiri;
}
ul Li A.
{
Warna: #ffffff;
Latar Belakang: # 990E00;
Margin-Right: 5px;
Font-weight: Bold;
Ukuran font: 12px;
Font-Family: Verdana;
Dekorasi teks: tidak ada;
Tampilan: blok;
Lebar: 100px;
Tinggi: 25px;
Tinggi garis: 25px;
Teks-Align: Center;
-WebKit-Border-Radius: 5px;
-MOZ-BORDER-RADIUS: 5px;
Perbatasan: 1px solid # 560E00;
}
uL LI A: Arahkan kursor
{
Warna: #cccccc;
Latar Belakang: # 560E00;
Font-weight: Bold;
Dekorasi teks: tidak ada;
Tampilan: blok;
Lebar: 100px;
Teks-Align: Center;
-WebKit-Border-Radius: 5px;
-MOZ-BORDER-RADIUS: 5px;
Perbatasan: 1px solid # 000000;
}
ul li.sublinks A.
{
Warna: # 000000;
Latar belakang: # f6f6f6;
Border-bottom: 1px solid #CCCCCC;
Font-weight: Normal;
Dekorasi teks: tidak ada;
Tampilan: blok;
Lebar: 100px;
Teks-Align: Center;
Margin-TOP: 2px;
}
uL LI.Sublink A: Arahkan kursor
{
Warna: # 000000;
Latar belakang: # ffefc6;
Font-weight: Normal;
Dekorasi teks: tidak ada;
Tampilan: blok;
Lebar: 100px;
Teks-Align: Center;
}
ul li.sublinks.
{
Tampilan: Tidak ada;
}
/ * CSS untuk menu dropdown end * /
Sebagian besar kode CSS digunakan untuk memformat menu (Anda dapat memberi penampilan Menu atas kebijaksanaannya sendiri), tetapi di sini ada juga beberapa poin penting:
1 - Menghapus tab dengan gaya daftar: Tidak ada;
2 - Kita tahu bahwa daftar adalah elemen blok dan selalu ditampilkan dalam urutan vertikal. Untuk membuatnya secara horizontal, kami melampirkan mereka parameter elemen huruf kecil dan menyelaraskannya di sisi kiri menggunakan kode:
Tampilan: inline;
float: kiri;
3
- Secara default, tautan adalah elemen huruf kecil. Kami kembali ke elemen-elemen blok menggunakan tampilan: blok (jadi kami sekarang dapat menanyakan nilai lebar).
4 - Sembunyikan semua menu melalui:
Ul li.sublinks.
{
tampilan: Tidak ada;
}
jQuery.
Mempersiapkan waktu sebelumnya ketika menu drop-down diimplementasikan oleh kasar kode JavaScriptSelain itu, ada banyak kode yang tidak perlu. Tapi hari ini semua yang kita butuhkan adalah jQuery:
$ (Fungsi () (
Submenu.css ((
Posisi: "Absolute",
Zindex: 1000.
});
Submenu.stop (). Slinding (300);
$ (ini) .slideup (300);
});
});
});
Hal yang sangat menarik dan sederhana. Mari kita jelaskan kepada Anda cara kerjanya. Untuk memulai, dan seperti biasa, kami membahas kode kami ke pengontrol jQuery:
$ (Fungsi () (
...
});
Kode kami diaktifkan ketika kursor mouse tidak terlihat (fungsi mouseenter) ke item yang kelas menu drop-down ($ (". Dropdown") ditugaskan)). Dalam kasus kami, ini adalah tautan ke menu:
$ (Fungsi () (
$ ("Dropdown"). Mouseenter (fungsi () (
........
});
});
Mari kita pastikan bahwa kita menyembunyikan (menyembunyikan ()) semua menu terbuka sebelumnya sebelum kursor mouse melempar tautan berikut:
$ (". SUBLINK"). Berhenti (Salah, Benar) .hide ();
Perhatikan fungsi berhenti yang membantu kami hanya menampilkan satu menu drop-down pada saat kursor mouse bergerak di sepanjang tautan yang berbeda ke menu. Jika kami tidak menggunakan fungsi ini, setiap menu drop-down akan tetap terbuka sampai kami sepenuhnya menggeser kursor mouse dari menu. Ini akan membuat beberapa lapisan, jadi kita harus menghindari ini. Selanjutnya, kami mengambil menu drop-down yang sedang dibuka dan menetapkan variabel:
Var submenu \u003d $ (ini) .parent (). Berikutnya ();
Inilah yang akan berada dalam kode HTML:
Ketika kursor mouse ada di tautan dengan kelas dropdown, kami kembali menggunakan orang tua () dan berhenti di "Li", dan kemudian dengan berikutnya (), kami ternyata berada di menu drop-down yang diinginkan, dan "Li "Sudah dengan kelas sub-tautan (subninks). Dengan demikian, jQuery membuat kami proses untuk menemukan apa yang ditampilkan menu drop-down ketika kursor mouse berada pada tautan tertentu.
Submenu.css ((
posisi: "Absolute",
tOP: $ (ini) .Offset (). Top + $ (ini). REIGHT () + "PX",
kiri: $ (ini) .Offset (). Kiri + "PX",
zindex: 1000.
});
Kode ini sangat penting, karena menjamin kami bahwa menu drop-down ditampilkan tepat di bawah referensi tertentu. Jika posisi dipamerkan pada absolut, kami dapat memposisikan item di area mana pun dari halaman kami. Selanjutnya, kami mendefinisikan posisi atas tautan ke mana kursor melayang dengan $ (ini). Fffset (). Atas (Ini mengacu pada item menu saat ini yang diinduksi oleh kursor), dan tambahkan ke ketinggian. Agar menu ditampilkan dengan tepat referensi. Sesuatu seperti itu dilakukan dengan parameter kiri. Kemudian kami menggunakan Z-index untuk yakin bahwa menu kami akan ditampilkan di atas elemen lain.
Submenu.stop (). Slinding (300);
Tentu saja, Anda dapat menggunakan opsi lain untuk jenis animasi fadein, animasi dengan gaya Anda sendiri dan sebagainya.
Sekarang Anda perlu mengalihkan perhatian dari konsep menampilkan menu drop-down, dan membuatnya bersembunyi. Kami membutuhkan kode kutipan ini:
Submenu.mouseleave (fungsi () (
$ (ini) .slideup (300);
});
Untuk menyembunyikan menu drop-down, kami menggunakan SlideUp, antonim ke slide. Pertimbangkan fakta bahwa submenu adalah variabel yang telah kami buat untuk menentukan menu drop-down spesifik.
Dengan demikian, kami memiliki drop-down tunggal yang menarik menu di jquery..
Untuk menulis navigasi itu sendiri dalam bentuk menu drop-down vertikal pada jQuery dengan daftar drop-down subkategori, perlu memahami prinsip pengoperasian mekanisme ini. Tetapi pertama-tama kita akan menganalisis struktur navigasi:
Navigasi
Seperti yang telah Anda tebak, menu drop-down kami dibangun berdasarkan daftar yang ditandai. Saat melayang kursor mouse pada tag
- tes 1.
- tes 2.
- tes 3.
- tes 4.
Tapi bagaimana Anda bertanya? Ya, semuanya sangat sederhana. Untuk memulai, mari kita berurusan dengan tabel gaya daftar navigasi kami, itu akan terlihat seperti ini:
Tubuh (Latar Belakang: RGB (244, 244, 244); Font-Face: Verdana; Font-Weight: 100;) / * --- Navigasi --- * / #menu (lebar: 200px; 2px;) #menu li (daftar gaya daftar: tidak ada;) .menu (posisi: relatif; latar belakang: Cokelat; latar belakang: -Moz-linear-gradien (atas, RGB (198, 255, 245), # 2AC4B3), # 2AC4B3), # 2AC4B3 ; Latar belakang: -webkit-linear-gradient (top, rgb (198, 255, 242), # 2ac4b3); latar belakang: -O-linear-gradien (atas, RGB (198, 245, 242), # 2AC4B3); : 1px solid # 2ac4b3;) .menu: hover (latar belakang: # 00c; latar belakang: -moz-linear-gradien (atas, RGB (230, 230, 230), # 0CBKit-linear-gradien ( TOP, RGB (230, 230, 230), # 0CBFAB); Latar Belakang: -O-linear-gradien (atas, RGB (230, 230, 230), # 0cbfab);) .Menu Rentang (lebar: 11px; 11px; Tampilan: blok; Posisi: absolut; Top: 8px; kanan: 10px; cursor: pointer;) .menu ul (lebar: 150px; margin: 1px; kiri: -1px; 198px;) .menu ul Li (Latar Belakang: Cokelat; Latar Belakang: -Moz-linear-gradien (atas, RGB (198, 255, 242), # 2AC4B3); Latar Belakang: -WebKit-linear-gradien (atas, RGB (198, 255, 242), # 2AC4B3); Latar Belakang: -O-linear-gradien (atas, RGB (198, 255, 242), # 2AC4B3); Batas: 1px solid #fff; ) .Menu ul li: hover (latar belakang: # 00c; latar belakang: -moz-linear-gradien (atas, rgb (230, 230, 230), # 0cbfab); latar belakang: -webkit-linear-gradien (atas, RGB (TOP, RGB ( 230, 230, 230), # 0CBFAB); latar belakang: -o-linear-gradien (atas, RGB (230, 230, 230), # 0cbfab);) .menu a (padding: 5px; Text- Dekorasi: Tidak ada; Warna: putih;) .menu A: Arahkan (Warna: putih;) / * --- end --- * /
Dari lembar gaya, dapat dilihat bahwa daftar drop-down yang awalnya tidak disembunyikan, tetapi saat ini kami akan dikoreksi menggunakan:
$ (DOKUMEN) .READY (FUNGSI () ($ ("MENU UL"). Sembunyikan (); $ ("menu"). CSS ("Latar Belakang", "URL (" down.png ")"). ("# Menu li"). Hover (fungsi () ($ (ini). Anak-anak ("ul"). Tampilkan (); / * setara $ ("ul", ini) .show (); * / $ (); Ini) .Find ("span"). CSS ("Latar Belakang", "URL (" Right.png ")"); / * Setara $ ("span", ini) .css ("Latar Belakang", "URL (" Right.png ")"); * /), Fungsi () ($ (ini). Anak-anak ("ul"). Sembunyikan (); / * setara $ ("ul", ini) .hide (); / * $ (ini) .find ("span"). CSS ("latar belakang", "url (" down.png ")"); / * $ ("span", ini) .css ("latar belakang", "URL (" Latar Belakang "," "Down.png") "); * /))))
Sekarang kita akan menganalisis kode jQuery dari menu drop-down, karena Mungkin seseorang tidak akan sepenuhnya dipahami. Pada awalnya, konstruksi berikut ini diresepkan:
$ (Dokumen) .Ready (Fungsi () ())
Ini adalah perintah yang diresepkan yang perlu dilakukan setelah unduhan halaman penuh. Ini dilakukan agar tidak ada jenis kesalahan yang berbeda, jika tidak mungkin menemukan objek karena fakta bahwa itu basi belum dimuat.
$ ("Menu ul"). Sembunyikan ();
Apa artinya entri ini? Desain "$ ()" memungkinkan Anda memilih elemen. Akibatnya, pada awalnya, kita perlu menyembunyikan daftar drop-down kami. Kami mengambil desain "$ ()" dan menulis di dalamnya objek yang Anda minati. Dalam kasus kami, objek ini akan daftar Dengan "menu" kelas. Selanjutnya, kami meresepkan metode "Sembunyikan ()", yang memungkinkan Anda menyembunyikan objek yang Anda minati.
$ (". Rentang menu"). CSS ("Latar Belakang", "URL (" down.png ")");
Apa yang dia lakukan? Dia mencari tag untuk elemen induk yang ditugaskan kelas "menu" dan, menggunakan metode "CSS" ("latar belakang", "url (" down.png ")") ", menetapkan" latar belakang " Style Property "URL (" Down. PNG ")". "down.png" adalah ikon yang menunjukkan bahwa daftar dapat dibuka.
Lalu ada desain, yang akan mengungkapkan daftar kami, sepertinya ini:
$ ("# Menu li"). Hover (fungsi () ($ (ini). Anak-anak ("ul"). Tampilkan (); $ (ini) .Find ("span"). CSS ("Latar Belakang", " URL ("Right.png") ");), Fungsi () ($ (ini). Anak-anak (" ul "). Sembunyikan (); $ (ini) .ce (" span "). CSS (" Latar Belakang " , "URL (" downg ")");)
Kami mencari tag untuk elemen induk yang ditugaskan id \u003d "menu". Berikutnya adalah metode "hover" dan dalam tanda kurung dua fungsi. Fungsi pertama akan dilakukan ketika Anda mengarahkan kursor mouse, dan yang kedua untuk dieksekusi jika kursor mouse meninggalkan item yang Anda minati.
Fungsi pertama dieja:
$ (ini). anak-anak ("ul"). Tampilkan (); $ (ini) .find ("span"). CSS ("Latar Belakang", "URL (" Right.png ")");
Desain "$ (ini)" berarti bahwa kami tertarik pada item yang kami saat ini Membawa (ini dari Inggris. Ini). Dan kami membawa tag
Setelah itu, tag kami mencari keturunan, yaitu: tag dan dia memiliki latar belakang ke ikon lain.
Setelah itu, fungsinya diresepkan, yang melakukan segalanya, seperti awalnya, setelah kursor mouse meninggalkan item daftar:
Fungsi () ($ (ini). Anak-anak ("ul"). Sembunyikan (); $ (ini) .Find ("" span "). CSS (" Latar Belakang "," URL ("downg") ").
Untuk membuat kode tertulis pada jQuery dan menu drop-down kami bekerja dengan benar, Anda perlu mengunduh perpustakaan dari jQuery.com dan menghubungkannya, berbicara setelah label pembuka
Garis.Itu dia! Sebagai kesimpulan, saya ingin mencatat bahwa jika situs Anda cukup menyenangkan, maka ada kemungkinan bahwa skrip akan mulai terlambat (situs akan memuat untuk waktu yang lama) dan pengguna akan melihat seberapa terlebih dahulu mengungkapkan sepenuhnya, tetapi hanya jangat saat itu Itu, Anda lihat, sangat jelek. Oleh karena itu, perlu untuk menanggung semua perintah jQuery untuk desain ini: "$ (dokumen). Sudah (fungsi ())". Itu akan terlihat seperti ini:
$ (Dokumen) .Ready (fungsi () ()) $ (". Menu ul"). Sembunyikan (); $ (". Rentang menu"). CSS ("Latar Belakang", "URL (" down.png ")"); $ ("# Menu li"). Hover (Fungsi ("(" UL) ");), Fungsi () ($ (ini). Anak-anak (" ul "). Sembunyikan (); $ (ini) ");))
Menghubungkan skrip kami harus ditransfer dari tag
Untuk yang termudah, di depan tag penutupanAtau Anda dapat menghubungkan skrip segera setelah daftar yang ditandai.(Menjatuhkan: 314)
Dengan bantuan JQuery- Classic, artikel tentang topik ini ditulis. Saya mencoba sedikit lebih mempersulit tugas, menambahkan kemampuan untuk tetap partisi ke menu terbuka (atau ditutup, tergantung pada pemilihan pengguna) saat bergerak melalui situs.
Untuk mengatasi tugas ini, saya memutuskan untuk menggunakan Plugin JQuery Cookie. Keuntungan dari plugin ini adalah bahwa operasi dilakukan pada sisi klien, yang pada gilirannya, mengurangi beban di server. Minus- Jika pengguna dinonaktifkan dengan JS, plugin tidak akan berfungsi. Tapi pilihan ini Saya tidak mempertimbangkan, karena kemudian seluruh titik menu drop-down menghilang. Jadi, mari kita mulai.
Untuk memulai, kita perlu menghubungkan kerangka jQuery itu sendiri dan plugin jQuery. Kue kering:
Kode: html.
Markup lebih lanjut. Ini akan terlihat seperti daftar sederhana, tidak ada yang supranatural. Satu-satunya catatan itu di tag
Harus ada judul, ketika mengklik menu mana yang akan jatuh:
Kode: html.
Nah, dan tanpa batas waktu. Sekarang adalah yang paling menarik. Dalam kode saya akan menambahkan sedikit komentar, agar bisa dimengerti, Chunchach
Kode: js.
$ (dokumen) .Ready (Fungsi () (
Jika ($. Cookie ("num_open_ul")) (// periksa apakah ada entri dalam cookie
Jika ($. Cookie ("num_open_ul")! \u003d 0) (// dan catatan ini tidak sama dengan 0
var number_eq \u003d parseint ($. cookie ("num_open_ul") - 1);
$ ("
}
};
$ ("# navigasi H2.Navigation_head"). Klik (fungsi () (// Saat mengklik, fitur ini akan berfungsi
Jika (! $ (ini) .Next (). adalah (": terlihat")) (
$ ("Div.Navigation_body"). saudara kandung ("div.navigation_body"). SlideUp (500); // Jika orang lain telah membuka, menutup semua kecuali saat ini
}
$ (ini) .next ("div.navigation_body"). slidetoggle (500) .ciBlings ("Div.Navigation_body"). SlideUp (500);
$ (ini) .toggleclass ("active_navigation"). saudara kandung ("# navigasi H2.Navigation_head"). RemoveClass ("active_navigation"); // buka kelas tambahan untuk mengubah gaya
SUDAHOUT (FNCOOKIE, 600); // Rekam dalam cookie dengan penundaan, sehingga skrip berhasil menyelesaikan pekerjaan (500 MS-Speed, Delay, 600ms)
});
Fungsi fncookie () (// fungsi perekaman itu sendiri
var number_open_ul \u003d 0;
var i \u003d 0;
$ ("Div.Navigation_body"). Masing-masing (Fungsi () (
I ++;
Jika ($ (ini) .is (": terlihat")) (
Number_open_ul \u003d i;
}
$ .Cookie ("num_open_ul", Number_Open_ul, (kedaluwarsa: 3, path: "/")); // Simpan 3 hari untuk seluruh situs.
});
}
});
Artinya, sekarang, jika pengguna membuka menu, meninggalkan situs dan melanjutkan lagi setelah beberapa hari, menu masih terbuka untuk itu terbuka.
Ya, akhirnya, kami memiliki barcode kecil: Sebenarnya, gaya CSS. Anda benar-benar melakukan selera Anda, dalam contoh saya mengambil desain siap dari salah satu proyek
Kode: CSS.
#Navigasi (
Margin: 80px otomatis;
Lebar: 250px;
}
#Navigasi H2, #NAVIGAT H2.NAVIGATION_HEAD (
Ukuran font: 18px;
Font-weight: Bolder;
Latar Belakang - Warna: # FFB6C1;
Latar belakang-gambar: -webkit-gradien (linear, 50% 0,50% 100%, color-stop (0%, # ffe9e9), color-stop (100%, # ffb6c1));
Latar belakang-gambar: -webkit-linear-gradient (# ffe9e9, # ffb6c1);
Latar belakang-gambar: -Moz-linear-gradien (# ffe9e9, # ffb6c1);
Latar belakang-gambar: -O-linear-gradien (# ffe9e9, # ffb6c1);
Latar Belakang-Gambar: Linear-Gradient (# FFE9E9, # FFB6C1);
Padding: 5px 3px 6px 3px;
MARGIN: AUTO;
Posisi: Relatif;
}
#Navigasi H2.Navigation_head: Setelah (
Posisi: absolut;
Kanan: 5px;
Warna: # 550000;
Konten: "CSSB";
}
#Navigasi H2: hover, #navigation H2.Navigation_head: hover (
Kursor: pointer;
}
.Active_Navigasi (
Latar Belakang-Gambar: -WebKit-Gradient (Linear, 50% 0,50% 100%, Color-stop (0%, # ffb6c1), Color-Stop (100%, # ffe9e9)! Penting;
Latar belakang-gambar: -WebKit-linear-gradient (# ffb6c1, # ffe9e9)! Penting;
Latar belakang-gambar: -Moz-linear-gradient (# ffb6c1, # ffe9e9)! PENTING;
Background-image: -O-linear-gradient (# ffb6c1, # ffe9e9)! Penting;
Latar Belakang-Gambar: Linear-Gradient (# FFB6C1, # FFE9E9)! PENTING;
}
.Active_Navigasi: Setelah (
Posisi: absolut;
Kanan: 5px;
Konten: "CSSD"! Penting;
}
.Navigasi_body (
Tampilan: Tidak ada;
}
#Navigasi ul (
MARGIN: 0;
Padding: 0;
Daftar-gaya-daftar: tidak ada;
}
* Html #navigation ul li (
Tinggi: 1%;
}
#NAVIGATION DIV.NAVIGATION_BODY UL LI (
Margin-Left: 10px;
}
#Navigasi a (
Font-Family: "Times New Roman";
Tampilan: blok;
Warna: # 918871;
Padding: 3px;
latar belakang-warna: # ffe3e0;
Batas batas: 1px solid #fff;
Dekorasi teks: tidak ada;
}
#Navigasi A: Arahkan (
Warna: # 585858;
latar belakang-warna: # ffb6cc;
}
Jika ada yang menarik perhatian, di sini saya mencoba menggunakan properti konten: +/- Dengan menu tertutup / terbuka, tetapi Anda dapat menambahkan gambar atau desain lainnya. Lihat contoh dari apa yang kami lakukan, Anda bisa
Seperti biasa, saya siap mendengarkan pertanyaan dan mencoba menjawabnya. Semua yang terbaik, semua yang terbaik.
Dalam pelajaran ini, kami akan menunjukkan kepada Anda cara membuat menu drop-down samping untuk navigasi sederhana di situs. Menu seperti itu adalah tren populer dalam desain web modern. Jenis menu ini digunakan di banyak situs. Dengan itu, Anda dapat menyingkirkan kekacauan di halaman proyek, membuatnya lebih mudah dibaca, memfokuskan perhatian pengguna pada konten utama.
Ini adalah cara terbaik untuk mencapai minimalis tanpa faktor-faktor yang mengganggu. Hari ini kita akan membuat menu seperti itu sendiri.
Untuk membuat menu navigasi, mari kita baca pengaturan pertama:
Pertama, Anda perlu mengunduh Normalize.css dan mengkonfigurasi gaya browser default, pastikan menu terlihat sama di semua browser. Untuk menampilkan panah sebelum item menu dengan sub-klausa, kami akan menggunakan FontAnwesome. Untuk beralih kelas dalam menu, memuat jQuery dan memindahkan seluruh kode jQuery pengguna di Script.js. Tautan terakhir adalah tabel utama untuk proyek web.
Ikon hamburger.
Ikon Hamburger adalah atribut umum dari navigasi situs. Seringkali itu dibuat menggunakan font ikon, seperti FontAnwesome, tetapi dalam pelajaran ini kita akan menambahkan beberapa animasi, dan oleh karena itu kita akan membuatnya dari awal. Ikon hamburger kami adalah tag span yang berisi tiga div kelas, ditampilkan dalam bentuk strip horizontal.
Gaya terlihat seperti ini:
Tombol Toggle (Posisi: Memperbaiki; Lebar: 44px; Tinggi: 40px; Padding: 4px; Transisi: .25s; Z-index: 15;) -Bar (Posisi: Absolute; RADIUS BORDER: 2PX; Lebar: 80%; Transisi: .5s;) 0;) .toggle-button .menu-bar-middle (tinggi: 4px; latar belakang-warna: # 555; margin-top: 7px; margin-bottom: 7px; top: 4px;) .Menu-Bar -Bottom (perbatasan: 4px solid # 555; BORDER-TOP: tidak ada; top: 22px;) .button-buka .menu-bar-top (Transform: Rotate (45DEG) Terjemahkan (8px, 8px); Transisi: ) .Button-buka .menu-bar-middle (Transform: Translate (230px); Transisi: .1s Mudah-dalam; Opacity: 0;) .button-buka .menu-bar-bottom (transformasi: Rotate (-45deg) Terjemahkan (8px, -7px); Transisi: .5s;)
Ikon ini memiliki posisi tetap dan tidak mengubahnya saat menggulir halaman. Juga memiliki Z-Index 15, yang berarti bahwa itu akan selalu berlebihan elemen lainnya. Terdiri dari tiga bar, yang masing-masing berbagi gaya lainnya. Karena itu, kami akan memindahkan setiap bar ke Class.Menu-Bar. Sisa gaya pindah ke kelas terpisah. Magic terjadi ketika kita menambahkan kelas lain di tag rentang, yang terbuka. Kami menambahkannya ke menggunakan jQuery. Dengan cara berikut:
$ (DOKUMEN) .READY (FUNGSI () (VAR $ TOGGLEBUTTON \u003d $ ("TOGLE-TOMBOL"); $ TOGGLEBUTTON.ON ("klik", fungsi ($ (ini) .toggleclass ("buka tombol" ("ini) );));));
Bagi mereka yang tidak terbiasa dengan jQuery - kami menginisialisasi variabel dengan $ ToggleButton, yang berisi ikon kami. Kami menyimpannya dalam variabel tanpa perlu menggunakan JavaScript. Kemudian kami membuat pendengar acara, yang memperhitungkan klik pada ikon. Setiap kali pengguna mengklik pada ikon hamburger, pendengar acara meluncurkan fungsi Toggleclass (), yang menghidupkan kelas. Button-Open.
Ketika class.button-open ditambahkan, kita dapat menggunakannya untuk mengubah metode menampilkan item. Kami menggunakan fungsi CSS3 Terjemahkan () dan Putar () sehingga strip atas dan bawah memutar 45 derajat, dan bar tengah bergeser ke kanan dan menghilang. Inilah animasi apa yang dapat dikonfigurasi:
Menjalankan menu navigasi
Sekarang Anda memiliki ikon hamburger, mari kita buat berguna dan buat menu drop-down ketika Anda mengkliknya. Ini adalah bagaimana markup menu terlihat seperti:
Sekarang kita tidak akan memikirkan setiap gaya untuk menu ini, alih-alih fokus pada beberapa momen penting. Pertama-tama, ini adalah div dan class.menu-wrap. Lihatlah gaya-Nya:
Bungkus menu (latar belakang-warna: # 6968AB; Posisi: Tetap; Top: 0; Tinggi: 100%; Lebar: 280px; margin-kiri: -280px; font-berat: 700; Overflow: Auto ; Transisi: .25s; Z-index: 10;)
Posisinya sudah diperbaiki, jadi ketika menggulir halaman menu selalu tetap berada di posisi yang sama. Ketinggian 100% memungkinkan menu untuk menempati semua ruang vertikal pada halaman. Harap dicatat bahwa bidang margin-kiri memiliki angka negatif sama dengan lebar menu. Ini berarti bahwa menu akan hilang dari jendela tampilan. Untuk membuatnya terlihat lagi, kami membuat kelas punggler lain dengan jQuery. Kami file JavaScript Akan terlihat seperti ini:
$ (Dokumen) .Ready (fungsi () (var $ toglebutton \u003d $ (" ($ (ini) .toggleclass ("buka tombol"); $ menuwrap.toggleclass ("menu-show");)););
Tambahkan variabel $ BREWRAP lain yang berisi menu shell. Gunakan handler acara yang sama yang kami buat sebelumnya. Hanya kali ini kami beralih dua kelas: satu untuk tombol dan satu untuk shell menu. Nilai bidang kiri class.menu-show adalah 0, itu akan menambah efek bayangan.
Menu-show (margin-left: 0; box-shadow: 4px 2px 15px 1px # b9adad;)
Submenu dan tautan
Anda mungkin memperhatikan bahwa dalam salah satu item daftar ada kelas.menu-item-anak-anak, yang berisi submenu. Selain itu, tag span ditempatkan segera di bawah tautan dengan panah-menu-sideside-menu.
span memiliki :: setelah elemen pseudo dan berisi arrow FontAwesome. Secara default, submenu disembunyikan dan hanya akan terlihat saat ditekan pada panah. Inilah cara kita melakukannya dengan jQuery:
$ (DOKUMEN) .READY (FUNGSI () (var $ SIDARARROW \u003d $ ("sidebar-menu-arrow"); $ sideBararrow.Klik (fungsi ($ (ini). Slidetoggle (300);) );));
Ketika kita mengklik panah, kita memanggil fungsi yang pada gilirannya ditujukan untuk item berikutnya segera setelah rentang (dalam kasus kami itu adalah submenu) dan membuatnya terlihat. Fungsi yang kami gunakan adalah slidetoggle. Ini menyebabkan item muncul dan menghilang. Fungsi dalam contoh kami memiliki satu parameter - durasi animasi.
Item menu dalam contoh memiliki efek hover. Ini dibuat menggunakan :: setelah elemen pseudo. Kode ini terlihat seperti ini:
Menu-sidebar li\u003e A :: setelah (konten: "; tampilan: tinggi; tinggi: 0.15em; Posisi: absolut; Top: 100%; lebar: 50%; transformasi: transformasi: transplas (-50%) ; Latar belakang-gambar: linear-gradien (ke kanan, transparan 50,3%, # fffa3b 50,3%); transisi: latar belakang-posisi .2s .1s Kemudahan-keluar; ukuran latar belakang:) .menu-sidebar Li\u003e) A: Hover :: Setelah (Posisi Latar Belakang: -100% 0;)
:: Setelah elemen pseudo mengandung elemen level blok di bagian bawah setiap tautan dengan lebar penuh dan tinggi 0,15em. Lihat semua ini sebagai garis bawah. Keunikannya adalah bahwa kita tidak hanya menggunakan warna latar belakang ke garis, kita menggunakan fungsi linear-gradien () pada gambar latar belakang. Meskipun fitur ini dirancang untuk membuat gradien warna, kami dapat mengubah warna dengan menentukan minat yang diinginkan.
Menu-sidebar Li\u003e A :: Setelah (ke kanan, transparan 50,3%, # fffa3b 50,3%););););););););
Half line transparan di sini, dan babak kedua berwarna kuning. Membuat latar belakang latar belakang 200%, kami menggandakan lebar blok kami. Sekarang bagian transparan mengambil seluruh lebar referensi, dan bagian kuning bergerak ke kiri dan menjadi tidak terlihat. Kami mengubah posisi latar belakang saat melayang pada -100%. Sekarang bagian kuning menjadi terlihat, dan transparan - tersembunyi.
Alih-alih bagian yang transparan, Anda dapat menggunakan warna lain. Anda juga dapat bereksperimen dengan gradien.
Setiap elemen yang dipertimbangkan oleh AS bekerja secara keseluruhan. Anda dapat membuat menu seperti itu menggunakan situs desain apa pun dari koleksi templateMonster. Seperti yang Anda lihat, lakukan lebih mudah dari yang dapat Anda bayangkan. Semoga sukses dalam menciptakan situs profesional dan ramah pengguna!
