How to change a menubar mouse over option into on click option

Question

ganesh641 0 Newbie Poster

12 Years Ago

In my Application The menu bar is automatically drop down when i move the mouse point to menu title, but i want only when i click the menu title then only its drop down.Is there any option in using Java script let me know...

javascript

script.js (1.27 KB)

var menu=function(){
	var t=15,z=50,s=6,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=function(p,c){
		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
		for(i;i<l;i++){
			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
			h.onmouseover = new Function(this.n + '.st(' + i + ',true)');
			h.onmouseout = new Function(this.n + '.st(' + i + ')');
			
		
		}
		
	}
	
	dd.prototype.st=function(x,f){
		
		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
		clearInterval(c.t); c.style.overflow='hidden';
		if(f){
			p.className+=' '+a;
			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
	}
	function sl(c,f){
		
		var h=c.offsetHeight;
		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
			clearInterval(c.t); return
		}
		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
		c.style.height=h+(d*f)+'px'
	}
	return{dd:dd}
}();

userpage.htm (13.27 KB)

The attachment preview is chopped off after the first 10 KB. Please download the entire file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>User Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="script.js"></script>


	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Events - Enriched Academy</title>
	<meta name="description" content="">
	<meta name="author" content="604Media">

	<meta name="viewport" content="width=960,initial-scale=1">

	
    <link rel="stylesheet" href="css/admin-style.css">

	<script src="js/libs/modernizr-2.0.6.min.js"></script>


<script type="text/javascript" src="tab/tabber.js"></script>
<link rel="stylesheet" href="tab/example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">

<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
	
<script language="javascript">
function openpopup(id){
      //Calculate Page width and height
      var pageWidth = window.innerWidth;
      var pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
      if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
      } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
      }
      } 
      //Make the background div tag visible...
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "visible";
       
      var divobj = document.getElementById(id);
      divobj.style.visibility = "visible";
      if (navigator.appName=="Microsoft Internet Explorer")
      computedStyle = divobj.currentStyle;
      else computedStyle = document.defaultView.getComputedStyle(divobj, null);
      //Get Div width and height from StyleSheet
      var divWidth = computedStyle.width.replace('px', '');
      var divHeight = computedStyle.height.replace('px', '');
      var divLeft = (pageWidth - divWidth) / 2;
      var divTop = (pageHeight - divHeight) / 2;
      //Set Left and top coordinates for the div tag
      divobj.style.left = divLeft + "px";
      divobj.style.top = divTop + "px";
      //Put a Close button for closing the popped up Div tag
      if(divobj.innerHTML.indexOf("closepopup('" + id +"')") < 0 )
      divobj.innerHTML = "<a href=\"#\" onclick=\"closepopup('" + id +"')\"><span class=\"close_button\"></span></a>" + divobj.innerHTML;
}
function closepopup(id){
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "hidden";
      var divobj = document.getElementById(id);
      divobj.style.visibility = "hidden";
}
</script> 


</head>

