Simple menu vertical dengan CSS

Publish Date : 11-03-2016 , dibaca 11180 kali, Hari ini dibaca : 1 kali ,0 comments

Artikel sebelumnya kita sudah membahas tentang Membuat Menu pure multilevel drop down, dengan CSS,, Pada postingan ini kita akan membahas Cara Membuat Menu Vertikal dengan CSS.. Dalam tutorial kali ini terlihat sederhana, Namun cobalah anda pelajari, sehingga anda bisa membuat menu sendiri

Demo Download

OK.. Untuk membuat Menu Vertikal dengan css ini , buka lah text editor anda, dan silahkan copy paste script dibawah ini :

HTML CODE :

<html>
<head>
<meta name="author" content="Suckittrees">
<link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="shortcut icon" href="http://suckittrees.com/favicon.png">
<link rel="icon" href="http://suckittrees.com/favicon.png">
</head>
<body>
<div class="menu_simple">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</body>
</html>

CSS CODE (menu.css)

/* Suckittrees.com Simple CSS menu */

.menu_simple ul {
    margin: 0; 
    padding: 0;
    width:185px;
    list-style-type: none;
}
.menu_simple ul li a {
    text-decoration: none;
    color: white; 
    padding: 10.5px 11px;
    background-color: #005555;
    display:block;
}
.menu_simple ul li a:visited {
    color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
    color: white;
    background-color: #5FD367;
}

Tempatkan 2 file diatas dalam sebuah folder , Untuk kode html, silahkan anda simpan dengan nama index.htm atau apapun itu, sementara untuk file css simpan dengan nama menu.css
, Dan Jalankan dibrowser anda.

Demo Download

Demikianlah artikel Cara membuat menu vertikal dengan CSS ,untuk Membuat sub menu silahkan lihat di artikel