Digg style menu with dropdown

In this tutorials we are creating dig style menu with its dropdown. We using html, css and little javascript for this dig menu. We hope you like and send your response.

Demo

HTML Code

<div class="diggmenu">
 <ul>
   <li class="main-menu">
     <a href="resources/" >
       Menu 1
       <span class="more" id="dp-1">more</span>
     </a>  
     <ul id="dp-1-1" class="DiggSubMenu hide">
       <li><a href="resources/">submenu -1 </a></li>
       <li><a href="resources/">submenu -1 </a></li>
       <li><a href="resources/">submenu -1 </a></li>
       <li><a href="resources/">submenu -1 </a></li>
     </ul>
   </li>
   <li class="main-menu">
     <a href="resources/">
       Menu 2
       <span class="more" id="dp-2">more</span>
     </a>  
     <ul id="dp-2-1" class="DiggSubMenu hide">
       <li><a href="resources/">submenu -2 </a></li>
       <li><a href="resources/">submenu -2 </a></li>
       <li><a href="resources/">submenu -2 </a></li>
       <li><a href="resources/">submenu -2 </a></li>
     </ul>
   </li>
   <li class="main-menu">
     <a href="resources/">
       Menu 3
       <span class="more" id="dp-3">more</span>
     </a>  
     <ul id="dp-3-1" class="DiggSubMenu hide">
       <li><a href="resources/">submenu -3 </a></li>
       <li><a href="resources/">submenu -3 </a></li>
       <li><a href="resources/">submenu -3 </a></li>
       <li><a href="resources/">submenu -3 </a></li>
     </ul>
   </li>
 </ul><div class="clear"></div>
</div>

- id=dp-1 is define in every span in main menu for sub menu ID(dp-1-1).
- We will handle drop down menu by use more class (.more) through jquery.

CSS Code

.diggmenu {
  background-color: #666; 
  border:1px solid #DDD; 
  position:relative;
}
.diggmenu li.main-menu {
  float: left; 
  padding: 3px 10px;
}
.diggmenu li.main-menu a {color: #fff; 
  float:left; 
  display: block; 
  position:relative; 
  padding: 7px 5px;font-size: 13px;
}
.diggmenu li.main-menu a span {
  display:block; 
  height: 30px; 
  padding: 0; 
  position:absolute; 
  right: -12px; 
  text-indent:-2000em; 
  top:0;width:15px;  
}
.diggmenu li.main-menu a:hover,
.diggmenu li.activeD a{
  background: transparent url(../../web/im/DiggMenuBg.gif) no-repeat 0 0; 
  color: #555;
}
.diggmenu li.main-menu a:hover span, 
.diggmenu li.activeD span{
  background: transparent url(../../web/im/DiggMenuBg.gif) no-repeat right 0;
}
.DiggSubMenu {
  background-color: #EEE; 
  position:absolute; 
  text-align:left; 
  top: 31px; 
  z-index:1500000; 
  border: 1px solid #ddd; 
  border-top: 0;   
}
.diggmenu li.main-menu .DiggSubMenu li {
  display: block; 
  float: none;   
}
.diggmenu li.main-menu .DiggSubMenu a {
  float: left; 
  border-bottom: 1px solid #ddd; 
  color: #666; 
  padding: 6px 10px; 
  display: block; 
  border-bottom: 1px solid #ddd; 
  width: 150px;   
}
.diggmenu li.main-menu .DiggSubMenu a:hover{
  color: #000;
}

Image

JavaScript Code

Add Latest Jquery file and write below code

<script type="text/javascript">
$(document).ready(function() {
  $(".more").each(function(){
    $(this).mouseout(function(){
	  dp = $(this).attr('id');
	  $(this).parent().removeClass("activeD");
	  $("#"+dp+"-1").addClass("hide"); 
	  $(this).parent().attr("href",ahref);
	  return false;	  
    });
	$(this).click(function(){
	  ahref=$(this).parent().attr("href");
	  $(this).parent().attr("href","javascript:;");
	  dp = $(this).attr('id');
	  $(this).parent().addClass("activeD");
	  $("#"+dp+"-1").removeClass("hide");
	});
  });
  
  $(".DiggSubMenu").each(function(){
    $(this).mouseover(function(){
	  $(this).parent().addClass("activeD");
	  $(this).removeClass("hide");
    });
    $(this).mouseout(function(){
	  $(this).parent().removeClass("activeD");
	  $(this).addClass("hide");
    });	
  });
  
});
</script>

In the above JavaScript class .more is being check in every click and mouse out. As per click we show the drop down.

- Download Source