html menu tarik-turun. Menu tarik-turun vertikal CSS pada menu hover dan berlapis. Cara membuat menu tarik-turun horizontal

27.10.2019 Internet

Selamat siang, para pembaca yang budiman. Hari ini kita akan membahas topik cara membuat menu horizontal menggunakan html dan css". Menu, sebagai suatu peraturan, terletak di tajuk situs dan merupakan daftar tautan ke halaman paling penting, juga disebut menu utama. Pengguna akan terus-menerus mengklik tautan ini. Bagaimana Anda mengaturnya dan desain apa yang Anda berikan pada menu akan memengaruhi perilaku pengguna, konversi, pengalaman mereka secara keseluruhan di situs Anda dan, tentu saja, .

Kode HTML untuk menu horizontal

Dahulu, menu utama situs dibuat pada gambar, tabel, flash, dan mungkin yang lainnya, tetapi saat ini ada metode paling populer dan tepat untuk membuat menu menggunakan tag "daftar".

Tag digunakan untuk membuat menu.
,
dan .

Contoh penggunaan tag html untuk membuat menu pada kode di bawah ini:

rumah
Jasa
Harga
Kontak

Gaya CSS Standar untuk Menu Horizontal

ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ ) a ( text-decoration: none; /*remove underlining link text*/ ) li ( float:left; /*Letakkan daftar secara horizontal untuk mengimplementasikan menu*/ margin-right:5px; /*Indent the menu items*/ )

Kami mendapatkan menu teratas yang sudah jadi di header, tanpa gaya khusus dan lonceng dan peluit, ini bisa disebut bingkai menu cantik masa depan Anda. Jika Anda menyalin dan menempelkan html dan css ini akan terlihat seperti ini.

Contoh bingkai (templat) untuk menu masa depan Anda

Semuanya ternyata cukup sederhana, Anda tentu saja menginginkan menu utama yang indah segera, tetapi tanpa memahami dasar-dasarnya, Anda tidak akan dapat membuat menu yang baik tanpa kesalahan dalam html dan css.

Ada juga beberapa metode CSS lain yang digunakan untuk membuat menu horizontal selain float:left; , misalnya display:inline-block; atau tampilan:fleksibel; , tetapi disarankan untuk menggunakan metode yang dijelaskan di atas.

Mari kita isi template menu kita dengan berbagai gaya dan membuatnya Cantik.

Contoh menu horizontal yang indah untuk situs web

Sekarang saya akan memberikan beberapa contoh yang sudah jadi dengan desain menu horizontal yang sudah jadi.

Anda dapat membuat semua "hal-hal cantik" untuk situs Anda sendiri, dan tidak mencarinya di Internet. Cara termudah untuk melakukannya didasarkan pada salah satu contoh di bawah ini.

Menu biru sederhana dengan item terpisah

Gaya CSS untuk menu "atas"

