Link to home
Start Free TrialLog in
Avatar of sakvk
sakvk

asked on

Simple dropdown from button

I have a button, Overview, when the user points his mouse over the button, a pull down/drop down menu should come up.... like Aboutus, Investors...

How do I achieve this?
Avatar of quincydude
quincydude
Flag of Hong Kong image

something like this?
<html><head>
<script language="Javascript">
  
  function enable() {
       document.fm.details.style.display="block";
   }
 
 
    </script>
</head>
<body >
<form name="fm" >
 
<input name="overview" type="button" value="Overview" onmouseover="enable()" />
 
<select name="details" style="display:none;">
	<option value=""></>
	<option value="Aboutus">Aboutus</>
	<option value="Investors">Investors</>
</select>
 
 </form>
</body>
</html>

Open in new window

Avatar of sakvk
sakvk

ASKER

Hi,

When I keep my mouse on overview, a navigational pull down menu should come up. I should not get the combo box inside which all the Aboutus and other menus are present.

here's a simple demo
you can find more examples here
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

<html><head>
<style>
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
width:100px;
}
 
#nav-menu ul li
{
	background-color: #889933;
}
 
#nav-menu ul li ul li
{
	background-color: #339933;
}
 
 
</style>
<script type="text/javascript">
	function showMenu()
	{
		document.getElementById("submenu").style.display="block";
	}
 
	function hideMenu()
	{
		document.getElementById("submenu").style.display="none";
	}
</script>
</head>
<body >
<div id="nav-menu">
<ul >
<li><span  onmouseover="showMenu();" >Overview</span></a>
	<ul id="submenu" style="display:none">
	<li><a href="#">Aboutus</a></li>
	<li><a href="#">Investors</a></li>
	</ul>
</li>
</ul>
</div
 
</body>
</html>

Open in new window

Avatar of sakvk

ASKER

this is what i was looking for. But I have  one question. I save this as .html and run this and it works fine.

I right click on the html page and do a view source, when I do a View Source, then I see the entire code. Many websites, I visited , I found this feature, but when I do a view source I cannot get anything... Why is that?
that's impossible, they may be just trying to fake you for the idea.
one of the trick is adding many blank lines before the real code presents...so when you first click view source, you only see blank lines. But actually if you scroll down you will see what you want to see.
this is very simple , just you have to create run time element like div.......

just copy and paste bellow code... and see result ........

===========================

<html>
<script language="javascript">
var menuDiv;
function showMenu()
{
      menuDiv=document.createElement("DIV");
      var aCssText="border:1px solid #997740;border-color: #997740;position: relative;display: block;margin: 0;padding: 5px 10px;width: auto;white-space: nowrap;text-align: left;text-decoration: none;background: #F9F9F9;color: #857659;font: 11px arial";
      var menuItem="<UL style=\"margin: 0;padding: 0;z-index: 30\">";
      menuItem+="<LI>first Row";
      menuItem+="<LI>second Row";
      menuItem+="<LI>third Row";
      menuItem+="</LI></UL>";
      menuDiv.innerHTML=menuItem;

      menuDiv.style.cssText="position: absolute;      margin: 0;      padding: 0;      background: #F9F9F9;border: 1px solid #997740";
      var p=document.getElementById("b1");
      
      var pos=findPos(p);      
      menuDiv.style.left = pos[0];
      menuDiv.style.top = pos[1]+20;
      window.document.body.appendChild(menuDiv);
}

function findPos(node)
      {
            var curleft = curtop = 0;
            if (node.offsetParent)
            {
                  curleft = node.offsetLeft;
                  curtop = node.offsetTop;
                  while (node = node.offsetParent)
                  {
                        curleft += node.offsetLeft;
                        curtop += node.offsetTop;
                  }
            }
            return [curleft,curtop];
      }
      function CloseMenu()
      {
            if(menuDiv)
            {
                  window.document.body.removeChild(menuDiv);
                  menuDiv=null;
                  window.document.onclick=null;
            }
      }
</script>
<body>
<form name="ww">
<input type="button" id="b1" value="Sample" onmouseover="showMenu()" onmouseout="CloseMenu()">
</form>
</body>
</html>


========================================


if you want menu level event bind ...tell us.....
Avatar of sakvk

ASKER

But the problem to the above solution given by jitendras.. is

when i keep my mouse over Sample, I am able to see the 3 drop down menus, firstRow, SecondRow and ThirdRow, But I am not able to click on any of them. I should get <a href="#">firstRow</a>, so that When i click on firstRow, it should take me another html page.

I also have a question for you,in some website when you do a View Source, you cannot see this code.. why is that?
read my last reply
Avatar of sakvk

ASKER

http://www.magdevgroup.com/portfolioweb.htm

Do a view source for this website, you will not get any javascript code... when you keep a mouse over Portfolio, you will find a drop down where each submenu links to a html.

can you please explain this...
ASKER CERTIFIED SOLUTION
Avatar of quincydude
quincydude
Flag of Hong Kong image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sakvk

ASKER

okie, I agree with you. Thanku for your answers.
where i am write
first Row
second  Row

you can write there .

<a href="abc.com">first Row</a>

Avatar of sakvk

ASKER

Hi Jitendrajls,

I added the <a href="abc.com">first Row</a>
to the code, but when I do a mouse over, and try to click on first row, then the whole drop down is dis-appearing. Why is this... I am not able to click on first Row....

Please do let me know. Are you talking about the menu level bind....