whycomputer.com >> Jaringan komputer >  >> Perangkat lunak

Cara Membuat Menu dan Submenu

Menu tarik-turun - juga dikenal sebagai menu "suckerfish" - gunakan kombinasi HTML dan CSS (Cascading Style Sheets) untuk struktur dan gaya. Bagian HTML dari menu drop-down terdiri dari daftar bullet dan daftar bullet bersarang. Setelah Anda menata bilah menu dan tautan navigasi utama di CSS, Anda menata daftar peluru bersarang sebagai submenu. Selektor ": hover" di CSS memungkinkan Anda mengubah properti tampilan submenu tersembunyi menjadi "blokir" untuk membuatnya muncul kembali.

Langkah 1
Kodekan menu Anda dalam HTML menggunakan "
"dan"

  • "tag:
  • Tautan 1
  • Tautan 2
  • Tautan 3

    Tambahkan div perbaikan-bersih sebelum akhir daftar. Anda akan menambahkan gaya ke kelas "clearfix" untuk membuat latar belakang menu menjadi lebih rendah.

    Langkah 2
    Tambahkan submenu Anda sebagai daftar tak berurutan baru yang bersarang di dalam tag "

  • " tautan induknya:
  • Tautan 1
  • Tautan 2
  • Tautan 1
  • Tautan 2
  • Tautan 3

  • Tautan 3


    Langkah 3
    Buka style sheet Anda, dan style menu Anda menggunakan CSS. Hapus peluru dan indentasi kiri: #menu {list-style: none; bantalan: 0; } Perhatikan bahwa "#menu" cocok dengan nama ID dari contoh kode HTML.

    Langkah 4
    Tambahkan warna latar belakang ke bilah menu Anda: #menu {list-style: none; bantalan: 0; background-color: darkblue; }

    Langkah 5
    Float item menu ke kiri sehingga mereka berbaris secara horizontal pada bilah menu: #menu li {float: left; }

    Langkah 6
    Gaya tautan yang membentuk item menu Anda. Tambahkan padding ke tautan untuk meluruskannya secara vertikal pada bilah menu sembari membuatnya lebih mudah untuk diklik dan diarahkan. Anda harus mengubah properti "display" menjadi "block" untuk menambahkan padding ke tautan: #menu li a {display: block; padding: 8px 15px; perataan teks: tengah; warna putih; font-weight: bold; teks-dekorasi: tidak ada; } Perhatikan bahwa dalam "padding," dua nilai telah ditetapkan. Nilai pertama adalah padding vertikal sedangkan yang kedua efek padding horizontal.

    Langkah 7
    Gaya submenu dan item-itemnya. Anda pertama-tama harus memposisikan submenu. Hapus juga peluru dan padding dari submenu: #menu ul {position: absolute; daftar-gaya: tidak ada; bantalan: 0; }

    Langkah 8
    Hapus float kiri dari item di submenu: #menu ul li {clear: left; }

    Langkah 9
    Tambahkan "dsiplay: none" ke aturan "#menu ul" untuk mematikan submenu, karena Anda tidak ingin itu muncul kecuali pengguna melayang di atas item induknya. Buat menu muncul lagi menggunakan kode ini: #menu li: hover ul {dipslay: block; }
    Tambahkan aturan "hapus perbaikan" ke div Anda: .clearfix {clear: Keduanya; }

    Kiat
    Tambahkan sorotan ke item menu Anda saat pengguna mendekatinya. Aturan gaya untuk mengubah warna latar belakang dari sebuah tautan melayang-layang tampak seperti "#menu a: hover {}".
    Setelah Anda selesai membangun menu menggunakan HTML dan CSS, Anda dapat menambahkan plugin jQuery untuk membuat animasi yang bagus untuk drop-down.


    URL:https://komputer.whycomputer.com/Perangkat-lunak/101307813.html

  • Perangkat lunak
    • Cara Membuat dan Mengedit Tabel di Microsoft Word

      Microsoft Word memudahkan untuk mengatur informasi dalam kolom dan baris menggunakan tabel. Tabel membuat data lebih mudah dibaca. Anda juga dapat membuat simetri dalam dokumen dengan membuat tabel untuk menampilkan teks dalam area tertentu pada halaman. Setelah Anda membuat tabel, edit dengan mengu

    • Cara Membuat Menu di Microsoft Publisher

      Microsoft Publisher adalah aplikasi Office yang sepertinya tidak sepopuler Word saudara kandungnya. Tetapi Penerbit dapat membantu Anda membuat publikasi yang dengan bangga Anda pamerkan. Jika Anda merasa terintimidasi oleh Penerbit, coba proyek ini. Anda dapat membuat menu untuk pesta makan mal

    • Cara Membuat Resume di WordPerfect

      Membuat resume bisa menghabiskan waktu dan membuat frustrasi. Memformat resume dan memutuskan informasi apa yang akan dimasukkan dapat memerlukan banyak perencanaan dan pemikiran yang matang. Untungnya, WordPerfect Corel memudahkan seluruh proses dengan templat resume mereka. Templat WordPerfect ada

    Jaringan komputer © https://komputer.whycomputer.com