contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

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

▼ Download Source Code Dibawah Ini ▼


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 Rekomendasi



Artikel Terkait

Diskusi