Loading...
CSSHTMLWeb Dev

Tutorial membuat menu horizontal dengan 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

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 🙂

20 comments
  1. rickynotes

    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

    1. Anshori Wahyu

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

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

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

  4. Nanda Setyawan

    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

    1. Anshori Wahyu

      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

This site uses Akismet to reduce spam. Learn how your comment data is processed.