CSS - Berkreasi Dengan Menu Navigasi Horizontal

Halo semuanya. Selamat datang kembali ke web kami untuk membahas tentang CSS. Sebelumnya, kita sudah membahas materi tentang membuat navigasi bar secara vertical dengan CSS. Nah pada kesempatan kali ini, saya hanya ingin menunjukkan cara membuat menu navigasi yang lainnya dengan model navigasi horizontal. Jadi mari kita lihat gunakan CSS dan lihat bagaimana saya menggunakan HTML biasa dan mengubahnya menjadi menu navigasi yang bergaya. Baiklah, kita mulai dengan mengatakan, anda ingin mengatur semua tautan yang ada di menu navigasi.

Sebenarnya sama dengan CSS navigasi vertical, ini cukup sederhana, dengan memasukkan ukuran ketinggian tertentu, latar belakang warna tertentu, dekorasi teks tertentu. Namun, pada awalnya, tentu yang harus dipikirkan title apa yang anda ingin jadilkan tautan dalam navigasi. Seperti kebanyakan web-web professional, umumnya Home, About, Category, Contact US adalah tautan pokok mereka. Baiklah kita mulai dengan membuat html-nya seperti ini:

<ul>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CATEGORY</a></li>
  <li><a href="">CONTACT US</a></li>
</ul>

Hasilnya:

hor1

Oke sekarang kita akan lanjutkan untuk menghilangkan hal yang tak diinginkan seperti dot list atau garis bawah. Hal semacam itu kadang tidak diperlukan pada menu horizontal. Untuk itu kita akan gunakan CSS: list-style:none; ini untuk menghilangkan dot listnya text-decoration:none untuk menghilangkan garis bawahnya

Berikut code lengkap CSS HTMLnya:

<html>
<head>
<style type="text/css">
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color: blue;  font-weight:bold;
}
</style>
</head>
<body>
<div id="sidebar">


<ul>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CATEGORY</a></li>
  <li><a href="">CONTACT US</a></li>
</ul>

    </div>
</body>
</html>

Hasilnya:

hor2

Disini saya tambahkan color: blue; sebagai warna Tautan dan font-weight:bold; untuk ketebalannya. Baiklah. Sekarang, itu sudah cukup mudah untuk membuatnya menjadi enu navigasi horizontal, kita gunakan display:inline, agar menu dari vertical berubah menjadi horizontal.

<html>
<head>
<style type="text/css">
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color: blue;  font-weight:bold;
}
li {
  display:inline;
}
</style>
</head>
<body>
<div id="sidebar">


<ul>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CATEGORY</a></li>
  <li><a href="">CONTACT US</a></li>
</ul>

    </div>
</body>
</html>

Hasilnya:

hor3

Tinggal anda kreasikan dengan CSS, anda bisa membuat style yang anda inginkan. Namun sekali lagi, saya hanya ingin Anda tidak lupa bahwa hal-hal seperti padding dan margin sangat penting dan mereka sangat tambahan. Jadi, ketika Anda menggunakan persen, bukan piksel, itu akan menjaga agar tidak terlihat baik pada layar besar dan akan sangat buruk di layar kecil.

Oke coba kita buat background warna pada Tautannya, saya coba dengan warna yellow. Disini saya coba menghindari warna kontras atau hal-hal yang membuat aksesibiltas navigasi kita terganggu. Jadi pikirkan warna yang bisa memberi pandangan terlihat menarik.

<html>
<head>
<style type="text/css">
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color: blue;  font-weight:bold;
}
li {
  display:inline;
  background-color:yellow;
}
</style>
</head>
<body>
<div id="sidebar">


<ul>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CATEGORY</a></li>
  <li><a href="">CONTACT US</a></li>
</ul>

    </div>
</body>
</html>

Hasilnya:

hor4

Nampak sepertinya ada celah diantara tautan, itu kelihatan tidak menarik. Anda bisa gunakan loat:left; agar tautan berdempet kekiri kemudian memberikan padding agar ada jarak:

  • float:left;
  • padding:10px
<html>
<head>
<style type="text/css">
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color: blue;  font-weight:bold;
}
li {
  display:inline;
  background-color:yellow;
  float:left;
padding:10px;

}
</style>
</head>
<body>
<div id="sidebar">


<ul>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CATEGORY</a></li>
  <li><a href="">CONTACT US</a></li>
</ul>

    </div>
</body>
</html>

Hasilnya:

hor4

Sudah nampak menarik. Nah sekarang akan kita buat pembatas antara tautan border-right:solid 1px #000; border dengan warna color hitam.

<html>
<head>
<style type="text/css">
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color: blue;  font-weight:bold;
}
li {
  display:inline;
  background-color:yellow;
  float:left;
padding:10px;
border-right:solid 1px #000;




}
</style>
</head>
<body>
<div id="sidebar">


<ul>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CATEGORY</a></li>
  <li><a href="">CONTACT US</a></li>
</ul>

    </div>
</body>
</html>

Hasilnya:

hor6

Sepertinya ada pembatas juga pada sebelah kanan tautan contact us, maka bisa dihilangkan dengan menggunakan li:last-child {border-right:none;}

<html>
<head>
<style type="text/css">
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color: blue;  font-weight:bold;
}
li {
  display:inline;
  background-color:yellow;
  float:left;
padding:10px;
border:solid 1px #000;
}
li:last-child {border-right:none;
}

</style>
</head>
<body>
<div id="sidebar">


<ul>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CATEGORY</a></li>
  <li><a href="">CONTACT US</a></li>
</ul>

    </div>
</body>
</html>

Hasilnya:

hor7

Oke sepetinya sudah agak menarik? Nah hal yang selanjutnya, yang saya masukkan di sini hanya untuk lebih menarik dan untuk membantu menunjukkan kepada Anda lagi begitu banyak hal-hal yang berbeda yang dapat di lakukan dengan CSS, adalah saya menambahkan efek hover untuk tautan navigasi saya. Jadi jika user menggunakannya,berarti menandakan dia berada pada tautan tersebut. Ya user berkata, Saya sudah masuk ke sini dengan adanya tanda melayang “hover” di atas halaman. Oke mari kita coba dengan code ini:

li:hover {
 background-color:#ccc;
}

Lengkapnya:

<html>
<head>
<style type="text/css">
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color: blue;  font-weight:bold;
}
li {
  display:inline;
  background-color:yellow;
  float:left;
padding:10px;
border:solid 1px #000;
}
li:last-child {border-right:none;
}
li:hover {
 background-color:#ccc;
}
</style>
</head>
<body>
<div id="sidebar">


<ul>
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT</a></li>
  <li><a href="">CATEGORY</a></li>
  <li><a href="">CONTACT US</a></li>
</ul>

    </div>
</body>

Hasilnya:

hor8

Mouse saya arahkan ke tautan category, dan menandakan sudah masuk pada tautan tersebut dengan berubahnya background dengan keadaan hover. Menarik bukan?

Terakhir, saat saya sudah membahas menu horizontal secara sederhana. Saya yakin anda lebih banyak memiliki ide dibanding cuplikan kode ini, dan saya berharap anda bisa mengubahnya menjadi sesuatu yang terlihat benar-benar hebat dan disesuaikan untuk halaman yang Anda coba buat. Ingat tetap jaga aksesibilitas navigasi anda saat berkreasi. Jadi silakan, bersenang-senang, dan sekarang coba buat menu navigasi yang masuk dengan berbagai cara, dan bawah, samping, atau bahkan kombinasi. Semoga berhasil.