Cara Membuat Menu Dropdown Vertikal

Daftar Isi:

Cara Membuat Menu Dropdown Vertikal
Cara Membuat Menu Dropdown Vertikal

Video: Cara Membuat Menu Dropdown Vertikal

Video: Cara Membuat Menu Dropdown Vertikal
Video: Cara Membuat Menu Dropdown HTML CSS 2020 (How to Make Drop Down Menu Using HTML CSS) 2024, Mungkin
Anonim

Menu tarik-turun vertikal sangat berguna - ini menghemat ruang di halaman web, sementara pada saat yang sama membantu menavigasi situs dengan mudah. Cobalah untuk membuat menu dropdown berdasarkan CSS - Cascading Style Sheets. Jika Anda belum ahli dalam membuat kode CSS, maka gunakan layanan purecssmenu.com. Anda diminta untuk memilih jenis menu, menyesuaikan tampilannya, dan kemudian menyesuaikannya dengan situs Anda sendiri. Layanan itu sendiri akan menghasilkan kode yang diperlukan, yang kemudian Anda masukkan ke dalam file situs Anda.

Cara membuat menu dropdown vertikal
Cara membuat menu dropdown vertikal

instruksi

Langkah 1

Daftar di situs web purecssmenu.com, jika tidak, Anda tidak akan dapat mengunduh menu yang dibuat. Klik tombol Template di sisi kiri halaman. Di bawah ini Anda akan melihat beberapa jendela kecil dengan templat menu drop-down, mengklik yang akan memuat pratinjau di sebelah kanan di jendela Pratinjau. Pilih template yang sesuai dengan situs Anda

Langkah 2

Sesuaikan font dan warna menu: gunakan tab Parameter. Di bidang Font, pilih font, ukuran font, jika perlu, garis bawahi dan tebal. Di bidang Warna, atur latar belakang menu, warna font, dan warna kursor dan warna kursor latar belakang

Langkah 3

Buka tab Item untuk mengelola item menu. Jika Anda mengklik tombol Hapus tempat sampah, item sampel akan dihapus dan Anda dapat membuatnya sendiri. Untuk melakukan ini, tekan tombol Tambah Item plus - item akan ditambahkan ke akhir menu. Tombol Tambah Item Berikutnya digunakan untuk menambahkan item setelah waktu yang dipilih saat ini. Tombol Add Subitem membuat item sub-menu untuk pilihan. Oleh karena itu, untuk menghapus item, gunakan tombol Hapus Item

Langkah 4

Perhatikan kolom Parameter Item di bagian bawah situs. Di baris Teks, tentukan nama item menu, di baris Tautan - url halaman yang akan dituju item ini. Di baris Tip, Anda dapat meninggalkan deskripsi item, yang akan ditampilkan saat Anda mengarahkan kursor ke tautan. Garis Target digunakan untuk menentukan cara membuka halaman yang dituju oleh tautan tersebut. Parameter _self pada baris ini membuka halaman di jendela browser yang sama dengan yang sekarang

Langkah 5

Setelah menyelesaikan pengaturan menu, unduh - klik tombol Unduh di kanan bawah halaman (fungsi ini tersedia setelah mendaftar di situs). Pilih folder di hard drive Anda tempat file arsip akan disimpan. Buka kemasannya. Anda perlu menyalin kode yang diperlukan dari file purecssmenu.html ke file template CSS situs Anda. Buka file purecssmenu.html dengan editor teks dan salin kode di antara tag dan ke dalam template CSS situs Anda (file ini memiliki ekstensi.css dan terlihat seperti file.css). Sekarang rekatkan kode ke file template situs (tema) Anda - kode dari purecssmenu.html di antara komentar dan alih-alih kode menu biasa. Untuk melakukan ini, Anda harus setidaknya sedikit terbiasa dengan pemrograman. Pastikan untuk menempelkan kode ke file yang benar dan simpan.

Direkomendasikan: