Sunday, November 13, 2011

Membuat Menu Vertikal sederhana dengan CSS

Judul diatas merupakan judul artikel pertama bagi saya, karena baru kali ini saya membuat artikel sendiri. Artikel ini akan membimbing anda untuk menciptakan sebuah menu vertical yang menarik untuk desain web anda.
Saya menggunakan HTML + CSS untuk membuat menu ini.

Persiapan :
Code Editor, program untuk mengedit file HTML dan CSS. 
Seperti Notepad, Notepad++, Dreamveaver, dsb. Saya menyarankan untuk menggunkan Notepad, dan Notepad++ bila tersedia.

Web browser, program untuk menampilkan halaman HTML yang telah anda buat. Saya yakin anda sudah memiliki Internet Explorer pada komputer anda. Firefox dan Google Chrome tentu saja dapat digunakan juga.

Membuat kode HTML

Buka notedpad anda, dan ketikan tag-tag dasar HTML. Yaitu :

<html>
    <head>
        <title>Membuat Menu Vertikal dengan CSS</title>
    </head>
    <body>
    </body>
</html>

Merancang menu dengan list

Ketikan kode dibawah ini diantar tag <body></body>. Dan pada artikel ini saya menggunakan list tanpa penomoran (unordered list).

<body>
    <h3>CSS Vertical Menu</h3>
    <ul>
         <li><a href="#">Menu 1</a></li>
         <li><a href="#">Menu 2</a></li>
         <li><a href="#">Menu 3</a></li>         
         <li><a href="#">Menu 4</a></li>
         <li><a href="#">Menu 5</a></li>
     </ul>
</body>
Setalah menambahkan kode diatas, lalu simpanlah dokumen ini dengan ekstensi .htm atau .html
Contoh : menu.html
Lalu eksekusi fine ini dengan double clik atau dengan klik kanan dan pilih open with Firefox atau browser yang tersedia.
Perhatikan hasilnya :

 















Membuat kode CSS

Kerena menu yang akan kita buat tidak memerlukan begitu banyak tambahan CSS. Maka saya akan menggunakan Internal CSS.

Tambahkan kode ini diantara tag <head></head>

<head>
        <title>Membuat Menu Vertikal dengan CSS</title>
        <style type=”text/css”>
        /* area kode css */
        </style>
</head>

Membuat selector baru

Ada tiga tipe selector dalam css, yaitu selector standar html(body, p, h1, dll), id(#) dan class(.)
Pada artikel ini saya menggunakan selector class, karena menu ini dapat digunakan secara berulang kali dan dapat diperbanyak dalam 1 halaman.

Tambahkan koden ini di area CSS.
.menuvert {
    width:200px;
    height:auto;
    margin:0;
    padding:0;
}

Memanggil class CSS

Tambahkan kode ini pada HTML, di antara tag <body></body>

<div class=”menuvert”>
</div>

Dan pindahkan kode menu yang telah kita buat ke dalam class ini.

<body>
    <div class=”menuvert”>
    <h3>CSS Vertical Menu</h3>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li>
<a href="#">Menu 2</a></li>
        <li>
<a href="#">Menu 3</a></li>
        <li>
<a href="#">Menu 4</a></li>
        <li>
<a href="#">Menu 5</a></li>
    </ul>
</div>
</body>

Menghilangkan icon pada list

tambahkan kode dibawah ini pada css
.menuvert ul {
    list-style:none;
}

save pekerjaan anda, lalu perhatikan browser setelah di refresh, maka tanda bulat akan hilang.

Menghilangkan garis bawah pada list

jika ada garis bawah dan tanda telunjuk tangan pada teks, ini menandakan bahwa elemen tersebut berisi link, jadi kita harus mengganti properti pada tag <a></a> dan kita akan meru propertinya pada CSS.

tambahkan kode berikut :

.menuvert ul li a {
    text-decoration:none;
}

refresh browser anda dan perhatikan efeknya :

















Memberi pengaturan menu : rata kiri, font, warna, border, background, display.

.menuvert ul li a {
            text-decoration:none;
            text-align:left;
            font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
            color:#555;
            padding:10px;      
            display:block;
            border-bottom:1px solid #CCC;  
            margin:1px;
            background:#EEE;

}

dan yang terakhir memberi efek hover(efek yang terjadi ketika kursos berada di atas menu)

.menuvert ul li a:hover {
            background:#555;
            color:fff;
            text-align:right;

}

Nah, menu sudah selesai. jika ada beberapa hal yang belum sesuai anda dapat mengecheck pekerjaan anda dan menhyesuaikannya dengan kode akhir dari menu yang saya buat.

<html>
    <head>
        <title>Membuat Menu Vertikal dengan CSS</title>
        <style type="text/css">
        .menuvert {
            width:200px;
            height:auto;
            margin:0;
            padding:0;
            }
        .menuvert h3 {
            font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;
            color:#FFF;
            background:#555;
            margin:1px;
            padding:10px;
        }
        .menuvert ul {
            list-style:none;
            margin:0;
            padding:0;
        }
        .menuvert ul li a {
            text-decoration:none;
            text-align:left;
            font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
            color:#555;
            padding:10px;       
            display:block;
            border-bottom:1px solid #CCC;   
            margin:1px;
            background:#EEE;
        }
        .menuvert ul li a:hover {
            background:#555;
            color:fff;
            text-align:right;
        }
       
        </style>
    </head>
    <body>
        <div class="menuvert">
            <h3>CSS Vertical Menu</h3>
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
            </ul>
        </div>
    </body>
</html>



sekian, tutorial ini saya tulis. apakah ada pertanyaan??


Article by : I Gede Surya Udayana

6 comments:

Surya Udayana said...

akhirnya selesai juga tutorial pertama yang saya tulis sendiri(tanpa copy-paste). semoga bermanfaat... :)

Erwin said...

nice thread gan ..

Surya Udayana said...

@Erwin : thank you Gan...

Unknown said...

aku sudah blajar dan hasilnya keren, bagus",,,

Surya Udayana said...

@Ferdy Primanatha : maksi bro.. semoga bermanfaat.

belajar agama islam dan teknologi said...

untuk mengisi konten caranya gimana menunya sudah jadi tinggal ngisi konten saja tapi ketika di eksekusi hilang

Post a Comment