Total members 11343 |It is currently Thu Jul 24, 2014 8:18 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

All times are UTC [ DST ]



  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


Author:
Newbie
User avatar Posts: 1
Have thanks: 0 time
  Re: how to create a mouse over drop down in html ?
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>


Author:
Newbie
User avatar Posts: 1
Have thanks: 0 time
  Re: how to create a mouse over drop down in html ?
Mon Feb 23, 2009 8:58 pm 
thank u

_________________
Please recommend / share my post if you found it helpful.


Author:
Mastermind
User avatar Posts: 2694
Have thanks: 73 time
  jGtPhRlpSMDe
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>


Author:
Post new topic Reply to topic  [ 4 posts ] 

  Related Posts  to : how to create a mouse over drop down in html ?
 Drag and Drop     -  
 Drag and Drop using javascript     -  
 Drag and Drop in java     -  
 Validation of php drop down menu of months,days and years     -  
 Mouse position in C++     -  
 hi i need ppt for space mouse.     -  
 Get Mouse Position using JQuery     -  
 Change the border style on mouse over     -  
 Detecting right mouse button click     -  
 display Coordinates of mouse in java     -  

All times are UTC [ DST ]



Topic Tags

JavaScript Events, HTML Div






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team