Tutorial membuat menu horizontal dengan CSS

22
Horizontal Menu CSS
Horizontal Menu CSS

BINTARO – Ga penting sih sebenernya gw mau nulis tutorial ini, secara banyak banget tutorial untuk ngebuat menu horizontal dengan CSS. Cuma entah kenapa pengen aja nambahin bendahara tutorial di blog gw ini, dan gw mau coba jelasin sejelas2nya step by step ngebuat menu horizontal dengan CSS.

1. Siapin dulu tag UL LI untuk permulaan..

HTML

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

Preview
menu horizontal

 

2. Kemudian buat CSS untuk membuat sytle Menghilangkan garis bawah, menghilangkan dot list, dan memberi warna pada menunya

CSS

ul {
  list-style:none; /*menghilangkan dot list*/
}
a {
  text-decoration:none; /*menghilangkan garis bawah*/
  color: #000; /*memberi warna hitam*/
  font-weight:bold; /*menebalkan font menu*/
}

Preview
Horizontal Menu

 

3. Tambahkan li {display:inline;} agar list menu vertical tersebut berubah menjadi Horizontal

CSS

ul {
  list-style:none; /*menghilangkan dot list*/
}
a {
  text-decoration:none; /*menghilangkan garis bawah*/
  color: #000; /*memberi warna hitam*/
  font-weight:bold; /*menebalkan font menu*/
}
li {
  display:inline; /*membuat menu menjadi Horizontal*/
}

Preview
menu3

 

4. Nah sekarang tambahin background-color:#ff0000; di selector li biar ada background warna merah

CSS

ul {
  list-style:none; /*menghilangkan dot list*/
}
a {
  text-decoration:none; /*menghilangkan garis bawah*/
  color: #000; /*memberi warna hitam*/
  font-weight:bold; /*menebalkan font menu*/
}
li {
  display:inline; /*membuat menu menjadi Horizontal*/
  background-color: #ff0000; /*ngasi warna merah di background menunya*/
}

Preview
menu4

 

5. Ups.. kok ada spasi kosong? ok, kasi float:left; di selector li biar nempel ke kiri dan ga ada spasi kosong lagi

CSS

ul {
  list-style:none; /*menghilangkan dot list*/
}
a {
  text-decoration:none; /*menghilangkan garis bawah*/
  color: #000; /*memberi warna hitam*/
  font-weight:bold; /*menebalkan font menu*/
}
li {
  display:inline; /*membuat menu menjadi Horizontal*/
  background-color: #ff0000; /*ngasi warna merah di background menunya*/
  float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/
}

Preview
menu5

 

6. Nah sekarang udah dempet.. yuks kasi padding:10px; di selector li biar ada jarak antara menu dan jarak atas bawahnya

CSS

ul {
  list-style:none; /*menghilangkan dot list*/
}
a {
  text-decoration:none; /*menghilangkan garis bawah*/
  color: #000; /*memberi warna hitam*/
  font-weight:bold; /*menebalkan font menu*/
}
li {
  display:inline; /*membuat menu menjadi Horizontal*/
  background-color: #ff0000; /*ngasi warna merah di background menunya*/
  float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/
  padding:10px; /*ngasi jarak atas bawah kiri kanan di menu*/
}

Preview
menu6

 

7. Sekarang tambahin border-right:solid 1px #ccc; di selector li biar ada bates pemisahnya..

CSS

ul {
  list-style:none; /*menghilangkan dot list*/
}
a {
  text-decoration:none; /*menghilangkan garis bawah*/
  color: #000; /*memberi warna hitam*/
  font-weight:bold; /*menebalkan font menu*/
}
li {
  display:inline; /*membuat menu menjadi Horizontal*/
  background-color: #ff0000; /*ngasi warna merah di background menunya*/
  float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/
  padding:10px; /*ngasi jarak atas bawah kiri kanan di menu*/
  border-right:solid 1px #000; /*ngasi border kanan menu untuk pembatas*/
}

Preview
menu7

 

8. Nah pembatas udah ada, coba diliat.. Di menu terakhir ikut nimbrung juga border kanan kan? Sekarang buat selector baru untuk ngilangin border kanan itu li:last-child {border-right:none;}

CSS

