Membuat Menu Navigasi untuk Website

Menu Navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik website untuk memudahkan pengunjung dalam menjelajah setiap sisi website yang dimilikinya. Mudahnya, ketika pengunjung ingin mencari sebuah kategori yang tersedia didalam website, pengunjung cukup mencari pada menu yang telah disediakan oleh si pemilik website.

Mari kita buat secara bertahap pembuatan menu navigasi untuk website yang anda miliki.

Sebelum mulai, ini adalah tampilan menu yang akan kita buat. Contoh disini

Pertama, Membuat coding setiap page dengan HTML.

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a>
    <ul>
    <li><a href="">The Team</a></li>
    <li><a href="">History</a></li>
    <li><a href="">Vision</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
    <ul>
    <li><a href="">Cozy Couch</a></li>
    <li><a href="">Great Table</a></li>
    <li><a href="">Small Chair</a></li>
    <li><a href="">Shiny Shelf</a></li>
    <li><a href="">Invisible Nothing</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
    <ul>
    <li><a href="">Online</a></li>
    <li><a href="">Right Here</a></li>
    <li><a href="">Somewhere Else</a></li>
    </ul>
  </li>
</ul>

Kedua, Membuat coding Css untuk Tampilan coding HTML.

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

Menu yang dibuat Servage magazine memang cukup simple. Tapi anda bisa mengubahnya dan menyesuaikan dengan tampilan website yang anda miliki.

Download Source Menu Navigation