Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating Drop Down Menu Script on a Page.

Author: DevASP
Download Source Code : 630_LinkDownMenu.zip

This article is about how you can create an extremely versatile drop down menu script for ordinary links on your page, including image links. It can be activated either onMouseover or onClick. The men

Steps you will do

 

Start visual studio and create a new web application.Open the HTML code of your web form and add the following style tag to implement the styles before closing the head tag.

 

<style type="text/css">

#dropmenudiv{

position:absolute;

border:1px solid black;

border-bottom-width: 0;

font:normal 12px Verdana;

line-height:18px;

z-index:100;

}

 

#dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid black;

padding: 1px 0;

text-decoration: none;

font-weight: bold;

}

#dropmenudiv a:hover{ /*hover background color*/

background-color: yellow;

}

</style> 

 

Now add the following JavaScript functions to display and navigate the menu items. Note that you can easily customize the menu and its sub items. Comments are placed where you can make the customization.

 

 

<script type="text/javascript">

 

//Contents for menu 1

var menu1=new Array()

menu1[0]='<a href="http://www.devasp.com">Devasp.com</a>'

menu1[1]='<a href="http://www.devasp.net">Devasp.net</a>'

menu1[2]='<a href="http://www.yahoo.com">Yahoo</a>'

menu1[3]='<a href="http://www.msn.com">MSN</a>'

 

//Contents for menu 2, and so on

var menu2=new Array()

menu2[0]='<a href="http://cnn.com">CNN</a>'

menu2[1]='<a href="http://msnbc.com">MSNBC</a>'

menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

                       

var menuwidth='165px' //default menu width

var menubgcolor='lightyellow'  //menu bgcolor

var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)

var hidemenu_onclick="yes" //hide menu when user clicks within menu?

 

var ie4=document.all

var ns6=document.getElementById&&!document.all

 

if (ie4||ns6)

document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

 

function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}

 

 

function showhide(obj, e, visible, hidden, menuwidth){

if (ie4||ns6)

dropmenuobj.style.left=dropmenuobj.style.top="-500px"

if (menuwidth!=""){

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=menuwidth

}

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

obj.visibility=visible

else if (e.type=="click")

obj.visibility=hidden

}

 

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

 

function clearbrowseredge(obj, whichedge){

var edgeoffset=0

if (whichedge=="rightedge"){

var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth

}

else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset

var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){

edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge

}

}

return edgeoffset

}

 

function populatemenu(what){

if (ie4||ns6)

dropmenuobj.innerHTML=what.join("")

}

 

 

function dropdownmenu(obj, e, menucontents, menuwidth){

if (window.event) event.cancelBubble=true

else if (e.stopPropagation) e.stopPropagation()

clearhidemenu()

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

populatemenu(menucontents)

 

if (ie4||ns6){

showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

}

 

return clickreturnvalue()

}

 

function clickreturnvalue(){

if (ie4||ns6) return false

else return true

}

 

function contains_ns6(a, b) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

 

function dynamichide(e){

if (ie4&&!dropmenuobj.contains(e.toElement))

delayhidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

delayhidemenu()

}

 

function hidemenu(e){

if (typeof dropmenuobj!="undefined"){

if (ie4||ns6)

dropmenuobj.style.visibility="hidden"

}

}

 

function delayhidemenu(){

if (ie4||ns6)

delayhide=setTimeout("hidemenu()",disappeardelay)

}

 

function clearhidemenu(){

if (typeof delayhide!="undefined")

clearTimeout(delayhide)

}

 

if (hidemenu_onclick=="yes")

document.onclick=hidemenu

 

</script> 

 

 

 

Now add the following HTML code to design the layout of your web page and call the above JavaScript functions.

 

<body MS_POSITIONING="GridLayout">

 

<form id="Form1" method="post" runat="server">

 

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |

 

<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (Open on click)

<center><h2>

Dont forget to visit devasp<br>

<a href="http://www.devasp.com">www.devasp.com</a>

</h2>

</center>

 

</form> 

 

This is all you will have to do. Now run your application and take mouse to menu 1 its will show u its menu items on mouse over andhide them when you will take mouse away from them. The menu 2 will show its menu items when u will click on the main menu and hide its menu items when you will take the mouse away from them. So you can create any kind of link menu in your application easily. 

Article Comments
Its really best application for creating dropdown menus for asp.net.
Thanks

Posted on 12/4/2007 2:31:43 AM by RISHI

plese tell me, how to add sub menus in this menus.
pls reply.

Posted on 12/4/2007 4:16:51 AM by Rishi

Thanks for this dorpdown menu.its really nice.but how i create "Sub menus" using this menu?
Please give me reply.
Thanks

Posted on 12/21/2007 12:42:57 AM by Yogesh

it solve my problem

Posted on 5/7/2008 12:20:09 AM by verinder singh

hello its a really good work and helps me a lot.thank u very much

Posted on 8/1/2009 11:28:20 PM by nauman

how to create submenus in these menus? plz reply

Posted on 8/1/2009 11:29:41 PM by nauman

i m very thankful to you dear

Posted on 1/9/2010 2:36:58 AM by Rohit

it s very good its help me lot thanku so much

Posted on 3/20/2010 6:08:55 AM by jyothi

thanks a lot for such a nice working code. its working properly.

Posted on 5/5/2010 1:59:42 AM by rachana

This is really helpful ! Thanks in million

Posted on 6/19/2010 4:24:12 PM by Hilaal

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Creating a Live Background Previewed Script.

Disclaimer - Privacy
© 2002-2017 DevASP.net