Cara Membuat Menu Vertikal Untuk Situs Web

Daftar Isi:

Cara Membuat Menu Vertikal Untuk Situs Web
Cara Membuat Menu Vertikal Untuk Situs Web
Anonim

Menu vertikal untuk situs adalah fungsi yang sangat nyaman yang membantu menghemat ruang dan dengan mudah menavigasi sumber daya. Anda dapat membuatnya berdasarkan cascading CSS style sheets atau menggunakan alat khusus.

Cara membuat menu vertikal untuk situs web
Cara membuat menu vertikal untuk situs web

instruksi

Langkah 1

Buka situs web purecssmenu.com dan daftar di sana, jika tidak, Anda tidak akan dapat membuat dan mengunduh menu yang dibuat. Di sisi kiri, temukan tombol Template dan klik di atasnya. Di bawah akan ada jendela kecil dengan templat menu vertikal. Klik satu per satu dan lihat di jendela Pratinjau. Pilih template yang paling sesuai dengan situs Anda.

Langkah 2

Atur font dan warna menu menggunakan tab Parameter. Anda dapat memilih font dan ukurannya di bidang Font. Jika perlu, tentukan garis bawah/bold. Atur background (latar belakang) menu vertikal pada kolom Colors, atur warna font dan warna background pada hover (fonthover/backgroundhover).

Langkah 3

Buka menu Item untuk mengelola item menu. Mengklik tombol Hapus akan menghapus item sampel sehingga Anda dapat membuatnya sendiri. Cukup dengan mengklik tombol AddItem plus untuk menambahkan item ke akhir menu. Menggunakan tombol AddNextItem, Anda dapat menambahkan item yang akan mengikuti setelah waktu yang dipilih saat ini. Tombol AddSubitem di menu membuat item bersarang untuk item yang dipilih. Untuk menghapus garis, gunakan tombol RemoveItem.

Langkah 4

Buka parameter item (ItemParameters) di bagian bawah situs. Masukkan nama untuk item menu di baris Teks, dan alamat webnya di Tautan. Garis Tip bertanggung jawab atas deskripsi item, yang ditampilkan saat kursor melayang di atas tautan. Bagian Target mendefinisikan bagaimana halaman dibuka. Dengan parameter _self, halaman dapat dikonfigurasi untuk dibuka di jendela browser saat ini.

Langkah 5

Unduh menu yang sudah jadi dengan mengklik tombol Unduh di bagian bawah halaman. Salin kode yang sesuai yang terletak di file purecssmenu.html ke dalam file template CSS: di awal dan di akhir. Pastikan untuk menempelkan kode yang benar dan simpan file.

Direkomendasikan: