My Opera Menu

Setelah membahas header myo, selanjutnya saya ajak anda menuju ke menu. Tapi sebelumnya mari sejenak melirik selector id menu pada html berikut

<div id="menu"><ul><li id="menu_blog"><a href="/user/blog/" id="selected"><span>Blog</span></a></li> <li id="menu_archive"><a href="/user/archive/"><span>Archive</span></a></li>

Anda harus memahami bahwa semua elemen html yang menggunakan selector ID di definisikan dengan “#” dan elemen yang menggunakan selector class didefinisikan dengan “.” Coba cocokkan CSS berikut dengan html diatas

#menu { height:28px; }
#menu { background:#333 url(menu2.gif); border-bottom:1px solid #000; }

Ini pertama dimulai pembentukan elemen menu, dengan ukuran tinggi 28px, background menggunakan warna hex #333 (hitam memudar sedikit), ditambah border solid dibagian bawah dengan warna hitam mutlak. kemudian

#menu ul { margin:0 0 0 20px; }
#menu ul { margin-left:15px; }

Untuk lebih mudah menata gaya diterapkan sebuah daftar buletted unordered list dengan menggunakan tag <ul> dengan pembatas luar kiri 15px atau 20px ini tergantung theme yang dipake, kemudian:

#menu li { float:left; list-style:none; line-height:28px; font-size:0.9em; }

Pada setiap list diset sebagai float:left ini untuk menjaga agar list tidak turun kebawah akan tetapi berjajar horisontal. Untuk menyesuaikan agar text mempunyai posisi yang bagus maka di tambahkan properti line-height dengan nilai 28px. Sedangkan size fontnya di set 0.9em. Penghitungan atara em dengan px rumusnya adalah: px/16 = em. jadi mudah anda menghitung begini 16 x 0.9em = 14.4px.

Sebelum dilanjutkan ada baiknya anda pahami juga yang satu ini.

a:link adalah link pada umumnya, a:visited adalah link yang sudah anda klik sebelumnya, dan anda benar bilang a:visited apabila anda sudah berada dalam halaman link tersebut, a:active adalah link yang sedang anda klik, a:hover adalah ketika mouse berada diatas link. urutannya adalah:
Sebelum datang a:hover harus sudah ada a:link dan a:visited.
Sebelum datang a:active harus sudah ada a:hover.

#menu a:link, #menu a:visited, #menu a:active {background:#333 url(menu2.gif); color:#fff; border-left:1px solid #000; border-right:1px solid #333; }

Ingat!, background, color dan border ini bukan untuk <li> tapi untuk link (a:) agar bisa membuat gaya yang berbeda, lihat lanjutan berikut

#menu a:link, #menu a:visited, #menu a:active { display:block; padding:0 19px; text-decoration:none; }

Tiga macam a: ini mempunyai gaya yang sama. display:block bertujuan agar warna background bisa memenuhi ruang link (tidak hanya pada teks nya saja) termasuk paddingnya juga.

#menu a:hover, #menu #selected:link, #menu #selected:visited { background-color:#111; }

Anda lihat dengan teliti bahwa ada tambahan #selected, ini berfungsi mengontrol a:link dan a:visited.
Sebuah contoh: saat anda masuk ke halaman blog maka didalam #menu_blog akan di tambahkan selector id lain. Lihatlah pada html berikut

<div id="menu"><ul><li id="menu_blog"><a href="/user/blog/" id="selected"><span>Blog</span></a></li> <li id="menu_archive"><a href="/user/archive/"><span>Archive</span></a></li> <li id="menu_albums"><a href="/user/albums/"><span>Albums</span></a></li>

#top #menu a:hover, #menu #selected:link, #menu #selected:visited { background-position:0 -28px; }

Pada id selected background gambar yang aslinya berukuran 1 x 56 ditarik keatas 28px. artinya setengah ke bawah yang dipake. Benar-benar cara yang sangat bagus karena background berefek gradient.

CATEGORY : Menu, Myopera TAG : belajar, code, css, desain, myopera, standar at Sunday, 14 February, 2010