Membuat Menu Vertikal dengan CSS

Pada postingan yang lalu, saya sudah membahas bagaimana membuat Menu Navigasi Horizontal.Selain menggunakan menu horizontal,website juga terkadang dilengkapi dengan menu vertikal.

Biasanya, menu vertikal pada website berisi menu-menu tambahan, selain yang ada pada menu horizontal seperti, Recent Posts, Comments, dsb.Itu sedikit penjelasan mengenai menu vertikal.Sekarang cara buatnya…🙂

Pertama buat file html-nya, simpan dengan nama vertical.html

<html>
<head>
<title>Menu Vertikal</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="sidebar">
    <ul>
        <li><h3>Archives</h3>
        <li><a href="#">03 Agustus 2010</a></li>
        <li><a href="#">12 September 2010</a></li>
        <li><a href="#">17 Oktober 2010</a></li>
        <li><a href="#">02 Desember 2010</a></li>
    </ul>
</div>
</body>
</html>

Kemudian buat file css, simpan dalam satu folder dengan file html di atas dengan nama style.css.

    body{
        font:12px Verdana, Arial, Helvetica, sans-serif; /*setting font
untuk semua attribut*/
    }
    #sidebar ul{
        margin:0;padding:0; /*setting margin dan padding jadi 0*/
        list-style:none; /*menghilangkan tanda list-type ul*/
        float:left; /*float ke kiri, dirapatkan ke kiri*/
        width:200px; /*setting lebar 200 pixel*/
        background:#0099CC; /*set background biru*/
        padding-bottom:20px; /*padding bagian bawah 20 pixel*/
        border:3px solid #006699;
    }
    #sidebar li{
        width:100%; /*setting width untuk li ,100% sehingga otomatis
sesuai panjang ul*/
        margin:0;padding:0; /*margin dan padding 0*/
        list-style:none; /*menghilangkan tanda list-type li*/
    }
    #sidebar h3{
        margin:10px 0 4px 0; /*setting margin, atas=10px; kanan=0;
bawah=4px; kiri=0;*/
        padding:0 12px; /*setting padding atas dan bawah = 0;  dan
kanan ,kiri = 12px;*/
        color:#FFFFFF; /*setting warna font putih*/
        font-size:14px; /*ukuran font 14px*/
    }
    #sidebar a{
        display:block; /*display block artinya membuat panjang dan
lebar menjadi satu block; */
        padding:3px 10px; /*setting padding atas,bawah=3px; kanan,kiri=10px;*/
        text-decoration:none; /*setting text decoration dari link =none;
(menghilangkan garis bawah pada link)*/
        color:#FFFF00; /*setting warna font link */
        border-bottom:1px dotted #f2f2f2; /*setting border bawah sebuah link;*/
    }
    #sidebar a:hover{
        background:#0099FF; /*setting backgorund warna saat link di hover
(dilewati mouse) menjadi biru muda*/
    }

Nah, tuh sekalian aja saya berikan penjelasannya langsung di filenya…🙂

Selamat mencoba…dan tetap belajar.🙂

2 thoughts on “Membuat Menu Vertikal dengan CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s