Menu drop down CSS / HTML murni

1. Menu drop down CSS / HTML murni Dalam tutorial ini kita akan membuat menu horizontal klasik pada...
2. Kami menghidupkan menu horisontal sambil menunjuk.
3. Jelaskan menu tarik-turun CSS / HTML

Menu drop down CSS / HTML murni

Dalam tutorial ini kita akan membuat menu horizontal klasik pada CSS murni. Ini memiliki ikon dalam daftar. Saat menunjuk ke suatu item, itu dengan lancar mengubah warna tombol dan teks, sebuah bayangan ditambahkan. Daftar drop-down dapat dibuat multi-level dan yang utama semuanya cukup sederhana diimplementasikan pada CSS3 murni.

Kelanjutan dari pelajaran ini di sini - bagian 2 Menu horisontal VERSI MOBILE ".

Lihat Pena POyzbW oleh Denis ( @Dwstroy ) pada Codepen .

Dalam pelajaran gunakan:

• display: flex;
• gunakan transisi;
• posisikan elemen dengan posisi.

Struktur menu horisontal HTML

Pertama, tulis markup di bawah menu horisontal. Kami membuka lingkungan pengembangan kami dalam kasus saya, ini PhpStorm, buat file index.html, tentukan frame html: 5, ganti lang dengan ru.

Semua meta akan dihapus kecuali untuk encoding, saya akan mendaftarkan judul saya " menu Tom ".

Antara tubuh kita menulis tag header, dan di dalamnya ada blok dengan menu .dws-class yang akan berisi menu kita. Selanjutnya, struktur akan menjadi sebagai berikut, kami akan membuat daftar dalam jumlah lima buah. Di setiap daftar akan ada tautan dengan atribut href = "#". Maka saya akan pergi ke ikon dengan kelas .fa .fa-

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>

Kami menekan untuk mendaftar.

Mari kita tuliskan nama item menu ( Rumah, Produk, Layanan, Berita, Kontak ).

Selanjutnya, pilih dan hubungkan ikon. Pergi ke situs, kami akan memilih ikon untuk item menu ini:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa fa- cogs "> </ i> <i class = "fa fa -th-list "> </ i> <i class = "fa fa -envelope-open "> </ i>

Unduh arsip dari situs dengan ikon, ekstrak isinya ke komputer Anda, salin folder font dan folder css ke lingkungan pengembangan Anda.

Folder font berisi font ikon, dan folder css berisi gaya mereka. Gaya terkompresi dapat dihapus font-awesome.min, kami menghubungkan font-awesome.css yang tidak terkompresi.

Di index.html kami menghubungkan ikon, dan kami mendaftarkan setiap item dengan gaya ikonnya sendiri ( rumah , keranjang belanja , roda gigi , daftar-th , buka amplop ).

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

body {background-image: url ("../ img / ep_naturalwhite.png"); }

Seperti yang kita lihat, semuanya telah ditampilkan dan kemudian kita akan melanjutkan ke deskripsi gaya.

Pertama-tama, mari atur ulang semua indentasi, yang dapat diatur oleh browser berbeda secara default:

.dws-menu * {margin: 0; bantalan: 0; }

Atur tajuk menjadi 200 puncak. dan menetapkan yang dapat Anda unduh dan secara terpisah terhubung ke diri Anda di situs, untuk berjaga-jaga, menulis font tambahan.

