Cara Membuat Menu Navigation part.2

CSSTust+ - Kesempatan Kali ini kita akan membuat Menu Navigation Bagian 2 namun sebelum kita memulai tahapannya.. alangkah baiknya anda mengerti Cara Membuat Menu Navigation part.1 karena ini akan berhubungan.. kali ini kita akan membuat Menu Navigation ini menjadikan sebuah dropdown yang cara kerjanya pada saat kita mengarahkan mouse pada link Dropdown tersebut maka akan muncul list lain yang bergerak ke bawah... Kelebihan dalam tutorial ini adalah kita akan langsung membuat sebuah Panah sebagai penanda kalau list tersebut memiliki list kebawah.

DEMO

langsung saja ikuti tutorialnya,,,

HTML

Teknik Awal yaitu membuat HTML /Markup dengan benar .

<nav id="nav">
  <ul>
  <li><a href="#">Beranda</a></li>
  <li><a href="#">About</a></li>
  <li class="drop"><a href="#">Dropdpwn</a>
    <ul>
      <li><a href="#">title</a></li>
      <li><a href="#">title</a></li>
      <li><a href="#">title</a></li>
      <li><a href="#">title</a></li>
      <li><a href="#">title</a></li>
    </ul>
  </li>
  <li><a href="#">Kontak</a></li>
  <li><a href="#">Login</a></li>
  </ul>
</nav>

kita gunakan id unik untuk pembungkus seluruh list navigation seperti ini <nav id="nav">

Perhatikan pada <li class="drop"> ,ini adalah list yang akan kita buat menu dropdown dan sebagai penanda gunakan class agar tidak bentrok dengan list lain karena kita akan sekaligus membuat panah segitiga kebawah.

CSS

#nav *{margin:0 0 0 0;padding:0 0 0 0;list-style:none;}
#nav ul{
    background:#ccc;
    height:30px;}
#nav li{
    float:left;
    display:inline;}
#nav li a{
    padding:0px 15px;
    line-height:30px;
    color:#111;
    display:block;
    text-decoration:none;
}
#nav li a:hover{
    background:rgba(0,0,0,0.1);
}
#nav li a:active{
    background:#ccc;
}
#nav li ul{
    display:block;
    width:170px;
    position:absolute;
    left:auto;
    z-index:10;
    height:auto;
    visibility:hidden;
    opacity:0;
}
#nav li li{
    display:block;
    float:none;
    width:100%;
}
#nav li:hover > ul{
    visibility:visible;
    width:200px;
    opacity:1;
}
#nav li li ul{
    left:200px;
    margin-top:-40px;
}
#nav li.drop > a{
    position:relative;
    padding-right:30px;
}
#nav li.drop > a:after{
    content:"";
    width:0px;
    height:0px;
    border-width:4px;
    border-style:solid;
    border-color:#000 transparent transparent transparent;
    position:absolute;
    top:15px;
    right:10px;
}

Tutorial CSS Dropdown:

Perhatikan

#nav li ul{
    display:block;
    width:170px;
    position:absolute;
    left:auto;
    z-index:10;
    height:auto;
    visibility:hidden;
    opacity:0;
}

display:block; biasanya untuk menyembunyikan list dropdown dengan display:none; .namun kali ini kita menggunakan opacity:0; untuk menyembunyikan list dropdown. kenapa..?? karena kita bisa menambahkan atribut lain seperti animation transition yang akan berjalan sempurna. dan gunakan position:absolute; agar list tersebut tidak berantakan dengan list pembungkusnya..

#nav li:hover > ul{
    width:200px;
    opacity:1;
}

Ini css penampilnya.. dengan mengarahkan mouse pada list maka akan muncul list dropdown.. ini atributnya opacity:1;

agar list dropdown tidak tampil kesamping maka kita harus mengaturnya seperti ini.. yang hasilnya akan membentuk list dropdown vertikal..

#nav li li{
    display:block;
    float:none;
    width:100%;
}

Menu Navigation Anda Sudah Jadi.. Sekarang kita lanjut ke tahap membuat panah atau penanda pada list yang di buat sebagai menu dropdown.

Perhatikan :

#nav li.drop > a{
    position:relative;
    padding-right:30px;
}
#nav li.drop > a:after{
    content:"";
    width:0px;
    height:0px;
    border-width:4px;
    border-style:solid;
    border-color:#000 transparent transparent transparent;
    position:absolute;
    top:15px;
    right:10px;
}

ini adalah salah satu cara membuat panah segitiga tanpa menggunakan gambar

saya agak sulit menjelaskan satu persatu atribut ini namun ssaya hanya bisa menerangkan cara merubah besar kecilnya panah tersebut yaitu dengan mengubah border-width:4px; . tapi pada blog sebelah sudah banyak yang menerangkan cara membuat panah dengan CSS.



Sudah beres nich cara membuat Cara Membuat Menu Navigation part.2 untuk artikel selanjutnya kita akan membuat menu dengan Animation Transition dengan CSS tanpa Jquery pada artikel Cara Membuat Menu Navigation part.3