MEMBUAT DROP DOWN MENU by bagoezarmy

VIEWS: 5 PAGES: 4

									                          MEMBUAT DROP DOWN MENU

1.   Style CSS untuk dropdown menu. Simpan dengan nama dropdown.css.

     body {margin:25px; font:12px Verdana, Arial, Helvetica}
     * {padding:0; margin:0}
     .dropdown {float:left; padding-right:5px}
     .dropdown dt {
     width:188px;
     border:2px solid #9ac1c9;
     padding:8px; font-weight:bold;
     cursor:pointer;
     background:url(images/header.gif)}
     .dropdown dt:hover {
     background:url(images/header_over.gif)}
     .dropdown dd {
     position:absolute;
     overflow:hidden;
     width:208px;
     display:none;
     background:#fff;
     z-index:200; opacity:0}
     .dropdown ul {
     width:204px;
     border:2px solid #9ac1c9;
     list-style:none;
     border-top:none}
     .dropdown li {display:inline}
     .dropdown a, .dropdown a:active, .dropdown a:visited {
     display:block;
     padding:5px;
     color:#333;
     text-decoration:none;
     background:#eaf0f2;
     width:194px}
     .dropdown a:hover {background:#d9e1e4; color:#000}
     .dropdown .underline {border-bottom:1px solid #b9d6dc}


2.   Fungsi JavaScript untuk mengatur sliding menu, simpan dengan nama dropdown.js.

     var DDSPEED = 10;
     var DDTIMER = 15;

     // fungsi untuk meng-handle mouse event //
     function ddMenu(id,d){
      var h = document.getElementById(id + '-ddheader');
      var c = document.getElementById(id + '-ddcontent');
      clearInterval(c.timer);
      if(d == 1){
        clearTimeout(h.timer);
      if(c.maxh && c.maxh <= c.offsetHeight){return}
      else if(!c.maxh){
        c.style.display = 'block';
        c.style.height = 'auto';
        c.maxh = c.offsetHeight;
        c.style.height = '0px';
      }
      c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
    }else{
      h.timer = setTimeout(function(){ddCollapse(c)},50);
    }
}

// menormalkan menu //
function ddCollapse(c){
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// membuat dropdown menu saat user melakukan hover pada menu //
function cancelHide(id){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearTimeout(h.timer);
  clearInterval(c.timer);
  if(c.offsetHeight < c.maxh){
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }
}

// mengganti opacity untuk memberi efek//
function ddSlide(c,d){
  var currh = c.offsetHeight;
  var dist;
  if(d == 1){
    dist = (Math.round((c.maxh - currh) / DDSPEED));
  }else{
    dist = (Math.round(currh / DDSPEED));
  }
  if(dist <= 1 && d == 1){
    dist = 1;
  }
  c.style.height = currh + (dist * d) + 'px';
  c.style.opacity = currh / c.maxh;
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
    clearInterval(c.timer);
  }
}
3.   Struktur HTML untuk membuat dropdown menu. Simpan dengan nama dropdown.html.

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>JavaScript Dropdown Menu Demo</title>
     <link rel="stylesheet" href="dropdown.css" type="text/css" />
     <script type="text/javascript" src="dropdown.js"></script>
     </head>
     <body>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc a nulla. Sed dolor neque, suscipit
     ultricies, volutpat aliquam, commodo eu, massa. Nam faucibus massa a eros. Proin malesuada.
     Suspendisse blandit felis eu erat. Phasellus quis sapien non mauris sollicitudin scelerisque.
     Pellentesque pharetra odio non elit tristique condimentum. Integer mi. Integer vel sapien.
     Nullam consectetuer iaculis purus. Pellentesque vel augue condimentum dolor imperdiet
     accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
     mus. Vestibulum dictum sollicitudin risus. Mauris ultrices.
     <br /><br />

     <dl class="dropdown">
      <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-
     1)">Dropdown One</dt>
      <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
       <ul>
        <li><a href="#" class="underline">Navigation Item 1</a></li>
        <li><a href="#" class="underline">Navigation Item 2</a></li>
        <li><a href="#" class="underline">Navigation Item 3</a></li>
        <li><a href="#" class="underline">Navigation Item 4</a></li>
        <li><a href="#">Navigation Item 5</a></li>
       </ul>
      </dd>
     </dl>

     <dl class="dropdown">
      <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-
     1)">Dropdown Two</dt>
      <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
       <ul>
        <li><a href="#" class="underline">Navigation Item 1</a></li>
        <li><a href="#" class="underline">Navigation Item 2</a></li>
        <li><a href="#" class="underline">Navigation Item 3</a></li>
        <li><a href="#" class="underline">Navigation Item 4</a></li>
        <li><a href="#">Navigation Item 5</a></li>
       </ul>
      </dd>
     </dl>

     <div style="clear:both" />
   <br /><br />
   Nulla ultrices, dolor quis ullamcorper eleifend, pede tortor dignissim lorem, in condimentum
   diam mi ut risus. Vivamus ligula dui, viverra et, suscipit ac, scelerisque adipiscing, orci. Sed a
   nisi. Donec dui. Maecenas erat mauris, molestie nec, suscipit vel, scelerisque sit amet, tortor.
   Nunc egestas aliquam sapien. Proin ante pede, placerat id, eleifend id, pellentesque posuere,
   odio. Nulla facilisi. Curabitur tincidunt convallis sapien. Maecenas vehicula sodales neque.
   Vivamus sed elit vitae dui vulputate molestie. Nulla facilisi. Praesent molestie risus ut odio.
   <br /><br />
   Nullam sit amet erat vitae nulla tempus faucibus. Mauris volutpat scelerisque enim. Etiam vel
   dolor. Fusce dolor elit, lobortis pretium, adipiscing sit amet, rhoncus et, libero. Sed vel odio.
   Nunc commodo, erat id semper venenatis, tellus nisl placerat felis, venenatis blandit elit massa
   sed est. Suspendisse in metus. Curabitur diam. Vivamus accumsan tortor vel elit. Sed purus
   odio, gravida nec, facilisis sed, bibendum tincidunt, justo. Etiam mollis diam nec erat. Aliquam
   rutrum fringilla pede. Nunc rhoncus suscipit odio. Nunc sit amet sem id est adipiscing euismod.
   Etiam sed neque eu ante euismod dignissim. In tempus arcu vitae eros.
   <br /><br />
   Mauris aliquet. Phasellus commodo, lacus feugiat lobortis porta, turpis dolor dapibus est, sed
   hendrerit mauris odio rutrum odio. Nulla erat quam, imperdiet varius, eleifend vel, rhoncus nec,
   ligula. Nulla pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
   ridiculus mus. Aliquam massa. Quisque convallis pellentesque neque. Nam eu lectus. Maecenas
   est odio, egestas eget, viverra ac, viverra quis, nisi. Integer pharetra, justo ut interdum
   adipiscing, libero odio adipiscing lectus, et condimentum ipsum ipsum eget justo. Nunc libero
   est, auctor ac, aliquam id, semper eget, nisi. Phasellus rhoncus tempor velit. Phasellus
   accumsan iaculis justo. Vivamus quis leo et nunc rutrum ultricies. Pellentesque elit est, vehicula
   id, mattis et, volutpat vel, lectus. Duis purus nunc, feugiat quis, scelerisque ut, sodales ut, erat.
   Nam lectus.
   </body>
   </html>


KREASIKAN DROPDOWN MENU TERSEBUT DENGAN MENGGANTI WARNA, ISI MENU, UKURAN, DAN
LAIN-LAIN SESUAI KREATIVITAS ANDA.

								
To top