Total members 11638 |It is currently Thu May 25, 2017 12:28 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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

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

thank u


Author:
Mastermind
User avatar Posts: 2707
Have thanks: 74 time

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     -  
 display Coordinates of mouse in java     -  
 Change background position when mouse over     -  
 Change the border style on mouse over     -  



Topic Tags

HTML Div, JavaScript Events






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