Navigasi sering disebut kumpulan menu yang tersedia pada sebuah halaman website. Adanya navigasi memberikan kemudahan pada pengunjung untuk mengenal lebih jauh informasi yang tersedia pada website yang sedang dikunjunginya. Navigasi biasanya berisi kalimat yang sederhana, jelas, dan tepat, sehingga pengunjung jauh lebih mudah memahami isi halaman dari navigasi tersebut. Berikut adalah nama navigasi yang sering kita jumpai pada sebuah halaman website.
- Home (Beranda)
Biasanya menyediakan ringkasan informasi dari navigasi lainnya. - About Us (Tentang Kami)
Merupakan informasi mengenai profil dari sebuah website. - Contact Us (Hubungi Kami)
Biasanya menyediakan informasi berupa alamat, no telp, dan juga no fax. Selain itu juga menyediakan form isian yang berisi field untuk menghubungi website tersebut.
Pada pertemuan kali ini, kita akan membuat navigasi sederhana menggunakan HTML, dan CSS. Navigasi yang akan kita buat antara lain:
- Home
- About Us
- News
- FAQ
- Contact Us
Navigasi Horizontal
Bukalah sebuah file notepad, atau notepad ++ dan kemudian save dengan nama “navigasi_horizontal.html”. Jangan lupa untuk membuat struktur html pertama sekali didalam file navigasi_horizontal.html
<html> <head> <title>Menu Horizontal</title> </head> <body> </body> </html>
Kemudian buatlah sebuah div, dan didalamnya menggunakan attribut ul, seperti dibawah ini (ingat posisikan didalam sintak “body” html
<html> <head> <title>Menu Horizontal</title> </head> <body> <div> <ul> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">News</a></li> <li><a href="">Faq</a></li> <li><a href="">Contact Us</a></li> </ul> </body> </html>
Selanjutnya, kita akan memberikan sebuah class. Class tersebut akan kita taruh didalam attribut “div”.
<html> <head> <title>Menu Horizontal</title> </head> <body> <div class="menu_horizontal"> <ul> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">News</a></li> <li><a href="">Faq</a></li> <li><a href="">Contact Us</a></li> </ul> </body> </html>
class “menu_horizontal” sudah dimasukan kedalam attribut “div”, selanjutnya kita akan mengkode style “menu_horizontal” untuk membentuk menu horizontal.
<html>
<head>
<title>Menu Horizontal</title>
<style>
.menu_horizontal{
margin:10px;
}
.menu_horizontal ul{
list-style:none;
padding:0;
margin:0;
}
.menu_horizontal ul li{
margin-top:-1px;
}
.menu_horizontal ul li a{
border:1px solid #ccc;
display:block;
width:200px;
padding:10px;
text-decoration:none;
color:#000;
}
.menu_horizontal ul li a:hover{
background:#ccc;
}
</style>
</head>
<body>
<div class="menu_horizontal">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">News</a></li>
<li><a href="">Faq</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</body>
</html>
untuk previewnya sobat bisa liat langsung disini https://jsfiddle.net/vzhy1fww/
Navigasi Vertikal
Seperti contoh diatas, buka file notepad kemudian save dengan nama “navigasi_vertikal.html”. Buatlah struktur HTML seperti contoh dibawah ini
<html> <head> <title>Menu Vertikal</title> </head> <body> <div class="menu_vertikal"> <ul> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">News</a></li> <li><a href="">Faq</a></li> <li><a href="">Contact Us</a></li> </ul> </body> </html>
Langkah selanjutnya, kita akan menambahkan style “menu_vertikal” didalam file navigasi_vertikal.html”.
<html>
<head>
<title>Menu Vertikal</title>
<style>
.menu_vertikal{
margin:20px;
}
.menu_vertikal ul{
list-style:none;
padding:0;
margin:0;
}
.menu_vertikal ul li{
display:inline-block;
margin-left:-5px;
}
.menu_vertikal ul li a{
padding:10px 15px;
border:1px solid #ccc;
text-decoration:none;
color:#000;
background:#fff;
}
.menu_vertikal ul li:first-child a{
border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
}
.menu_vertikal ul li:last-child a{
border-top-right-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-bottom-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
}
.menu_vertikal ul li a:hover{
background:#ccc;
}
</style>
</head>
<body>
<div class="menu_vertikal">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">News</a></li>
<li><a href="">Faq</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</body>
Untuk melihat previewnya, sobat bisa melihatnya disini https://jsfiddle.net/3c705oya/
Sekian pembuatan navigasi sederhana menggunakan, html dan css. Silahkan share dan like apabila berguna buat sobat. Jika sobat merasa bingung, sobat dapat memberikan komentar pada kolom dibawah. Terimakasih
