Vertikal menu CSS: melakukannya sendiri

Beberapa webmaster tidak ingin menghabiskan waktu berkembang dari unsur-unsur sederhana awal yang sudah ada. Mereka percaya bahwa tidak ada gunanya membuang-buang waktu Anda pada sesuatu yang telah lama ada. Bahkan, bagi mereka yang hanya menguasai HTML dan CSS, penting untuk membuat diri Anda banyak hal untuk memiliki pemahaman yang baik tentang pekerjaan mereka. Hal ini berlaku untuk menu. Buat menu CSS vertikal. Ini akan didasarkan hanya pada HTML dan CSS, tanpa menggunakan Javascript dan JQuery. Setiap menu adalah daftar link yang mengarah ke halaman situs.

langkah dasar

Untuk membuat sederhana menu vertikal CSS, Anda perlu langkah-langkah berikut:

1. Pertama, menentukan daftar link (menggunakan kode HTML), yang menu akan. Memberi mereka nama, misalnya, adalah sebagai berikut:

1. Rumah.
2. sejarah kita.
3. Panduan.
4. Layanan.
5. Kontak.

2. Kemudian Styling link yang Anda inginkan dengan bantuan CSS.

Kita menulis kode HTML, tetap dalam file my_Vmenu.html dan melihat bagaimana hal itu akan terlihat di browser:

Ini adalah dasar (kerangka) dari menu kami. # 1, # 2, dll harus diganti dengan referensi. Melihat tampilannya di browser. Gambar yang Anda tidak akan suka. Sekarang kita harus mulai untuk menggambarkan unsur-unsur gaya, untuk membuat lengkap menu CSS vertikal.

Deskripsi gaya

Buat my_Vmenu.css file, yang mengatur segala sesuatu yang Anda ingin memperbaiki penampilan elemen yang penting dari situs. Berikut adalah kode, pengenalan yang akan merevitalisasi menu CSS vertikal. Dan menulis file baru, dan kemudian kita akan melihat lebih dekat arti dari jalur utama yang diberikan.

Uraian digunakan stylesheet

Sekarang perhatikan rincian dari menu vertical CSS kami:

list-style-type memungkinkan Anda untuk menghapus daftar penanda. Dengan menetapkan "0" untuk margin dan padding menghapus padding tambahan dalam daftar. Seperti dapat dilihat dari kode HTML, menu kami adalah daftar, dan gaya didefinisikan menggunakan CSS.

ul # my_Vmenu - gaya keseluruhan dari seluruh daftar.

ul # my_Vmenu li a - gaya hubungan antara tag li.

ul # my_Vmenu li a: hover - deskripsi dari jenis yang dipertimbangkan dari item menu pada saat satu melayang di atas orang.

ul # my_Vmenu li span - deskripsi teks (menu judul).

Ingat bahwa file my_Vmenu.css my_Vmenu.html dan harus dilestarikan dalam direktori yang sama. Namun, mereka mungkin berlokasi di folder yang berbeda, tapi kemudian penting untuk mendaftar di path file my_Vmenu.html ke my_Vmenu.css. Hati-hati, karena pendatang baru untuk masalah ini sering.

Gaya harus terhubung antara tag kepala dalam html-file. menu_1.png dan menu_2.png - ini adalah gambar untuk item menu gambar dalam keadaan normal dan melayang-layang.

Lebih baik untuk menyimpan gambar dalam folder terpisah untuk gambar, nama itu my_images, tapi kemudian Sesuaikan kode CSS. Menulis di mana gambar-gambar ini ditampilkan, mereka berada di direktori ini: url (my_images / menu_1.png) dan url (my_images / menu_2.png).

Dalam sisa sifat yang dijelaskan dalam kode CSS, untuk memahami dengan mudah. Mereka mendefinisikan penampilan menu kami. Sangat mudah untuk melihat bahwa lebar dan tinggi dari item yang ditentukan untuk item yang sama dalam keadaan normal, dan ketika Anda membawa mouse di atas mereka. Ukuran font 18px, padding menentukan lekukan dari sisi yang berbeda dari nama-nama tempat. display memungkinkan Anda mengatur unit display untuk mengatur lebar dan padding.

menu vertikal kami

Seperti yang Anda lihat, menu CSS vertikal untuk membuat mudah. Atas dasar data pengetahuan yang Anda akan dapat membuatnya cantik dan menarik untuk pengunjung ke situs web Anda! Gunakan imajinasi Anda, dan kemudian menu stylish untuk situs Anda.