Menu Website Dengan Submenu Menggunakan HTML dan CSS


Menu adalah bagian terpenting dari sebuah website, dengan adanya menu pengunjung bisa dengan bebas menelusuri halaman-halaman website yang kita sediakan, untuk membuat menu ini bisa dilakukan hanya dengan menggunakan HTML dan CSS termasuk sebuah menu yang memiliki 1 level submenu (Tidak ada submenu lain di dalam submenu karena dianggap tidak efektif).

Kode HTML

Menu bisa dibuat dengan menggunakan teks dan link menggunakan tag <a href>, tetapi untuk membuat menu dengan submenu, kita akan menggunakan list, baik itu ordered (dengan angka) maupun unordered (dengan simbol), untuk membuat menu kali ini kita akan menggunakan unordered list ( <ul> </ul> ).

Misalnya dalam menu kita akan memiliki 4 buah menu dimana pada menu ke-3 akan memiliki sub menu yang berisi 3 menu item, di sini kita menggunakan list di dalam list, sehingga kode HTML-nya :

<ul>
    <li><a href="#">Menu 01</a>
    <li><a href="#">Menu 02</a>
    <li><a href="#">Menu 03</a>
    <ul>
        <li><a href="#">Menu 03 Sub-01</a>
        <li><a href="#">Menu 03 Sub-02</a>
        <li><a href="#">Menu 03 Sub-03</a>
    </ul>
    <li><a href="#">Menu 04</a>
</ul>

unordered list di bawah Menu 03 akan menjadi submenu yang akan ditampilkan bila mouse kita arahkan ke Menu 03. Bila ingin menambahkan sub menu, misalnya pada Menu 02 cukup dengan menambahkan unordered list seperti pada Menu 03.

*Perhatikan: Penulisan list tidak menggunakan tag penutup ( </li> )

Kode CSS

Sekarang kita menggunakan kode CSS untuk memodifikasi tampilan dari menu yang berupa list tersebut menjadi tampak seperti sebuah menu horizontal.

Pertama kita modifikasi dahulu tampilan teks untuk linknya termasuk ketika mouse diarahkan ke masing-masing elemen menu

a {
    text-decoration: none;
    color: #000;
}

a:hover {
	font-style: italic;
	color: blue;
}

Kode di atas akan membuat link pada menu berwarna hitam dan tidak menampilkan underline, dan ketika mouse diarahkan pada link dalam menu maka tulisan akan berubah menjadi italic (miring) dan berwarna biru.

Berikutnya kita menghilangkan symbol dan meratakan posisi menu.

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #000;
}

Setelah symbol tidak terlihat sekarang kita akan mengubah tampilan list menjadi horizontal dan menyembunyikan sub-menu pada Menu-03.

li {
    display: inline-block;
    padding: 5px 10px;
    background-color: #ddd;
}

li ul {
    display: none;
}

Berikutnya kita akan membuat : bila mouse diarahkan ke salah satu elemen list, maka salah satu elemen list di bawahnya (submenu) akan ditampilkan, untuk itu kita menggunakan tanda > pada elemen CSS.

ul li:hover > ul {
	display: block;
	position: absolute;
	width: 200px;
	background-color: #ddd;
}

Kode di atas berarti ketika mouse diarahkan ke salah satu menu item, maka elemen submenu akan ditampilkan dalam format block (vertikal) dengan posisi absolute (tidak mempengaruhi elemen lain) juga memiliki lebar sekitar 200px dan warna background dengan kode #ddd (sama dengan menu).

Menu sudah jadi dan mungkin kita ingin sedikit memodifikasi kode CSS agar tampilan menu sesuai dengan keinginan kita dan menempatkannya ke dalam ruang yang sudah kita sediakan untuk menu dalam website kita.

Download file sample : menu-sample.zip | file size : 591 bytes


Dipublikasikan oleh theangelwing dalam kategori Website pada tanggal Feb 01, 2016
Tags : , ,


www.000webhost.com