<body class="userpage">
        <div class="userpage-wrap">
        	<div class="content">
            
            	<div class="userpage-header">
                	<div class="logo"><a href="#"><img src="images/logo.png" alt="logo" /></a></div>
            		<h1 class="slogan">SUPPLIER RATING SYSTEM</h1>
                    
                    <div class="user-top-setting">
                    	<div class="user-lft"></div>
                        <div class="user-mid">
                        	<ul>
                            	<li>Welcome <span>Guest!</span></li>
                                <li class="last-child"><a href="#">settings</a></li>
                            </ul>
                        </div>
                        <div class="user-rgt"></div><div class="clear"></div>
                        <p class="time">10:45 am   23  Fri, Dec 2011</p>
                    </div>
                  </div>
                  
                  
                  <div class="userpage-main-content">
                  
                  	<div class="nav-menu">
                    	<div class="nav-lft"></div>
                        <div class="nav-mid">
                        	<ul class="menu" id="menu">
                            	<li class="active" id="supp-mangt"><a href="#">Supplier Management</a><span> <img src="images/menu-line.png"></span>
									<ul>
											<li><a href="#">Navigation Item 1</a></li>
											<li><a href="#">Navigation Item 2</a></li>
											<li><a href="#">Navigation Item 3</a></li>
											<li><a href="#">Navigation Item 4</a></li>
											<li><a href="#">Navigation Item 5</a></li>
										</ul>
								</li>
                                <li><a href="#">Question Management</a><span> <img src="images/menu-line.png"></span></li>
								 <li><a href="#">Rating Management</a><span> <img src="images/menu-line.png"></span></li>
								  <li><a href="#">Action Items</a><span> <img src="images/menu-line.png"></span></li>
								   <li><a href="#">Reports</a><span> <img src="images/menu-line.png"></span></li>
								   <li><a href="#">Admin</a></li>
                            </ul>
                            
                            
                        </div>
                        <div class="nav-rgt"></div>
                    </div>
                    
                    <div class="section">
                    	<h1>List User</h1>
                    	<span class="new-question"><a href="#">Add New Users</a></span>
						
						
						<div class="user-filter">
						<h4>Filter</h4>
						 
						    <ul>
							
							    <li>
								  <label>User Group:</label>
								
									<select id="select1" onchange="selopt1();">
														<option selected="" value="">Stakeholder</option>
														<option value="Jan">Stakeholder</option>
														<option value="Feb">SBMT</option>
														<option value="March">SBMT</option>
													</select>
													
						        </li>
								
								
													
								
								<li> <label>Name:</label>								                                
                                  <input type="text"  name="name">
                                </li>
								
								
								
								<li> <label>Manager Name:</label>						
                                     <input type="text" name="name">                                                            
								</li>
								
								<li> <label>Location:</label> 
									<select id="select1" onchange="selopt1();">
														<option selected="" value="">Netherland</option>
														<option value="Jan">chennai</option>
														<option value="Feb">singapore</option>
														<option value="March">Netherland</option>
													</select>
								</li>
								
								<li>
								  <label>Department:</label>
								  
									<select id="select1" onchange="selopt1();">
														<option selected="" value="">Stakeholder</option>
														<option value="Jan">Stakeholder</option>
														<option value="Feb">SBMT</option>
														<option value="March">SBMT</option>
													</select>
													
						        </li>
								
								<li> <label>Status:</label>
								
								
									<select id="select1" onchange="selopt1();">
														<option selected="" value="">Active</option>
														<option value="Jan">In Active</option>
														<option value="Feb">Active</option>
														<option value="March">In Active</option>
													</select>
													
                             
								</li>
																
								<li style="float:left; width:500px; padding:6px 12px; background:url(images/returned-user-bg.png) no-repeat 0 0; margin:10px 0 0 10px; color:#099f02;">134 User(s) Returned</li>
																
								<li style="float:right; width:140px; "><input type="button" value="Submit" name="submit" class="search"> </li>
							
							</ul>
								
						
						</div>
						
						
						
						<div style="float:left; width:100%; margin-top:10px;">
                        
                        <table cellpadding="5" cellspacing="0" border="0" width="100%">
                        <thead>
                        	<tr>
                            	<th  align="left">Edit</th>
                                <th align="center">User Name</th>
                                <th align="center">Name</th>
                                <th align="center">Location</th>
                                <th align="center">Department</th>
                                <th align="center">Manager</th>
                                <th align="center">User Group</th>
                                <th align="center">Status</th>
                            </tr>
                          </thead>
                          
							<tr class="odd">
                            	<td class="title"  align="left"><a href="#" onclick="openpopup('popup1')"><img src="images/user-edit.png"  /></a>
                                
								
								
								<div id="popup1" class="popup" style=" width:435px; height:470px; ">
			
			<div class="dashboard-submitarea">
					
					<h4>Edit User</h4>
					 
					 <ul>
					 <li> <label>E-mail ID:</label>
                                    <input type="text"  name="name">
								</li>
								
					 <li> <label>Name:</label>
                                    <input type="text"  name="name">
								</li>
								
								
					 
					 <li> <label>Location:</label>
									<select id="select1" onchange="selopt1();">
														<option selected="" value="">Netherland</option>
														<option value="Jan">chennai</option>
														<option value="Feb">singapore</option>
														<option value="March">Netherland</option>
													</select>

2 Contributors
1 Reply
79 Views
6 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by stultuske

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

stultuske 1,116 Posting Maven Featured Poster · Answer 1 · 2012-02-09T15:02:10+00:00

it would mean changing your script.
if you go through your script.js file, you can see that these events (hiding and showing) are triggered by onmouseover and onmouseout, that's causing the menu to show/hide when you move your mouse over it.