how to create a mouse over drop down in html ?

kristi99

hi all,

how to create a mouse over drop down in html. menu mouse point over the text menu, a list of menu links is displayed.how to create this type of menu?

Thanks

ateroide

html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple CSS Based Pulldowns</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<style type="text/css">
<!--
  /* set the menu style */
  .menuHead { font-weight: bold; font-size: larger;  background-color: #A9A9A9;}
  .menuChoices { background-color: #DCDCDC; width: 200px;}
  .menu a {color: #000000; text-decoration: none;}
  .menu a:hover {text-decoration: underline;}  
  /* position your menus */
   #menu1 {position: absolute; top: 10px; left: 10px; width: 200px;}
   #menu2 {position: absolute; top: 10px; left: 210px; width: 200px;}
   #menu3 {position: absolute; top: 10px; left: 410px; width: 200px;}
-->
</style>
<script type="text/javascript">
<!--
/* we'll only allow DOM browsers to simplify things*/
(document.getElementById ? DOMCapable = true : DOMCapable = false);
function hide(menuName)
{
 if (DOMCapable)
  {
    var theMenu = document.getElementById(menuName+"choices");
    theMenu.style.visibility = 'hidden';
  }
}
function show(menuName)
{
 if (DOMCapable)
  {
    var theMenu = document.getElementById(menuName+"choices");
    theMenu.style.visibility = 'visible';
  }
}
//-->
</script>
</head>
<body dir="rtl">
<div id="menu1" dir="rtl" class="menu" onmouseover="show('menu1');" onmouseout="hide('menu1');">
   <div class="menuHead">Moteur de recherche</div>
      <div id="menu1choices" class="menuChoices"> 
        <a href="http://www.google.com">google</a><br />
        <a href="http://www.yahoo.com">yahoo</a><br />
        <a href="http://www.teoma.com">teoma</a><br />
        <a href="http://www.msn.com">msn</a><br />
        <a href="http://www.altavista.com">altavista</a><br />
      </div>
</div>
<div id="menu2" dir="rtl" class="menu" onmouseover="show('menu2');" onmouseout="hide('menu2');">
   <div class="menuHead">e-commerce</div>
      <div id="menu2choices"  class="menuChoices"> 
       <a href="http://www.ebay.com">ebay</a><br />
       <a href="http://www.buy.com">buy</a><br />
      </div>
</div>
<div id="menu3" dir="rtl" class="menu" onmouseover="show('menu3');" onmouseout="hide('menu3');">
   <div class="menuHead">e-Books</div> 
      <div id="menu3choices"  class="menuChoices"> 
       <a href="http://www.javascript.com">JavaScriptRef</a><br />
       <a href="http://www.w3c.org">W3C</a><br />
       <a href="http://www.pint.com">PINT</a><br />
      </div>
</div>
<script type="text/javascript">
<!--
/* Don't hide menus for JS off and older browsers */
if (DOMCapable)
 {
  hide("menu1"); 
  hide("menu2");
  hide("menu3");
 }
//-->
</script>
</body>
</html>

DrRakha

thank u

Guest

November 13, 2011 at 5:32 pmYvonne :If you wrap your page with display:none, your page will not load when vtriioss have javascript disabled.Use jQuery to add display:none css property to the body use the script below and no div container is needed, your page will have the nice loading effect when javascript is enable and will still display without javascript.<script type="text/javascript"> $(document).ready(function() { $("body").css("display", "none"); $("body").fadeIn(2000); });</script>

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

how to create a mouse over drop down in html ?

Topic Tags