contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Simple menu vertical dengan CSS

Posted in HTML & CSS Life at 11 Maret 2016 With 0 Comments

Membuat menu vertikal dengan css only

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

 

Artikel Terkait

Diskusi