header {margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Sembunyikan penanda dalam daftar:

.dws-menu ul, .dws-menu ol {list-style: none; }

Daftar akan ditampilkan secara horizontal dengan tampilan: rami, dan kami akan melakukannya di tengah:

.dws-menu> ul {display: flex; justify-content: center; }

Di header kita hanya akan membuat indentasi bagian atas, kita akan menulis margin-top.

header { margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Mari kita merancang menu kita, mengatur warna tombol, font, dll.

Pilih tautan nav> ul li, dan buat mereka memblokir elemen. Atur latar belakang menu, tulis indentasi, tentukan ukuran, warna, hapus garis bawah, dan buat judul dalam huruf kapital.

.dws-menu> ul a {display: block; latar belakang: #ececed; padding: 15px 30px 15px 40px; ukuran font: 14px; warna: # 454547; teks-dekorasi: tidak ada; text-transform: huruf besar; }

Kemudian posisikan ikon, tetapkan daftar ke posisi: relatif; untuk penyelarasan ikon lebih lanjut:

.dws-menu> ul li {position: relative; }

Selanjutnya, kita pilih ikon, posisikan secara absolut, buat lekukan dari atas pada 15 puncak, dari 12 puncak kiri, tambah ukurannya menjadi 18 puncak.

.dws-menu> ul li> a i.fa {position: absolute; atas: 15px; kiri: 12px; ukuran font: 18px; }

Tetapkan pemisah dalam bentuk perbatasan ke daftar, pilih elemen LI pertama, atur perbatasan. Kami memilih elemen terakhir LI dan menetapkan perbatasan yang sama.

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

Membuat pembatas untuk daftar LI:

.dws-menu> ul li {position: relative; border-right: 1px solid # c7c8ca; }

Menu telah memperoleh tampilan, maka Anda dapat melanjutkan ke deskripsi gaya selama mengarahkan kursor.

Kami menghidupkan menu horisontal sambil menunjuk.

Pilih tautan dan berikan warna ke blok, dan tetapkan warna tautan itu sendiri dengan ikon menjadi putih. Mari kita tambahkan bayangan gelap lainnya. Dengan bantuan transisi dalam 0,3 detik kami akan membuat penampilan yang mulus:

.dws-menu li a: hover {background: # 454547; warna: #ffffff; kotak-bayangan: 1px 5px 10px -5px hitam; transisi: semua kemudahan 0,3s; }

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

.dws-menu> ul a {display: block; latar belakang: #ececed; padding: 15px 30px 15px 40px; ukuran font: 14px; warna: # 454547; teks-dekorasi: tidak ada; text-transform: huruf besar; transisi: semua kemudahan 0,3s; }

Menu utama selesai dan Anda dapat melanjutkan ke deskripsi submenu dan submenu yang tertanam di dalamnya.

Jelaskan menu tarik-turun CSS / HTML

Tentang kami membuka index.html dan menambahkan, misalnya, menu tambahan ke produk. Masukkan UL antara daftar LI dan tempatkan lima daftar di dalamnya, yang akan berisi tautan dengan atribut herf = "#".

ul> li * 5> a [href = "#"]

Kami menekan untuk melamar, menulis nama barang ( Pakaian, Elektronik, Makanan, Peralatan, Kehidupan. Kimia ).

<ul> <li> <a href="#"> Pakaian </a> </ li> <li> <a href="#"> Elektronik </a> </ li> <li> <a href = "#"> Makanan </a> </ li> <li> <a href="#"> Alat </a> </ li> <li> <a href="#"> Hidup. kimia </a> </ li> </ ul>

Kemudian buka style.css dan jelaskan gaya submenu.

Kami memilih daftar kedua dan menetapkan posisinya: absolut; , mari atur lebar minimum ke 150 puncak.

/ * sub menu * / .dws-menu li {posisi: absolut; lebar minimum: 150px; }

Mari menulis ke daftar perbatasan di 1 puncak.

.dws-menu li> ul li {border: 1px solid # c7c8ca; }

Untuk tautan di submenu, kami akan menetapkan indent pada 10 puncak., Hapus transformasi teks dan buat latar belakang beberapa nada latar belakang yang lebih gelap: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; transformasi teks: tidak ada; latar belakang: # e4e4e5; }

Kemudian buat submenu lain. Buka file markup dan misalnya dalam bentuk "Elektronik" dengan menu analogi seperti yang kami lakukan sebelumnya. Kami menjelaskan judul item ( Kamera, Komputer, Telepon ) dan menyimpan.

<li> <a href="#"> Elektronik </a> <ul> <li> <a href="#"> Kamera </a> </ li> <li> <a href="#"> Komputer </a> </ li> <li> <a href="#"> Telepon </a> </ li> </ ul> </ li>

Mereka dibawa keluar, tetapi disembunyikan di bawah menu utama, sekarang posisi: absolut; bersarang UL dan memindahkannya ke puncak 150. ke samping:

.dws-menu li> ul li ul {position: absolute; kanan: -150px; atas: 0; }

Selanjutnya, kami akan membuat submenu muncul ketika menargetkan item utama dari menu teratas, untuk ini kami menambahkan tampilan: tidak ada; dan karenanya menyembunyikan semua poin internal.

/ * sub menu * / .dws-menu li {posisi: absolut; lebar minimum: 150px; display: tidak ada; }

Dan untuk penampilan mereka, kami akan memilih daftar yang di arahkan dan menampilkannya dengan bantuan tampilan: blok; .

.dws-menu li: hover> ul {display: block; }

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

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Beranda </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Produk </a> <ul> <li> <a href="#"> Pakaian </a> <ul> <li> <a href = "#"> Sepatu </a> </ li> <li> <a href="#"> Jaket </a> </ li> <li> <a href="#"> Celana Panjang </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronik </a> <ul> <li> <a href="#"> Kamera </a> </ li> <li> <a href="#"> Komputer </a> </ li> <li> <a href="#"> Telepon </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Makanan </a> </ li> <li> <a href="#"> Alat </ h a> </ li> <li> <a href="#"> Gen. kimia </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Layanan </a> <ul > <li> <a href="#"> Layanan 1 </a> </ li> <li> <a href="#"> Layanan 2 </a> </ li> <li> <a href = "#"> Layanan 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa-th-list"> </ i> Berita </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Kontak </a> </ li> </ ul>

Lalu mari kita selesaikan tombol dengan tombol. Saya menggunakan, saya telah membuat beberapa Preset, Anda dapat membuatnya sendiri, dalam kasus saya, saya hanya menyalin kode ini dan meletakkannya di tempat latar belakang yang saya tulis sebelumnya.

.dws-menu> ul a {display: block; / * Permalink - gradien ini: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Browser lama * / latar belakang: -moz-linear-gradient (atas, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / latar belakang: -webkit-linear-gradient (atas, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / latar belakang: gradien linier (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 * / padding: 15px 30px 15px 40px; ukuran font: 14px; warna: # 454547; teks-dekorasi: tidak ada; text-transform: huruf besar; transisi: semua kemudahan 0,3s; } .dws-menu seperti: hover {/ * Permalink - gradien ini: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / latar belakang: # e0e1e5; / * Browser lama * / latar belakang: -moz-linear-gradient (atas, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / latar belakang: -webkit-linear-gradient (atas, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / latar belakang: gradien linier (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; kotak-bayangan: 1px 5px 10px -5px hitam; transisi: semua kemudahan 0,3s; }

Jika Anda mau, menu ini dapat dirancang untuk gaya yang kami cocok untuk Anda di situs, itu cukup hanya untuk menghasilkan warna dan menggantinya dalam kode. Ternyata menu horizontal sederhana dan sekaligus bagus, dibuat dengan CSS murni.

Tinggalkan komentar: