Simple Horizontal Menu dengan CSS

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

Posting artikel kali ini masih berkaitan dengan Membuat Menu dengan CSS, namun pada postingan kali ini kita akan membuat mernu horizontal dengan css,Menu horizontal ini cukup simple untuk anda pelajari, Jika anda ingin memahami setiap coding yang ada saya sarankan untuk belajar mengetik sendiri, jangan biasakan copy paste , kecuali anda sudah memahaminya

Sebelum kita lanjut , bagi temen-temen yang belum membaca artikel saya sebelumnya silahkan dibaca ya ...

Beberapa Artikel Sebelumnya :

Demo Download

OK.. Mari kita mulai membuat Menu horizontal dengan CSS, oy jika anda ingin mengubah warna pada menu ini , anda dapat menggunakan Daftar Warna html untuk web designer pada artikel saya

Siapkan text editor anda, :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
  <meta name="author" content="Suckittrees">
  <title>Horizontal Menu dengan CSS3 Suckittrees.com</title>
  <link rel="shortcut icon" href="http://suckittrees.com/favicon.png">
  <link rel="icon" href="http://suckittrees.com/favicon.png">
  <link href="style.css" rel="stylesheet">
</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>
<br />
</div>
</body>
</html>

CSS CODE (style.css)

/* suckittrees.com Simple CSS menu */
br { clear:left }
.menu_simple {
    width: 100%;
    background-color: #FF9809;
}
.menu_simple ul {
    margin: 0; padding: 0;
    float: left;
}
.menu_simple ul li {
    display: inline;
}
.menu_simple ul li a {
    float: left; text-decoration: none;
    color: white; 
    padding: 10.5px 11px;
    background-color:  #FF9809;
}
.menu_simple ul li a:visited {
    color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
    color: white;
    background-color: #FFCD46;
}

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 style.css Dan Jalankan file index.htm nya dibrowser anda.

Demo Download

Demikianlah ,, Artikel Cara Membuat Menu horizontal dengan CSS, baca artikel selanjutnya :

Cara Membuat Menu dropdown dengan CSS

Menu Vertikal dan sub menu dengan CSS
Previous Post

Simple Menu dropdown dengan CSS
Next Post