Vertical Menu CSS: melakukan sendiri

Beberapa webmaster tidak mahu menghabiskan masa membangun dari awal elemen mudah yang sudah wujud. Mereka percaya bahawa tidak ada gunanya membuang masa anda pada sesuatu yang telah lama di sana. Malah, bagi mereka yang hanya menguasai HTML dan CSS, adalah penting untuk membuat diri anda banyak perkara yang perlu mempunyai pemahaman yang baik mengenai kerja mereka. Ini boleh digunakan untuk menu. Buat menu CSS menegak. Ia akan hanya berdasarkan HTML dan CSS, tanpa menggunakan Javascript dan JQuery. Setiap menu adalah senarai pautan yang membawa kepada muka surat laman web ini.

langkah asas

Untuk membuat mudah menu menegak CSS, anda perlu langkah-langkah berikut:

1. Pertama, menentukan senarai pautan (menggunakan kod HTML), yang mana menu akan. Memberi mereka nama, sebagai contoh, adalah seperti berikut:

1. Home.
2. sejarah kita.
3. Membimbing.
4. Services.
5. Kenalan.

2. Kemudian Styling pautan yang anda mahu dengan bantuan CSS.

Kita menulis kod HTML, menyimpan dalam fail my_Vmenu.html dan melihat bagaimana ia akan kelihatan dalam pelayar:

Ini adalah asas (rangka) daripada menu kami. # 1, # 2, dan lain-lain perlu digantikan dengan rujukan. Melihat bagaimana ia kelihatan dalam pelayar. Gambar anda tidak akan suka. Sekarang kita mesti mula untuk menggambarkan unsur-unsur gaya, untuk membuat menu CSS menegak lengkap.

Huraian gaya

Buat my_Vmenu.css fail, yang menetapkan segala-galanya yang anda mahu untuk memperbaiki rupa seperti elemen penting dalam laman web ini. Berikut adalah kod, pengenalan yang akan memulihkan semula menu CSS menegak. Dan menulis fail baru, dan kemudian kami akan mengambil melihat dengan lebih dekat pengertian garis utama yang diberikan.

PENERANGAN TERPERINCI lembaran gaya yang digunakan

Sekarang pertimbangkan butiran menu menegak CSS kami:

senarai-gaya-jenis membolehkan anda untuk membuang senarai penanda. Dengan menetapkan "0" kepada margin dan padding mengeluarkan padding tambahan di dalam senarai. Seperti yang dapat dilihat dari kod HTML, menu kami adalah senarai dan gaya yang ditentukan dengan menggunakan CSS.

ul # my_Vmenu - gaya keseluruhan keseluruhan senarai.

ul # my_Vmenu li yang - Pautan gaya antara li tag.

ul # my_Vmenu li a: hover - gambaran jenis yang dipertimbangkan item menu pada satu masa apabila seseorang berjalan dengan orang.

ul # my_Vmenu li span yang - penerangan teks (menu tajuk).

Ingat bahawa fail my_Vmenu.css my_Vmenu.html dan perlu dipelihara dalam direktori yang sama. Walau bagaimanapun, mereka boleh berada di dalam folder yang berbeza, tetapi kemudian ia adalah penting untuk mendaftar dalam laluan fail my_Vmenu.html untuk my_Vmenu.css. Berhati-hati, kerana pendatang baru kepada masalah ini kerap.

Gaya mesti disambungkan antara tag kepala dalam html-fail. menu_1.png dan menu_2.png - ini adalah gambar untuk item menu gambar dalam keadaan biasa dan hover.

Ia adalah lebih baik untuk menyimpan imej-imej di dalam folder yang berasingan untuk imej, nama itu my_images, tetapi kemudian Laraskan kod CSS. Tulis di mana imej-imej ini ditunjukkan, mereka berada dalam direktori ini: url (my_images / menu_1.png) dan url (my_images / menu_2.png).

Di seluruh sifat-sifat yang dinyatakan dalam kod CSS, untuk memahami dengan mudah. Mereka menentukan kemunculan menu kami. Ia adalah mudah untuk melihat bahawa lebar dan ketinggian item yang ditentukan untuk barangan yang sama dalam keadaan biasa, dan apabila anda berlegar tetikus di atas mereka. Saiz fon 18px, padding menentukan lekukan dari sisi yang berbeza daripada nama-nama tempat. paparan membolehkan anda menetapkan unit paparan untuk menetapkan lebar dan padding.

menu menegak

Seperti yang anda lihat, menu CSS menegak untuk mewujudkan mudah. Berdasarkan data pengetahuan anda akan dapat untuk membuat ia cantik dan menarik kepada pengunjung ke laman web anda! Gunakan imaginasi anda, dan kemudian menu bergaya untuk melengkapkan laman web anda.