Di bawah ini adalah gaya untuk menu ini. HTML tetap sama seperti di menu "kerangka".

Ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*indent top*/ ) a ( dekorasi teks: tidak ada; /*hapus garis bawah teks tautan*/ latar belakang:#30A8E6; /*tambahkan latar belakang ke item menu*/ warna:#fff; /*ubah warna tautan*/ padding:10px; /*tambahkan padding */ font-family: arial; /*ubah font*/ border-radius:4px; /*tambahkan pembulatan*/ -moz-transition: semua 0.3s 0.01s mudah; /*do transisi yang mulus*/ -o-transisi: semua 0,3 detik 0,01 detik mudah; -webkit-transisi: semua 0.3s 0.01s mudah; ) a:hover ( background:#1C85BB;/*Add hover effect*/ ) li ( float:left; /*Letakkan daftar secara horizontal untuk mengimplementasikan menu*/ margin-right:5px; /*Tambahkan padding ke item menu* / )

Menu utama terletak pada garis berwarna dengan latar belakang merah

menu gaya css pada garis warna

ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*indent top*/ background :#FF4444; /*menambahkan latar belakang ke seluruh menu (mengganti parameter ini akan mengubah warna seluruh menu)*/ height: 50px; /*set the height*/ ) a ( text-decoration: none; /* hapus garis bawah teks tautan* / background:#FF4444; /*tambahkan latar belakang ke item menu (mengganti pengaturan ini akan mengubah warna semua item menu)*/ color:#fff; /*mengubah warna tautan* / padding:0px 15px; /*add padding*/ font-family: arial; /*ubah font*/ line-height:50px; /*sejajarkan menu secara vertikal*/ display: block; border-right: 1px solid # F36262; /*menambahkan batas ke kanan*/ -moz-transition : semua 0.3s 0.01s mudah; /*membuat transisi yang mulus*/ -o-transition: semua 0.3s 0.01s mudah; -webkit-transition: all 0.3s 0.01s mudah; ) a:hover ( background:#D43737;/ *tambahkan efek hover*/ ) li ( float:left; /*letakkan daftar secara horizontal secara nyata Tidak bisa*/ )

Menu tarik-turun di HTML+CSS

Untuk implementasi menu drop-down (drop-down) tambahan di situs untuk item menu apa pun, kita perlu menambahkan daftar item tambahan ke kode HTML untuk tautan apa pun dari menu horizontal dan mengubah gaya CSS. Dalam gaya, kami akan menerapkan trik sederhana - mengubah tampilan menu tarik-turun saat mengarahkan kursor ke item yang kami butuhkan di menu atas. Misalnya, mari kita ambil item "layanan".

Contoh membuat menu dropdown sederhana

Kode HTML dari menu tarik-turun

rumah
Jasa
- Layanan 1
- Layanan lama 2
- Layanan 3
Harga
Kontak

Gaya CSS tarik-turun

ul ( list-style: none; /*remove list markers*/ margin: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*indent top*/ background :#819A32; /*menambahkan latar belakang ke seluruh menu*/ height: 50px; /*mengatur ketinggian*/ ) a ( text-decoration: none; /*menghapus garis bawah teks tautan*/ background:#819A32 ; /*menambahkan latar belakang ke item menu*/ color:#fff; /*mengubah warna tautan*/ padding:0px 15px; /*menambahkan padding*/ font-family: arial; /*mengubah font*/ tinggi baris :50px; /*align menu to verticals*/ display: block; border-right: 1px solid #677B27; /*tambahkan batas ke kanan*/ -moz-transition: all 0.3s 0.01s easy; /*make a transisi mulus*/ -o-transisi: semua 0,3 detik mudah 0,01 detik; -webkit-transisi: semua 0,3 detik 0,01 detik mudah; ) a:hover ( background:#D43737;/*Tambahkan efek melayang*/ ) li ( float :left; /*Menempatkan daftar secara horizontal untuk mengimplementasikan menu* / position:relative; /*mengatur posisi untuk positioning*/ ) /*Styles untuk menu dropdown tersembunyi* / li > ul ( posisi:absolut; atas:25 piksel; tampilan: tidak ada; ) /*Buat bagian yang tersembunyi terlihat*/ li:hover > ul ( display:block; width:250px; /*Setel lebar menu dropdown*/ ) li:hover > ul > li ( float:none; /* Hapus posisi horizontal* / )

Dan untuk memahami dengan tepat layanan dan kategori apa yang harus Anda miliki, saya sarankan Anda membiasakan diri dengan materi:.

Saya mencoba memberi tahu Anda sesingkat mungkin tentang cara membuat menu horizontal utama, membuat beberapa templat, cara menambahkan gaya sederhana ke dalamnya dan membuatnya lebih cantik, cara membuat menu tarik-turun untuk situs Anda. Untuk kenyamanan, saya telah mengumpulkan semua menu yang disajikan di atas dalam satu file html, yang dapat Anda unduh di bawah ini. Itu terlihat seperti di tangkapan layar:

Terima kasih atas perhatian Anda.

Menu horisontal adalah daftar bagian situs, jadi lebih logis untuk menandai di dalam elemen

Cara membuat menu horizontal: markup dan contoh desain

Markup HTML dan gaya dasar untuk menu horizontal

Secara default, semua item daftar berada Tegak lurus, yang mencakup seluruh lebar elemen penampung, yang pada gilirannya mencakup seluruh lebar blok penampungnya.

Markup HTML untuk navigasi horizontal

item menu
item menu
item menu

Menu horizontal yang terletak di dalam tag juga dapat ditempatkan di dalam elemen

...

kesempatan tambahan

Ada beberapa cara untuk menempatkannya mendatar. Pertama, Anda perlu mengatur ulang gaya browser default untuk elemen navigasi:

Ul ( gaya daftar: tidak ada; /*hapus penanda daftar*/ margin: 0; /*hapus margin atas dan bawah 1em*/ padding-left: 0; /*hapus padding kiri 40px*/ ) a ( text-decoration: none; /*hapus garis bawah teks link*/)

Metode 1. li (tampilan: sebaris;)

Buat item daftar sebaris. Akibatnya, mereka diatur secara horizontal, di sisi kanan, celah yang sama dengan 0,4em ditambahkan di antara mereka (dihitung relatif terhadap ukuran font). Untuk menghapusnya, tambahkan margin kanan negatif ke li li (margin-right: -4px;) . Selanjutnya, gaya tautan sesuai keinginan.

Metode 2. li (mengambang: kiri;)

Kami membuat elemen daftar mengambang. Akibatnya, mereka diatur secara horizontal. Ketinggian blok kontainer ul menjadi nol. Untuk mengatasi masalah ini, kami menambahkan (overflow: hidden;) ke ul , memperluasnya dan dengan demikian memungkinkannya mengandung elemen mengambang. Untuk tautan, tambahkan (tampilan: blok;) dan beri gaya sesuai keinginan.

Metode 3. li (tampilan: inline-block;)

Membuat item daftar inline-block. Mereka diatur secara horizontal, celah terbentuk di sisi kanan, seperti pada kasus pertama. Untuk tautan, tambahkan (tampilan: blok;) dan beri gaya sesuai keinginan.

Metode 4. ul (tampilan: flex;)

Membuat daftar ul wadah fleksibel menggunakan . Akibatnya, elemen daftar diletakkan secara horizontal. Tambahkan (tampilan: blok;) untuk tautan dan beri gaya sesuai keinginan.

1. Menu responsif dengan efek garis bawah saat mengarahkan kursor ke tautan

2. Menu responsif untuk situs web pernikahan

3. Menu responsif dengan kerang

4. Menu Pita Responsif

5. Menu responsif dengan logo di tengah

6. Menu responsif dengan logo di sebelah kiri

Saya sudah lama ingin menulis artikel tentang cara membuat submenu di css. Banyak orang melakukannya jQuery dan ternyata cukup baik, bagaimanapun, seluruh prinsip dasar penciptaan submenu di css Saya akan menyajikannya di sini. Dan sudah lebih jauh, mulai dari dasar ini, Anda dapat meningkatkan submenu lebih lanjut.

saya langsung bawa kode CSS:

*html ul li (
mengapung: kiri;
}
* html ul li a (
tinggi: 1%;
}
ul(
border-bottom: 1px solid #000;
gaya daftar: tidak ada;
margin: 0;
bantalan: 0;
lebar: 100px
}
ul li (
posisi: relatif;
}
ul li a (
tampilan: blok;
batas: 1px solid #000;
batas-bawah: 1px;
bantalan: 5px
dekorasi teks: tidak ada;
}
li ul (
tampilan: tidak ada;
kiri: 99 piksel;
posisi: mutlak;
atas: 0;
}
li: arahkan ke ul (
tampilan: blok;
}

Yang paling penting di sini adalah pemilih " li: arahkan ul". Bahkan, itu menunjukkan isi menu. Secara default, itu " tampilan: tidak ada", dan saat Anda mengarahkan kursor ke item menu, submenu menjadi: " tampilan: blok", yaitu, terlihat. Ini adalah hal yang paling penting. Juga di dua pemilih pertama (yang * ) pergi peretasan CSS untuk YAITU, jika tidak, tidak ada yang akan berfungsi di browser ini tanpanya. Segala sesuatu yang lain adalah penampilan yang tentu saja bisa diubah.

aku membawa dan kode HTML:

rumah

Menu 1
- Submenu 1
- Submenu 2
- Submenu 3

Menu 2
- Submenu4
- Submenu 5
- Submenu 6
- Submenu7
- Submenu 8

Jika Anda berpikir dengan hati-hati tentang struktur ini, semuanya menjadi sangat jelas. Menandai ul- membuat menu. Jika sebuah ul ada di dalam yang lain ul, maka ini sudah menjadi submenu. Sebuah tag li bertanggung jawab untuk item menu tertentu.

Tentu saja menu yang paling sederhana, baik dari segi logika dan struktur, maupun dari segi desain. Tentu saja, Anda dapat menggunakan jQuery membuat pembukaan halus. Anda juga dapat mengubah desainnya, tetapi keseluruhan prinsipnya akan tetap sama seperti di sini submenu ditulis dalam CSS dan HTML.

Salam pembuka! Jika Anda seorang desainer tata letak pemula, maka cepat atau lambat Anda akan menemukan fakta bahwa Anda ingin meramaikan halaman Anda, buatlah setidaknya sedikit interaktif. Sebisa mungkin, animasi CSS dapat membantu Anda di sini. Tetapi Anda perlu tahu di mana dan bagaimana menerapkannya.

Hari ini saya akan memberitahu cara membuat drop down menu di cleancss dan bagaimana menambahkan kehalusannya? menggunakan animasi CSS. Jika Anda tidak tahu, maka inilah saatnya untuk berkenalan dengan dasar-dasarnya.

Mengetik menu HTML + CSS

Untuk memulainya, agar kita memiliki sesuatu untuk dikerjakan, mari kita buat menu satu tingkat sederhana. Kami tidak akan terlalu repot dengan desain, untuk kejelasan, ini sudah cukup:

Apa yang kita miliki? Daftar tidak berurutan yang paling biasa dengan pengenal "top_menu" dan dengan tautan yang dibungkus dengan elemen-elemen dari daftar ini. Semuanya basi dan sederhana. Saat mengarahkan kursor, item menu berubah warna... hanya itu yang sudah Anda ketahui dan pahami caranya (saya harap).

Menambahkan menu tingkat kedua

Untuk membuat menu berlapis, kita perlu menambahkan daftar tak berurutan kedua di dalam yang pertama. Saya pikir Anda mengambilnya di suatu tempat di pelajaran awal. Dan juga fakta bahwa Anda perlu memasukkannya tidak hanya di dalam daftar kami, tetapi juga di dalam elemen daftar, yaitu tag " li", tepat setelah tag penutup "a".

Posisikan daftar bersarang secara mutlak sehubungan dengan " li' di mana mereka bersarang. Dan semua " li» dari tingkat atas diposisikan relatif terhadap ( relatif). Agar menu drop-down SEGERA setelah menu tingkat atas kami, itu (drop-down - “ menu_dalam”) harus disetel

posisi: mutlak; atas: 100%;

Artinya, indentasi dari batas atas induk akan sama dengan tinggi induk. Sangat logis menurut saya.

Selain penentuan posisi, Anda perlu memberikan menu tarik-turun dengan gaya yang sama dengan menu tingkat atas. Sebuah apel dari pohon apel, seperti yang mereka katakan ...

Seperti yang Anda lihat, menu dropdown kami belum terlihat seperti dropdown, tetapi jatuh dan menggantung. Tapi tidak apa-apa, kami akan segera memperbaikinya.

Cara membuat menu drop down benar-benar drop down

Tidak ada yang lebih mudah! Untuk menjadikan daftar bersarang kami sebagai menu tarik-turun, Anda hanya perlu menyembunyikannya! Dan kemudian buka hanya ketika kursor mouse akan menyapu item menu tingkat atas, yang berisi menu drop-down. Ini mungkin terdengar sedikit rumit, tetapi sebenarnya dapat diselesaikan hanya dengan beberapa baris kode.

Tambahkan ke menu tarik-turun:

tampilan: tidak ada;

Dan untuk menampilkannya, Anda harus mendaftar:

#top_menu > li:hover > ul ( tampilan: blok; )

Apa yang dikatakan oleh sekelompok pemilih ini kepada kita? Kami membaca dari akhir. Kami mengatur gaya (visibilitas) untuk daftar tingkat kedua, yang terletak di dalam elemen daftar tingkat pertama, tetapi gaya ini hanya akan berfungsi jika kami mengarahkan kursor ke elemen dengan mouseli" yang menyusun daftar tingkat kedua kami.

Saya harap saya mengekspresikan diri saya dengan jelas. Jika tidak, coba baca beberapa kali. Lebih baik lagi, pahami saja dengan melihat kodenya. Mari kita lihat apa yang kita dapatkan:

Ya, kami tampaknya telah mencapai apa yang kami inginkan - kami membuat menu drop-down, menu drop-down nyata, sial! Tapi dia kehilangan sesuatu. Apakah kamu tahu? Kelancaran! Lagi pula, semuanya tampak seolah-olah menu tidak keluar, tetapi muncul begitu saja. Dan sangat tajam, bahkan seketika, menurut saya.

Baiklah, mari kita bermain-main dengannya sedikit lagi.

Menu tarik-turun yang halus itu mudah

Jadi mari kita buat menu dropdown yang mulus di CSS murni. Mengapa melakukannya? Karena orang-orang menyukainya ketika semuanya halus dan lembut ... dan terlihat indah. Ini akan menjadi nilai tambah untuk kegunaan situs Anda. Ayo pergi!

Ingat, Anda hanya dapat menganimasikan nilai matematika yang tepat, seperti 50px dan 300px, 0 dan 100%, 0,5 dan 1,0, dan seterusnya. Dalam kasus kami, kami tidak akan dapat menganimasikan dua status menu tarik-turun kami ( tampilan: tidak ada; dan tampilan: blok;).

Tapi kita bisa menggantinya dengan transparansi - opacity:0 dan opacity:1. Dan atur waktu di mana menu kami akan muncul dari keadaan transparan. Ya, itu berhasil, tetapi itu bukan efek yang Anda harapkan. Jadi mari kita membuatnya sedikit lebih sulit. Tapi itu sepadan, percayalah.

Untuk membuat animasi lebih halus dan lebih dapat diprediksi, kami harus menetapkan ketinggian tetap untuk item menu tarik-turun, meskipun kami dapat melakukannya tanpa itu. Ada banyak metode, cukup buat kombinasi dan selesaikan masalah.

Seperti yang Anda lihat dari kode, kami telah menganimasikan ketinggian item dropdown dan transparansinya. Ini ternyata cukup untuk membuat cantik animasi halus menu drop down.

Apa yang kita butuhkan untuk animasi? Dua status item menu kami, serta properti transisi, yang menginterpolasi status ini, yaitu, mengisi semua nilai antara untuk periode waktu yang ditentukan. Itu saja!

Bahkan lebih mudah dapat dilakukan dengan menggunakan jQuery, tetapi pada awalnya kami sepakat bahwa kami akan bekerja dengan CSS murni hari ini. Dan bahkan lebih indah dapat dilakukan dengan menambahkan kurva Bezier ke animasi, tetapi topik ini sedikit di luar cakupan hari ini. Tapi kami pasti akan kembali ke sana nanti.

Kesimpulan:

Sekarang Anda dapat membual kepada teman dan keluarga Anda bahwa Anda tahu cara membuat menu dropdown dengan CSS murni. Ini adalah keterampilan yang sangat berguna yang akan Anda butuhkan lebih dari sekali. Nah, nilai sendiri, berapa banyak situs yang Anda lihat dengan menu statis? Tidak, sebagian besar situs memiliki menu tarik-turun.

Omong-omong, ini adalah tutorial CSS pertama saya. Jelaskan bagaimana Anda menyukainya? Apakah Anda menjelaskan semuanya dengan jelas atau Anda perlu lebih detail? Dan apakah layak untuk terus menulis artikel tentang topik peretasan kehidupan di CSS?

Terima kasih atas perhatian Anda dan sampai jumpa!

Apakah Anda membaca sampai akhir?

Apakah artikel ini berguna?

Tidak terlalu

Apa yang sebenarnya tidak Anda sukai? Apakah artikel itu tidak lengkap atau tidak benar?
Tulis di komentar dan kami berjanji untuk meningkatkan!

Dalam tutorial ini, kita akan membuat menu horizontal klasik dalam CSS murni. Ini memiliki ikon dalam daftar. Saat mengarahkan kursor ke item, itu akan mengubah warna tombol dan teks dengan mulus, dan menambahkan bayangan. Daftar drop-down dapat dibuat multi-level, dan yang terpenting, ini semua cukup sederhana diimplementasikan dalam CSS3 murni.

Dalam pelajaran kita akan menggunakan:

tampilan: fleksibel;
menggunakan transisi;
kita akan memposisikan elemen menggunakan position .

Struktur HTML dari menu horizontal

Pertama-tama, mari kita tulis markup untuk menu horizontal. Kami membuka lingkungan pengembangan kami dalam kasus saya ini adalah PhpStorm , buat file index.html, tulis kerangka kerja html:5, ganti lang dengan ru .

Saya akan menghapus semua meta kecuali pengkodean, saya akan menulis judul saya " menu tom».

Di antara badan kita menulis tag header, dan di dalamnya ada blok dengan kelas .dws-menu di mana menu kita akan ditempatkan. Selanjutnya, strukturnya adalah sebagai berikut, kami akan membuat daftar dalam jumlah lima buah. Setiap daftar akan memiliki tautan dengan atribut href="#". Kemudian akan ada icon I dengan class .fa .fa-

Klik terapkan.

Mari kita tulis nama item menu ( Beranda, Produk, Layanan, Berita, Kontak).

Selanjutnya, pilih dan hubungkan ikon. Kami pergi ke situs web Font Awesome, pilih ikon untuk item menu ini:

Kami mengunduh arsip dari situs dengan ikon, mengekstrak isinya ke komputer kami, menyalin folder font dan folder css ke lingkungan pengembangan kami.

Folder font berisi font ikon, dan folder css berisi gayanya. Gaya terkompresi dapat dihapus dengan font-awesome.min , termasuk font-awesome.css yang tidak terkompresi.

Di index.html kami menghubungkan ikon, dan menentukan setiap item dengan gaya ikonnya sendiri ( rumah, kereta Belanja, roda gigi, daftar-th, amplop terbuka).

Kami telah membuat bingkai utama, kami akan membentuk submenu setelah menggambarkan gaya utama, dan sekarang kami akan membuat file di mana kami akan menggambarkan gaya utama dari menu horizontal style.css dan menghubungkannya ke index.html. Untuk memeriksa apakah gaya terhubung, saya akan membuat folder img , di dalamnya saya akan menempatkan gambar sewenang-wenang latar belakang. Mari kita menulis koneksi gambar menggunakan background .

Tubuh( gambar-latar belakang: url("../img/ep_naturalwhite.png"); )

Menjelaskan Gaya CSS untuk Menu Horizontal

Pertama-tama, mari kita setel ulang semua indentasi yang dapat disetel oleh browser yang berbeda secara default:

Dws-menu *( margin: 0; padding: 0; )

Mari kita atur header menjadi 200 spade. dan tetapkan font Cuprum, yang dapat diunduh dan dihubungkan secara terpisah ke situs Anda, untuk berjaga-jaga, kami akan menulis font tambahan.

Header( margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; )

Mari sembunyikan penanda dari daftar:

dws-menu ul, .dws-menu ol( gaya daftar: tidak ada; )

Mari tampilkan daftar secara horizontal dengan display: flax , dan buat di tengah:

Dws-menu > ul( display: flex; justify-content: center; )

Di header, mari indentasi hanya dari atas, tulis margin-top .

Tajuk ( margin-atas: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; )

Mari kita rancang menu kita, atur warna tombol, font, dll.

Dws-menu > ul li a( tampilan: blok; latar belakang: #ececed; padding: 15px 30px 15px 40px; ukuran font: 14px; warna: #454547; dekorasi teks: tidak ada; transformasi teks: huruf besar; )

Kemudian kami memposisikan ikon, menetapkan posisi daftar: relatif; untuk lebih memusatkan ikon:

dws-menu > ul li( posisi: relatif; )

dws-menu > ul li > a i.fa( position: absolute; top: 15px; left: 12px; font-size: 18px; )

Mari kita tetapkan pemisah batas ke daftar, pilih elemen LI pertama, dan atur batasnya. Kami memilih elemen terakhir LI dan menetapkannya sebagai batas yang serupa.

Dws-menu > ul li:first-child( border-left: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )

Membuat pemisah untuk daftar LI:

.dws-menu > ul li( posisi: relatif;

batas-kanan: 1px solid #c7c8ca;

Menu telah memperoleh tampilan, lalu Anda dapat mulai menjelaskan gaya saat mengarahkan kursor.

Animasikan menu horizontal di hover

Dws-menu li a:hover( background: #454547; warna: #ffffff; box-shadow: 1px 5px 10px -5px hitam; transisi: semua 0,3 detik mudah; )

Dan untuk membuat efek ini menghilang dengan lancar, tambahkan gaya ini ke tautan saat istirahat:

.dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase;

Menu utama selesai dan Anda dapat mulai menjelaskan submenu dan submenunya.

Menjelaskan Menu Dropdown CSS/HTML

Kami membuka index.html dan menambahkan, misalnya, menu tambahan ke produk. Di antara daftar LI yang kami masukkan UL , kami akan menempatkan lima daftar di dalamnya, di mana akan ada tautan dengan atribut herf=”#” .

ul>li*5>a

Klik apply, tulis nama barangnya ( Pakaian, Elektronik, Makanan, Peralatan, Kehidupan. kimia).

pakaian
Elektronik
Makanan
Peralatan
Jenderal kimia

Kemudian kita membuka style.css dan menjelaskan gaya submenu.

Pilih daftar kedua dan berikan position: absolute; , atur lebar minimum ke 150 piksel.

/*sub menu*/ .dws-menu li ul( position: absolute; min-width: 150px; )

Mari kita tulis batas 1 puncak ke daftar.

Dws-menu li > ul li( border: 1px solid #c7c8ca; )

Untuk tautan di submenu, atur padding ke 10 piksel, hapus transformasi teks dan buat latar belakang beberapa nada lebih gelap latar belakang: #e4e4e5; .

Dws-menu li > ul li a( padding: 10px; text-transform: none; background: #e4e4e5; )

Kemudian kita akan membuat menu bersarang lainnya. Mari kita pergi ke file markup dan, misalnya, dalam "Elektronik" kita membentuk menu dengan analogi, seperti yang kita lakukan sebelumnya. Menjelaskan judul paragraf ( Kamera, Komputer, Telepon) dan simpan.

Elektronik
- kamera
- Komputer
- Telepon

Mereka ditampilkan, tetapi tersembunyi di bawah menu utama, sekarang position: absolute; UL bersarang dan menggesernya sebanyak 150 puncak. ke samping:

Dws-menu li > ul li ul( posisi: absolut; kanan: -150px; atas: 0; )

/*sub menu*/ .dws-menu li ul( position: absolute; min-width: 150px;

Dan untuk tampilannya, kita akan memilih daftar di hover dan menampilkannya menggunakan display: block; .

dws-menu li:hover > ul(display: block; )

Sekarang Anda dapat menambahkan menu multi-level hanya dengan menyalin blok UL, mengubah itemnya.

rumah
Produk
- pakaian
  - Sepatu
  - Jaket
  - Celana
- Elektronik
  - kamera
  - Komputer
  - Telepon
    - Samsung
    - Flf
    - apel
- Makanan
- Peralatan
- Jenderal kimia
Jasa
- Layanan 1
- Layanan 2
- Layanan 3
Berita
Kontak

Lalu mari hiasi kancing dengan bahan untuk langkah terakhir. Saya menggunakan generator CSS, saya memiliki beberapa Preset yang dibuat, Anda dapat membuatnya sendiri, dalam kasus saya, saya hanya menyalin kode yang diberikan dan letakkan di tempat background yang saya tulis sebelumnya.

.dws-menu > ul li a( tampilan: blok;

/* Tautan permanen - gunakan untuk mengedit dan membagikan gradien ini: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ background: #c9c9c9 ; /* Browser lama */ background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(atas, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(ke bawah, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */

bantalan: 15px 30px 15px 40px; ukuran font: 14px; warna: #454547; dekorasi teks: tidak ada; transformasi teks:huruf besar; transisi: semua 0,3 detik mudah; )

/* Tautan permanen - gunakan untuk mengedit dan membagikan gradien ini: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ background: #e0e1e5; /* Browser lama */ background: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(atas, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(ke bawah, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */

warna: #ffffff; box-shadow: 1px 5px 10px -5px hitam; transisi: semua 0,3 detik mudah; )

Jika diinginkan menu ini Anda dapat mengatur gaya yang cocok untuk Anda di situs, cukup mudah untuk menghasilkan warna dan menggantinya dalam kode. Hasilnya adalah menu horizontal yang sederhana dan sekaligus bagus yang dibuat dengan CSS murni.

sushiandbox.ru Menguasai PC - Internet. Skype. Jaringan sosial. Pelajaran di Windows.

html menu tarik-turun. Menu tarik-turun vertikal CSS pada menu hover dan berlapis. Cara membuat menu tarik-turun horizontal

Kode HTML untuk menu horizontal

Gaya CSS Standar untuk Menu Horizontal

Contoh bingkai (templat) untuk menu masa depan Anda