pemrograman web | category

by Unknown on 13 November 2012 di 1:34 PM

Kali ini gw mau share cara membuat menu navigasi dengan css .

HTML

<html>
<head>

<title>Menu Dropdown</title>
<link rel="stylesheet" href="style.css" type="text/css"/>

</head>
<body id="home">
<ul id="nav">
<li id="nav-home"><a href="home.html">Home</a></li>
<li id="nav-about"><a href="about.html">About</a></li>
<li id="nav-archive"><a href="archive">Archive</a></li>
<li id="nav-lab"><a href="lab.html">Lab</a></li>
<li id="nav-reviews"><a href="reviews.html">Reviews</a></li>
<li id="nav-contact"><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>

id pada element body , di ganti sesuai page masing" halaman. Untuk di halaman about, maka id pada body di ganti dengan about. Seterusnya juga sama.

CSS

body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif }
#nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: #808259 url(nav_bg.jpg) 0 0 repeat-x;
    float: left;
    width: 100%;
    border: 1px solid #42432d;
    border-width: 1px 0 1px 1px;
}
#nav li {
    display: inline;
    padding: 0;
    margin: 0;
}
#nav a:link,
#nav a:visited {
    color: #000;
    background: #b2b580;
    padding: 20px 40px 4px 10px;
    float: left;
    width: auto;
    border-right: 1px solid #42432d;
    text-decoration: none;
    text-transform: uppercase;
}
#nav a:hover,
#nav a:focus {
    color: #fff;
    background: #727454;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#contact #nav-contact a,
#lab #nav-lab a,
#reviews #nav-reviews a {
    background: #e35a00;
    color: #fff;
    text-shadow: none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#contact #nav-contact a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover { background: #e35a00 }