Tutorial membuat menu horizontal dengan CSS

Horizontal Menu CSSHorizontal 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

Preview
menu horizontal

 

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

CSS

Preview
Horizontal Menu

 

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

CSS

Preview
menu3

 

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

CSS

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

Preview
menu5

 

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

CSS

Preview
menu6

 

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

CSS

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

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

Preview
menu9


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

About the Author

Anshori Wahyu

My name is Mas Wahyu Anshori, 32 years old. I am a student from STIE Ahmad Dahlan Jakarta, work at Punakawan Digital Media since Oct 2017. Before I came to Punakawan, I was doing IT Supportt and web content at Seratus Company, Melodia Group and be part of Kehati as a freelance web developer. I was also a freelance web developer with simple HTML, CSS base, jQuery, and PHP. Learned Website Developer base (with a help of Google) by myself would be my achievement so far. I’am an Indonesian football junkie, as well as addicted to HTML, CSS and jQuery coding.

17 Comments on "Tutorial membuat menu horizontal dengan CSS"

  1. Makasih gan panduannya, membantu banget kalau lagi lupa CSS 🙂

  2. maksih gan sangat bermanfaat

  3. rickynotes | 13/07/2016 at 06:35 | Reply

    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.. 😉

  4. 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

  5. Prauliyatama | 26/02/2017 at 10:00 | Reply

    Pagi mas, ijinkan aku bertanya. Apakah mungkin membuat horizontal list tanpa css?

  6. maaf mas, untuk css kita editnya dimana ya? saya mau rubah template yg udah saya pasang

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

  8. Nanda Setyawan | 25/08/2017 at 14:42 | Reply

    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

Leave a Reply