ul {
  list-style:none; /*menghilangkan dot list*/
}
a {
  text-decoration:none; /*menghilangkan garis bawah*/
  color: #000; /*memberi warna hitam*/
  font-weight:bold; /*menebalkan font menu*/
}
li {
  display:inline; /*membuat menu menjadi Horizontal*/
  background-color: #ff0000; /*ngasi warna merah di background menunya*/
  float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/
  padding:10px; /*ngasi jarak atas bawah kiri kanan di menu*/
  border-right:solid 1px #000; /*ngasi border kanan menu untuk pembatas*/
}
li:last-child {
  border-right:none; /*untuk ngilangin border kanan di list menu yg pallingn akhir*/
}

Preview
menu8

 

9. Ok sekarang bagian akhir.. kasi efek hover ganti warna background pas mouseover alias hover di menunya.. tambahin selector li:hover {background-color:#ccc;}

CSS

ul {
  list-style:none; /*menghilangkan dot list*/
}
a {
  text-decoration:none; /*menghilangkan garis bawah*/
  color: #000; /*memberi warna hitam*/
  font-weight:bold; /*menebalkan font menu*/
}
li {
  display:inline; /*membuat menu menjadi Horizontal*/
  background-color: #ff0000; /*ngasi warna merah di background menunya*/
  float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/
  padding:10px; /*ngasi jarak atas bawah kiri kanan di menu*/
  border-right:solid 1px #000; /*ngasi border kanan menu untuk pembatas*/
}
li:last-child {
  border-right:none; /*untuk ngilangin border kanan di list menu yg pallingn akhir*/
}
li:hover {
 background-color:#ccc; /*untuk ngasi effek ganti warna background pas mouse lewat*/
}

Preview
menu9

 

Oke… Beres, untuk preview akhirnya coba di cek di >> https://anshori.net/coba/menu/ untuk mastiin bener atau gag nya. Semoga bermanfaat.. Salam 🙂

22 COMMENTS

  1. Mantap mas Wahyu, dijelasin lagi pada commentnya. Nah yang menjadi pertanyaan saya nih sampe sekarang, kan saya gak bikin jadi kotak-kotak gitu.

    Saya kepengen bikin lost aja. Cuman menu horizontalnya doang, yang pengen ditarik, antara jarak satu menu ke menu lainnya (padding).

    Tapi yang ketarik, malah dari menu pertama, sampe semuanya.

    Misalnya nih menu saya gini :

    Beranda Biografi Blog Download Ebook

    Nah yang pengen saya tarik cuman gini :

    Beranda Biografi Blog Download Ebook

    Jadinya malah gini :

    Beranda Biografi Blog Download Ebook

    Gitu gimana ngebuatnya ya ? biar gak ketarik bagian berandanya, diatur paddingnya udah, diatur marginnya udah. Bingung saya, bagian mananya.

    Terima kasih, mohon atas jawabannya :

    rickyrachmanto@gmail.com
    http://www.rickynotes.com

    • Maksudnya ketarik itu yg bagian beranda ada spasi kosong yah? karena ga tau element HTML yg loe pake gw kasi penjelasan tentang :first-child aja ye.. misal loe bikin menunya pake

      <ul>
      <li>satu</li>
      <li>dua</li>
      <li>tiga</li>
      </ul>

      dan (misal) default CSS dari li itu padding-left:10px;margin-left:10px; berarti di menu pertama itu ada spasi kosong… nah ngakalinnya itu yah pake :first-child. kasi aja di CSS atribut menu yg loe buat (misal) .div li:first-child {margin-left:0;padding-left:0;}

      moga2 paham ye soB.. 😉

  2. mas, mau tanya.. gimana cara buat menu navigasi tp g pisah dr header waktu di scroll turun menunya bergerak naik & ketika di scroll naik menunya turun lg.. tp ak sdh buat scriptnya mas.. makasih

  3. Punya saya kok bordernya kurang tinggii ya. Dan kalau di tinggikan malah spasinya kembali lagi. Solusinya gan

  4. mas, kalo buat menu tapi nyatu di header gmna ya, di posisi kiri udah ada logo terus menu rencananya mau di posisikan di sebelah kiri. terimakasih mas. mohon bantuannya

    • ada banyak macam… biasanya kode CSS itu ditaroh diluar file kode yg di eksekusi.. dibantu pake tag <link>.. coba baca disini >> https://www.w3schools.com/css/css_howto.asp
      Bisa juga ditaro di dalem file kode itu sendiri dibantu pake tag <style>isi dari css nya</style>
      Bisa juga dibuat inline didalem tag HTML yang mau di set stylenya >> <p style=”font-weight:bold;”>hurup ini berubah jadi bold</p>

LEAVE A REPLY

Please enter your comment!
Please enter your name here