Selasa, 11 November 2014

Membuat DropDown Menu CSS

Membuat menu dropdown dari CSS tanpa harus menyertakan Javascript adalah suatu hal yang mudah.

Kode untuk file dropdown.html
<!DOCTYPE html>
<html>
 <head>
  <link href="./dropdown.css" rel="stylesheet" />
 </head>
 <body>
  <ul class="cls-menu">
   <li><a href="javascript:void(0)">UL[1] -> LI[1]</a></li>
   <li><a href="javascript:void(0)">UL[1] -> LI[2]</a>
    <ul>
     <li><a href="javascript:void(0)">UL[2] -> LI[1]</a></li>
     <li><a href="javascript:void(0)">UL[2] -> LI[2]</a></li>
     <li><a href="javascript:void(0)">UL[2] -> LI[3]</a>
      <ul>
       <li><a href="javascript:void(0)">UL[3] -> LI[1]</a></li>
       <li><a href="javascript:void(0)">UL[3] -> LI[2]</a></li>
       <li><a href="javascript:void(0)">UL[3] -> LI[3]</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li><a href="javascript:void(0)">UL[1] -> LI[3]</a>
    <ul>
     <li><a href="javascript:void(0)">UL[2] -> LI[1]</a></li>
     <li><a href="javascript:void(0)">UL[2] -> LI[2]</a>
      <ul>
       <li><a href="javascript:void(0)">UL[3] -> LI[1]</a></li>
       <li><a href="javascript:void(0)">UL[3] -> LI[2]</a></li>
       <li><a href="javascript:void(0)">UL[3] -> LI[3]</a></li>
       <li><a href="javascript:void(0)">UL[3] -> LI[4]</a></li>
      </ul>
     </li>
     <li><a href="javascript:void(0)">UL[2] -> LI[3]</a></li>
    </ul>
   </li>
  </ul>
 </body>
</html>


Kode untuk file dropdown.css
.cls-menu {
 background-color:lime;
 float:none;
 position:relative;;
 height:36px;
}
.cls-menu a {
 color:white;
 display:block;
 padding:5px 5px;
 text-decoration:none;
}
.cls-menu ul {
 background-color:red;
 display:none;
 float:none;
 position:relative;
 left:-40px;
 top:7px;
}
.cls-menu li {
 background:-webkit-linear-gradient(#808080, #000000);
 display:block;
 float:left;
 height:36px;
 list-style:none;
 position:relative;
 text-align:center;
 width:100px;
 -webkit-transition:color 0.2s;
}
.cls-menu li:hover > ul {
 display:block;
 list-style:none;
}
.cls-menu li:hover {
 background:-webkit-linear-gradient(red, #404040);
}
.cls-menu ul ul {
 left:60px;
 top:-29px;
}

Alhamdulillah. Semoga bermanfaat! :)

/* EOF */

Tidak ada komentar :

Posting Komentar