Mari buat menu navigasi horizontal sederhana untuk situs ini. Untuk melakukan ini, kami akan menggunakan teknik sederhana yang akan menghasilkan tampilan menu kami yang benar di semua browser.

Jadi mari kita mulai. Mari buat daftar dengan nama menu kita. Biarkan nama itemnya menjadi: “Beranda”, “Berita”, “Produk”, “Layanan”, “Mitra”, “Kontak”. Buat file baru bernama menu.html, misalnya menggunakan program Dreamweawer atau menggunakan notepad biasa. Di dalamnya, di antara tag body kami menempatkan menu kami. Ini adalah daftar ul dengan elemen li. Tentu saja, kami menjadikan setiap item menu sebagai tautan, di mana alih-alih URL kami memasukkan hash #. Menggunakan Photoshop, buat gambar berukuran 3x30 px, dengan isian gradien seperti yang ditunjukkan pada gambar di bawah. Kami akan menyimpan file dalam format GIF. Sebut saja bg.gif. Gambar ini akan bertindak sebagai gambar latar belakang menu kita.

Berikut isi file menu.html:

Menu horizontal lintas browser sederhana

• Rumah
• Berita
• Produk
• Layanan
• Mitra
• Kontak

Sekarang mari kita secara terpisah membuat file gaya bernama main.css. Daftarnya ditunjukkan secara lengkap di bawah ini.

Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*align the list to the left*/ width:auto;/*mengatur lebar otomatis berdasarkan jenis dan isi daftar */ background-image: url(bg.gif); /*mengatur gambar latar belakang*/ background-repeat:repeat-x; /*mengulang gambar kita secara horizontal*/ list-style:none; /*hapus penanda daftar*/ warna latar:#4778c3; /*mengatur warna latar belakang untuk gambar*/ ukuran font:13px; /*mengatur ukuran font*/ font-family:Arial, Helvetica, sans-serif ; /*mengatur font*/ ) ul li ( float:kiri; /*sejajarkan elemen daftar ke kiri*/ ) ul a ( tampilan:blok; /*mewakili tautan menu sebagai elemen blok*/ lebar:100px; /* atur ukuran blok*/ tinggi:30px; /* dan tinggi blok*/ text-align:center; /*teks tengah*/ tinggi baris: 2,1em; hapus garis bawah dari tautan*/ color:#fff; /*warna teks tautan - putih*/ border-right:#fff solid 1px; /*border di sisi kanan blok (garis putih 1px)*/ ) ul a: arahkan kursor ( warna:#ccc; /*link berubah warna ketika diarahkan ke atas*/ )

Menurut saya tidak boleh ada pertanyaan tentang isi file main.css, tipsnya saya tulis di kolom komentar dengan cukup detail dan jelas, jadi saya tidak akan mengulanginya lagi. Jangan lupa untuk menghubungkannya ke halaman menu.html kami menggunakan

Mari kita rangkum. Hasilnya, kami mendapatkan menu horizontal lintas-browser yang terlihat sama tidak hanya di semua browser modern, tetapi juga pada browser langka seperti IE 5.5 dan IE 6.0. Semua elemen menu disajikan sebagai elemen blok dan memiliki dimensi yang sama yaitu lebar 100 px dan tinggi 30 px. Sebagai pemisah item menu, digunakan desain elemen blok menggunakan batas kanan putih setebal 1px. Ini praktis merupakan cara paling sederhana untuk mengimplementasikan menu horizontal. Tentu saja, jika diinginkan, Anda dapat memodifikasinya, menjadikannya lebih indah dan fungsional menggunakan imajinasi, properti CSS, dan elemen grafis tambahan. Nah, menu horizontal kita terlihat seperti ini:

Kelebihan dari solusi ini:
Mudah dilakukan
Kode sederhana
Tidak ada tabel atau javascript
Kompatibilitas lintas browser: menu terlihat sama di semua browser
Hanya satu gambar yang digunakan
Kode minimum pada halaman menu.html
Kode minimum untuk mengimplementasikan gaya di main.css

File yang digunakan dalam contoh ini dapat diunduh di arsip

