contact

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


Simple Horizontal Menu dengan CSS

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

Cara Membuat Menu dengan CSS3Posting 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 ...

▼ Download Source Code Dibawah Ini ▼



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

Artikel Terkait

Diskusi