how to create a mouse over drop down in html ?

Sat Feb 21, 2009 8:17 am

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

Mon Feb 23, 2009 3:37 pm

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>

Mon Feb 23, 2009 8:58 pm

thank u

Mon Jun 11, 2012 2:17 pm

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>

how to create a mouse over drop down in html ?

how to create a mouse over drop down in html ?

Re: how to create a mouse over drop down in html ?

Re: how to create a mouse over drop down in html ?

jGtPhRlpSMDe

Topic Tags