Navigasi merupakan bagian yang sangat penting didalam sebuah web, berikut salah satu contoh untuk membuat sebuah menu horisontal sederhana:
- Buka notepad
- Copy dan paste script di bawah ini:
#nav{
padding:0;
text-align:center;
background-color:#171c20;
}
#nav li {
display: inline;
}
#nav a {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
color: #b6aefd;
font-weight: normal;
font-size: 14px;
float: left;
padding: 6px 15px 7px 15px;
display:block;
}
#nav a:hover{
color: #000000;
background-color:#0080C0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
Simpan dengan nama "stlye.css"
Sekarang saatnya kita membuat file HTML, Copy dan paste tag HTML di bawah ini ke notepad
<html>
<head>
<title>Contoh Navigasi Sederhana</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<ul>
<li><a href="" target="">Home</a></li>
<li><a href="" target="">About Me</a></li>
<li><a href="" target="">My Portofolio</a></li>
<li><a href="" target="">Blog</a></li>
<li><a href="" target="">Contact</a></li>
</ul>
</div>
</body>
</html>
Simpan file dengan format html
Demikian semoga bermanfaat
Artikel Terkait
