Jump to content

CSS Menu Popout


sircharlo
 Share

Recommended Posts

Hi, everyone. First of all, this is the page that is concerned: Page. I am upgrading the previous web site. And now I have a problem.What I would like to do is to create a pop-out menu that would appear when the person hovers on Produits et services. The menu would contain the following items: FileMaker, Servoy, and H├ębergement. The menu would disappear when the person removed their mouse from the button. Is there any way of doing this with CSS ?Thank you.

Link to comment
Share on other sites

Well, that was the original choice of the person who posted that thread, too. If your users won't be using IE6, it can all be done in CSS. But it's likely that 35-40% of your users will be on IE6, so we really have to use JS. What follows contains minimal JS, just enough to get the job done.

 <html>	<head>	   <style>		  div.menu {width: 150px; height: 20px; overflow: hidden; }		  div.body {height: auto; background-color: #DDDDDD; padding-left: 1em;}	   </style>	</head> 	<body bgcolor="#ffffff">	   <div class="menu" id="testMenu">		  <div class="menu"  onmouseover="document.getElementById('testMenu').style.height='250px';"  onmouseout="document.getElementById('testMenu').style.height='20px'}">			 Test		  </div>		  <div class="menu body" onmouseover="document.getElementById('testMenu').style.height='250px';"  onmouseout="document.getElementById('testMenu').style.height='20px'}">			   <p><a href="#">Hello world!</a></p>			   <p><a href="#">Hello world!</a></p>			   <p><a href="#">Hello world!</a></p>			   <p><a href="#">Hello world!</a></p>			   <p><a href="#">Hello world!</a></p>			   <p><a href="#">Hello world!</a></p>		  </div>	   </div>	</body> </html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...