Kebanyakan situs web klasik di Internet menggunakan menu horizontal sebagai elemen navigasi utama. Terkadang mungkin berisi berbagai fitur tambahan - struktur multi-level, ikon untuk sub-item, blok pencarian, daftar kompleks, dll. Baru-baru ini ada sedikit pilihan di blog, dan hari ini kita akan melihat 4 contoh praktis cara membuat menu drop-down menggunakan CSS + HTML. Informasi ini akan berguna bagi pengembang pemula dan mereka yang ingin mengubah navigasi di situs web mereka.

Tutorial Dropdown Menu CSS3 yang pertama adalah koleksi terbaru (mulai April 2016). Kelebihan solusinya: dalam menu drop-down horizontal untuk situs ini, sub-itemnya berisi ikon, implementasi dan kode CSSnya sendiri cukup sederhana untuk dipahami dan diterapkan.

Langkah 1 - markup HTML

Langkah pertama adalah membuat daftar tidak berurutan dalam HTML dengan link jangkar (#) untuk elemennya. Di sana, di salah satu item, kami menambahkan daftar bersarang lainnya, yang akan bertanggung jawab atas submenu.

• Dasbor saya
• Suka
• Tampilan
  • Dokumen
  • Pesan
  • Keluar
• Unggahan
• Video
• Dokumen

Langkah2 - Tampilkan menu

Kami menghapus indentasi yang tidak perlu di CSS untuk elemen menu tarik-turun horizontal situs. Pada tahap yang sama, kita akan menetapkan lebar dan tinggi tetap item menu, dan juga menambahkan sudut membulat.

Menu, .menu ul, .menu li, .menu a ( margin: 0; padding: 0; batas: tidak ada; garis besar: tidak ada; ) .menu ( tinggi: 40 piksel; lebar: 505 piksel; latar belakang: #4c4e5a; latar belakang: - webkit-linear-gradient(atas, #4c4e5a 0%,#2c2d33 100%); latar belakang: -moz-linear-gradient(atas, #4c4e5a 0%,#2c2d33 100%); 100%); latar belakang: -ms-linear-gradient(atas, #4c4e5a 0%,#2c2d33 100%); radius: 5px; -moz-border-radius: 5px; border-radius: 5px; posisi: relatif; gaya daftar: tidak ada; float: kiri;

Step3 - desain tautan

Selain fitur dasar dalam gaya (font, warna, tinggi), kami menggunakan dan membuat transisi warna teks yang mulus saat mengarahkan kursor. Kami juga menambahkan pemisah ke menu, menghapus batas dari elemen pertama di kiri dan elemen terakhir di kanan.

Menu li a ( tampilan: blok; padding: 0 14px; margin: 6px 0; tinggi garis: 28px; dekorasi teks: tidak ada; batas kiri: 1px solid #393942; batas kanan: 1px solid #4f5058; font- keluarga: Helvetica, sans-serif; berat font: tebal; warna: #f3f3f3; bayangan teks: 1px 1px 1px rgba(0,0,0,.6); -transisi: warna .2s kemudahan masuk; -o-transisi: warna .2s kemudahan masuk; keluar; transisi: warna .2s kemudahan masuk; ) .menu li:anak pertama a ( perbatasan -kiri: tidak ada; ) .menu li: anak terakhir a( batas kanan: tidak ada; ) .menu li: arahkan kursor > a ( warna: #8fde62; )

Langkah4 - submenu

Karena kita memiliki menu drop-down situs menggunakan CSS, kita juga harus mengatur desain untuk daftar bersarang. Pertama, atur margin 40px di atas dan 0px di kiri + tambahkan sudut membulat. Untuk menampilkan/menyembunyikan submenu, pertama-tama setel properti opacity ke nol, dan saat mengarahkannya ke satu. Untuk membuat efek munculnya submenu, atur nilai tinggi daftar ke nol, dan dengan hover = 36px.

Menu ul ( posisi: absolut; atas: 40px; kiri: 0; opacity: 0; latar belakang: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radius: 0 0 5px 5px; -webkit-transisi: opacity .25s kemudahan .1s; -moz-transisi: opacity .25s kemudahan .1s; opacity .25s kemudahan .1s; ) .menu li:hover > ul ( opacity: 1; ) .menu ul li ( tinggi: 0; overflow: tersembunyi; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: tinggi .25s kemudahan .1s; -ms-transisi: tinggi .25s kemudahan .1s; ) .menu li:hover > ul li ( tinggi: 36px; overflow: terlihat; padding: 0; )

Kami mengatur lebar tautan = 100px, batas bawah ditambahkan di bagian bawah semua elemen kecuali yang terakhir. Selain itu, jika diinginkan, Anda dapat menempatkan gambar untuk item submenu (perhatian! jangan lupa mengubah jalur ke gambar dalam kode ke yang Anda gunakan).

Menu ul li a ( lebar: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( border: none; ) . menu a.documents ( background: url(../img/docs.png) no-repeat 6px center; ) .menu a.messages ( background: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( latar belakang: url(../img/arrow.png) tanpa pengulangan 6px tengah; )

Saya pribadi menyukai kemudahan implementasi dan penggunaan ikon. Berikut adalah kode terakhir dari codepen:

Opsi Josh Riser secara visual mirip dengan menu dropdown HTML dan CSS sebelumnya. Kode tidak memiliki pemilih anak ">" (berguna dalam desain multi-level), tetapi penulis memanfaatkan efek CSS3 (transisi, bayangan kotak, dan bayangan teks) dengan baik untuk hasil yang lebih indah. Link di sumbernya tidak menjelaskan proses pembuatan menu drop-down horizontal, jadi saya akan langsung memberikan kode terakhirnya:

Dalam contoh ini, kita akan melihat cara membuat menu drop-down menggunakan CSS, yang selain itemnya, akan berisi blok pencarian. Implementasi serupa sering ditemukan di zaman modern. Dalam hal waktu implementasi dan kompleksitas, solusinya sedikit lebih rumit dibandingkan solusi sebelumnya. Itu diterbitkan pada Mei 2013, jadi Anda mungkin perlu mengubah beberapa hal, meskipun itu berfungsi dengan baik dalam pengujian kami.

kode HTML

Untuk navigasi, seperti biasa, daftar tidak berurutan (dengan kelas nav) digunakan. Item menu reguler adalah item daftar (li) dan berisi tautan (a href) tanpa kelas atau ID apa pun. Pengecualiannya adalah 3 elemen khusus dari menu tarik-turun horizontal ini dengan ID berikut:

• pengaturan — gambar tautan;
• pencarian — blok dengan pencarian dan tombol yang sesuai;
• options - berisi submenu (diimplementasikan melalui daftar dengan kelas subnav).

Juga dalam kode Anda akan melihat skrip bebas awalan untuk menggunakan properti CSS tanpa awalan. HTML terakhir untuk menu dropdown terlihat seperti ini:

• 
• Aplikasi
• Papan
• Pilihan
  • Pengaturan
  • Aplikasi
  • Papan
  • Pilihan

Tidak bisa CSS

1. Gaya dasar dan elemen menu

Pertama, kita tentukan font Montserrat, latar belakang abu-abu gelap, dan tinggi tetap untuk item menu. Semua elemen memiliki float: perataan kiri dan posisi relatif sehingga nantinya Anda dapat menambahkan submenu dengan position: absolute;

* ( margin : 0 ; padding : 0 ; ) .nav ( latar belakang : #232323 ; tinggi : 60px ; tampilan : inline-block ; ) .nav li ( float : kiri ; tipe gaya daftar : tidak ada ; posisi : relatif ; )

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margin: 0; padding: 0; ) .nav ( latar belakang: #232323; tinggi: 60px; tampilan: inline-block; ) .nav li ( float: kiri; tipe gaya daftar: tidak ada; posisi: relatif; )

2. Memformat tautan

.nav li a ( ukuran font : 16px ; warna : putih ; tampilan : blok ; tinggi garis : 60px ; padding : 0 26px ; dekorasi teks : tidak ada ; batas kiri : 1px solid #2e2e2e ; font-family : Montserrat , sans-serif; bayangan teks: 0 0 1px rgba (255, 255, 255, 0.5) ; ukuran font: 10px ;

Navigasi li a ( ukuran font: 16px; warna: putih; tampilan: blok; tinggi garis: 60px; padding: 0 26px; dekorasi teks: tidak ada; batas kiri: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; bayangan teks: 0 0 1px rgba(255, 255, 255, 0.5); .nav li a:hover ( warna latar: #2e2e2e; ) #pengaturan a ( bantalan: 18px; tinggi: 24px; font -ukuran: 10 piksel; tinggi garis: 24 piksel)

3. Blok pencarian

#search ( lebar: 357px; margin: 4px; ) #search_text( lebar: 297px; padding: 15px 0 15px 20px; ukuran font: 16px; font-family: Montserrat, sans-serif; batas: 0 tidak ada; tinggi: 52px ; margin-kanan: 0; garis besar: tidak ada; float: kiri; kotak perbatasan: semua ) ::-webkit-input-placeholder ( /* browser WebKit */ warna: putih; ) :-moz-placeholder ( /* Mozilla Firefox 4 hingga 18 */ warna: putih; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ warna: putih; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ warna: putih ; ) #teks_pencarian:fokus ( latar belakang: rgb(64, 151, 119); ) #tombol_pencarian ( batas: 0 tidak ada; latar belakang: #1f7f5c url (pencarian.png) tengah tanpa pengulangan; float: kiri; perataan teks: 52 piksel;

4. Submenu tarik-turun

Sentuhan terakhir akan memungkinkan kita membuat menu drop-down di CSS yang mengaktifkan item #options terakhir.

#options a( border-left: 0 none; ) #options>a ( gambar latar belakang: url(segitiga.png); posisi latar belakang: 85% tengah; pengulangan latar belakang: tanpa pengulangan; padding-kanan: 42px; ) .subnav ( visibilitas: tersembunyi; posisi: absolut; atas: 110%; kanan: 0; lebar: 200 piksel; tinggi: otomatis; opacity: 0; transisi: semua 0,1 detik; latar belakang: #232323; ) .subnav li ( float : tidak ada; ) .subnav li a ( batas bawah: 1px solid #2e2e2e; ) #options:hover .subnav ( visibilitas: terlihat; atas: 100%; opacity: 1; )

Dalam gaya Anda akan menemukan penyisipan gambar latar belakang segitiga (triangle.png) untuk menunjukkan submenu - jangan lupa untuk menunjukkan jalur yang benar untuk gambar ini dan gambar lainnya dalam contoh. Tampilan submenu diimplementasikan menggunakan properti opacity. Solusi akhir pada codepen:

Opsi ini terutama menggunakan teknik CSS2.1, solusinya baru, plus atau minus - untuk Maret 2015. Jika Anda kehilangan satu sublevel dalam menu tarik-turun horizontal untuk sebuah situs, maka contoh ini berisi tiga sublevel sekaligus. Menggunakan pseudo-class:only-child, simbol “+” ditambahkan ke item untuk menunjukkan keberadaan submenu.

Secara keseluruhan, contoh yang bagus dan sederhana. Kami tidak akan menjelaskan proses implementasinya secara detail, karena... ini mirip dengan yang sebelumnya - pertama Anda membuat kerangka HTML, dan kemudian secara bertahap menambahkan gaya untuknya. Unduh kode akhir menggunakan tautan ke sumbernya; Anda dapat melihat sebagiannya di Codepen:

Total

Di atas kita melihat 4 opsi cara membuat menu drop-down menggunakan CSS + HTML, meskipun masih banyak lagi contoh serupa di Internet. Ada solusi dengan jQuery, tetapi kemungkinan besar ini hanya berguna untuk mengimplementasikan beberapa efek khusus dan tugas non-standar. Dalam kebanyakan kasus, kombinasi CSS + HTML sudah cukup, terutama karena sekarang persyaratan utama sebuah menu adalah kenyamanan dan kecepatan memuat yang cepat.

Terakhir, dua catatan pada kode di atas. Beberapa contoh menggunakan gambar di CSS untuk menu tarik-turun, jadi Anda harus meninjau jalur gambar dengan cermat dan memberikan nilai yang benar untuk situs Anda. Kedua, beberapa solusi sudah berumur 2-3 tahun, jadi Anda juga harus memeriksa kinerjanya lagi di browser yang berbeda.

Jika Anda mengetahui implementasi modern menarik lainnya dari menu tarik-turun horizontal untuk situs web, kirimkan tautan di komentar.

Habr, halo!

Ada banyak solusi bagus dari berbagai pakar yang muncul di Codepen, dan saya yakin solusi terbaik harus dikumpulkan di satu tempat. Oleh karena itu, 2 tahun yang lalu saya mulai menyimpan skrip menarik tentang berbagai topik di komputer saya.

Saya biasa mempostingnya di grup produk mr cloud IDE. Gefest, ini adalah kumpulan 5-8 solusi. Namun sekarang saya sudah mulai mengumpulkan 15-30 skrip dalam berbagai topik (tombol, menu, tooltips, dan sebagainya).

Kumpulan besar seperti itu harus diperlihatkan kepada lebih banyak spesialis. Itu sebabnya saya mempostingnya di Habr. Saya harap mereka bermanfaat bagi Anda.

Dalam ulasan ini kita akan melihat menu multi-level.

Navigasi Horisontal Datar

Bilah navigasi yang indah dengan submenu yang muncul dengan lancar. Kode ini terstruktur dengan baik dan menggunakan js. Dilihat dari fitur yang digunakan, ini berfungsi di ie8+.
http://codepen.io/andytran/pen/kmAEy

Header Nav Material dengan Dropdown yang Selaras

Bilah tautan adaptif dengan submenu dua kolom. Semuanya dilakukan dalam css dan html. Menggunakan pemilih css3 yang tidak didukung di ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Menu Dropdown Akordeon Halus

Menu vertikal bergaya dengan elemen pembuka yang mulus. Transisi, kode transformasi js digunakan.
http://codepen.io/fainder/pen/AydHJ

Menu Navigasi Sebaris Gelap CSS Murni

Bilah navigasi vertikal gelap dengan ikon dari ionicons. JavaScript digunakan. Di ie8 kemungkinan besar akan berfungsi tanpa animasi.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Menu Dropdown Mega CSS3 Murni Dengan Animasi

Menu bergaya dengan dua format keluaran: horizontal dan vertikal. Ikon dan animasi CSS3 digunakan. Ini pasti akan terlihat buruk di ie8, tetapi di browser lain semuanya keren.
Tautan vertikal: http://codepen.io/rizky_k_r/full/sqcAn/
Tautan ke horizontal: http://codepen.io/rizky_k_r/pen/xFjqs

Menu Tarik-turun CSS3

Menu horizontal dengan elemen besar dan daftar link drop-down. Kode bersih dan minimalis tanpa js.
http://codepen.io/ojbravo/pen/tIacg

Menu Dropdown CSS Murni Sederhana

Menu horizontal sederhana namun bergaya. Menggunakan font yang luar biasa. Semuanya berfungsi di css dan html, tanpa js. Ini akan bekerja di ie8.
http://codepen.io/Responsive/pen/raNrEW

Menu tarik-turun besar Bootstrap 3

Solusi terbaik untuk toko online. Menampilkan beberapa tingkat kategori dan gambar besar (misalnya, produk yang sedang dijual). Hal ini didasarkan pada boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Navigasi Datar

Bilah navigasi bergaya dengan submenu halus. Di browser lama ini akan menampilkan masalah.
http://codepen.io/andytran/pen/YPvQQN

Navigasi bersarang 3D

Menu horizontal dengan animasi yang sangat keren tanpa js!
http://codepen.io/devilishalchemist/pen/wBGVor

Menu Mega Responsif - Navigasi

Menu responsif horizontal. Kelihatannya bagus, tetapi versi selulernya agak timpang. CSS, html dan js digunakan.
http://codepen.io/samiralley/pen/xvFdc

Menu Css3 Murni

Menu asli. Dengan kode sederhana dan bersih tanpa js. Gunakan untuk efek "wow".
http://codepen.io/Sonick/pen/xJagi

Menu Tarik-turun CSS3 Lengkap

Menu tarik-turun berwarna-warni dengan satu tingkat bersarang. Ikon dari font-awesome, html dan css digunakan.
http://codepen.io/daniesy/pen/pfxFi

Menu tarik-turun hanya CSS3

Menu horizontal yang cukup bagus dengan tiga tingkat sarang. Bekerja tanpa js.
http://codepen.io/riogrande/pen/ahBrb

Menu Tarik-turun

Menu minimalis dengan efek asli dari daftar elemen yang muncul. Saya senang solusi ini juga tanpa javascript.
http://codepen.io/kkrueger/pen/qfoLa

Menu DropDown CSS Murni

Solusi primitif namun efektif. Hanya css dan html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu - Konsep Interaksi Menu

Konsep menu yang menarik untuk ponsel. Saya belum pernah melihat yang seperti ini sebelumnya. Menggunakan html, css dan javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Buat Menu Dropdown Sederhana

Kode bersih dan sederhana, tanpa js. Ini pasti akan berhasil di ie8.
http://codepen.io/nyekrip/pen/pJoYgb

Tarik-turun CSS murni

Solusinya tidak buruk, tapi menggunakan terlalu banyak kelas. Saya senang tidak ada js.
http://codepen.io/jonathlee/pen/mJMzgR

Menu Tarik-turun

Menu vertikal yang bagus dengan kode javascript minimal. JQuery tidak digunakan!
http://codepen.io/MeredithU/pen/GAinq

Menu Tarik-turun CSS 3

Menu horizontal dengan tambahan caption dapat menghiasi website Anda dengan baik. Kodenya sederhana dan jelas. Javascript tidak digunakan.
http://codepen.io/ibeeback/pen/qdEZjR

Solusi cantik dengan banyak kode (html, css dan js). 3 format submenu telah dibuat. Solusinya sangat cocok untuk toko online.
http://codepen.io/martinridgway/pen/KVdKQJ

Dropdown Menu CSS3 (solusi khusus)!

Menu horizontal gelap dengan tiga belas (13) pilihan animasi! Saya sangat menyarankan Anda untuk membacanya, ini akan berguna dalam kehidupan sehari-hari.
http://codepen.io/cmcg/pen/ofFiz

P.S.
Saya harap Anda menyukai kumpulan 23 solusi. Jika Anda ingin terus membacanya, ikuti survei di bawah ini.
Nikmati pekerjaan Anda semuanya.

Tag ini dimaksudkan untuk menampilkan daftar item menu. Mirip dengan tag dan

di dalam wadah, daftar dibentuk menggunakan tag
• .

  Dalam HTML4, tag sudah tidak digunakan lagi, disarankan untuk menggunakan tag saja

  . Di HTML5 tag disertakan lagi, tetapi dalam kapasitas yang berbeda. Sekarang berfungsi sebagai wadah untuk pembuatan tag dan menu.
  Sintaksis

  HTML	butir menu butir menu
  HTML5	...

  Atribut Menetapkan label yang terlihat untuk menu.

  Mengatur jenis menu.

  Tag penutup

  Diperlukan.

  Validasi

  Penggunaan tag ini dilarang oleh spesifikasi HTML4; kode valid hanya diperoleh bila menggunakan transisi . Di HTML5, tag digunakan dengan benar.

  HTML 4.01 YAITU Cr Op Sa Fx

  • label MENU
  • Dalam edisi ini:
  • Masakan Rusia. Sup Burlatskaya
  • Masakan Ukraina. pangsit
  • Masakan Moldova. paprika

  Masakan Kaukasia. Sup Kharcho

  Masakan Baltik. Vertinyai

  Hasil dari contoh ini ditunjukkan pada Gambar. 1.

  Beras. 1. Tampilan daftar yang dibuat menggunakan tag

  • HTML5 YAITU Cr Op Sa Fx
  • label MENU

  Baru... Buka... Simpan

  Salin Potong Tempel

  Dari penulis: Saya menyambut Anda di blog kami tentang pembuatan situs web. Ini adalah serangkaian artikel yang didedikasikan untuk spesifikasi baru dan hari ini saya ingin memberi tahu Anda cara membuat menu dalam HTML5 dan bagaimana proses ini berbeda dari versi bahasa sebelumnya.

  Baiklah, tapi apa bedanya dengan membuat navigasi utama (menu), karena Anda sedang membaca artikel tentang topik ini, maka pasti ada beberapa perbedaan. Nah, bagaimana menu tersebut dibuat sebelumnya? Biasanya, daftar berpoin digunakan untuk ini, yang ditempatkan di wadah tambahan untuk semua navigasi - div biasa.

  Jadi, dengan munculnya tag baru, kini Anda dapat melakukan sesuatu yang lebih benar - alih-alih menggunakan tag div, bungkus menu dalam nav - elemen semantik baru yang dibuat khusus untuk mengumpulkan tautan terpenting di dalamnya dan mengelompokkannya.

  Anda dapat meletakkan daftar atau hanya sekumpulan tautan di navigasi. Menurut saya ini adalah solusi yang lebih sederhana dan tepat, meskipun di banyak template Anda masih dapat melihat implementasi menu menggunakan tag ul, li, a.

  Menariknya, wadah navigasi dibuat khusus untuk tautan prioritas di halaman tersebut. Sebenarnya, bisa ada lebih dari satu wadah seperti itu dalam satu halaman, tetapi Anda harus menempatkan di dalamnya hanya tautan-tautan yang benar-benar membentuk navigasi utama (misalnya, menu utama atas dan duplikatnya di footer halaman).

  Cara membuat menu horizontal menggunakan html5

  Rumah Layanan Kontak Ulasan

  Anda bahkan tidak memerlukan pembingkaian apa pun dalam daftar; semuanya awalnya akan ditampilkan dalam satu baris, karena tautannya adalah elemen sebaris.

  Hal lainnya adalah desainnya sangat terbatas karena sifat inline-nya. Anda hanya dapat beroperasi dengan properti seperti: warna, ukuran font, margin. Jika Anda ingin mengatur warna latar belakang tertentu, membuat pemisah dan menambahkan padding (atau menentukan ukuran setiap item menu), Anda tidak akan dapat melakukannya dengan garis.

  Di sini kita harus mengubah item kita menjadi elemen blok. Untuk melakukan ini, mereka perlu menulis properti:

  tampilan: blok;

  Sekarang mereka bergerak dari atas ke bawah, artinya navigasi kita menjadi vertikal. Untuk mengubahnya kembali menjadi horizontal, Anda perlu menambahkan properti tertentu. Misalnya, alih-alih tipe blok, tentukan tipe garis blok untuknya, atau berikan (float: kiri). Baca lebih lanjut tentang metode ini.

  Navigasi vertikal

  Biasanya untuk membuat menu vertikal di html5 mereka menggunakan list, tapi markup yang saya berikan di atas juga cocok untuk kita. Seperti yang Anda lihat, jika Anda mengonversi tautan menjadi tautan blok, tautan tersebut secara otomatis akan berbaris satu demi satu dari atas ke bawah, karena dua blok tidak dapat berada pada jalur yang sama.

  Sekarang Anda dapat menerapkan aturan desain yang diperlukan pada mereka. Blok memiliki lebih banyak properti daripada elemen sebaris, sehingga Anda memiliki lebih banyak opsi. Misalnya, saya menambahkan ini:

  a( dekorasi teks: tidak ada; warna: #fff; padding: 5px; ukuran font: 22px; tampilan: blok; latar belakang: gradien linier(ke kanan, rgba(96,108,136,1) 0%,rgba(63,76,107 ,1) 100%); lebar: 200 piksel; perataan teks: tengah )

  teks - dekorasi : tidak ada ; warna : #fff; bantalan: 5 piksel; ukuran font: 22px; tampilan: blok; latar belakang: linier - gradien (ke kanan, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%); lebar: 200 piksel; teks - rata : tengah