Is there any Script for the drop down menu itself work OnClick then have submenus OnMouseover as well?
Thanks
CSS Codes
Junior Coders
Drop Down OnClick & Sub-Tree Menu
Is there any Script for the drop down menu itself work OnClick then have submenus OnMouseover as well?
Thanks
Junior Coders
Please have a look.....
----------------------------------------
<html>
<head>
<title>Folder Menu</title>
<style type="text/css">
.clsMainHide{
display:none;
}
.clsMainShow{
display:block;
}
.clsHeading{
cursor:hand;
margin-bottom: 0px;
background-color:#ECFFEC;
color:#000000;
width:140px;
padding:0px;
text-align:center;
font-weight:bold;
}
.menutitle{
cursor:hand;
margin-bottom: 0px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:0px;
text-align:center;
font-weight:bold;
border:1px solid #000000;
}
.submenu{
margin-bottom: 0em;
width:70px;
text-align:center;
}
.submenutext{
margin-left: 2.5em;
background-color:#FF99FF;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #000000;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #000000;
border-left-color: #000000;
color:#000000;
width:100px;
padding:0px;
text-align:center;
}
a:link {color: #000000}
a:visited {color: #FFFF00}
a:hover {color: #00FFA6}
a:active {color: #FFFF00}
</style>
<script type="text/javascript">
function fShowmenu(){
if(document.getElementById('masterdiv').className=="clsMainShow"){
document.getElementById('masterdiv').className="clsMainHide"
}
else{
document.getElementById('masterdiv').className="clsMainShow"
}
}
if (document.getElementById){ //
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //
if(el.style.display != "block"){ //
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="menu" class="clsHeading" onclick="fShowmenu()">Main Menu</div>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv" class="clsMainHide">
<div class="menutitle" onmouseover="SwitchMenu('sub1')">Module1</div>
<span class="submenu" id="sub1">
<a class="submenutext" href="new.htm">Ch1P1</a><br>
<a class="submenutext" href="hot.htm">Ch1P2</a><br>
<a class="submenutext" href="three.htm">Ch1P3</a><br>
<a class="submenutext" href="four.htm">Ch1P4</a>
</span>
<div class="menutitle" onmouseover="SwitchMenu('sub2')">Module2</div>
<span class="submenu" id="sub2">
<a class="submenutext" href="ch2p1.htm">Ch3P1</a><br>
<a class="submenutext" href="ch2p2.htm">Ch3P2</a><br>
<a class="submenutext" href="ch2p3.htm">Ch3P3</a>
</span>
<div class="menutitle" onmouseover="SwitchMenu('sub3')">Module3</div>
<span class="submenu" id="sub3">
<a class="submenutext" href="ch3p1.htm">Ch3P1</a><br>
</span>
<div class="menutitle" onmouseover="SwitchMenu('sub4')">Module4</div>
<span class="submenu" id="sub4">
<a class="submenutext" href="ch4p1.htm">Ch4P1</a><br>
<a class="submenutext" href="ch4p2.htm">Ch4P2</a><br>
<a class="submenutext" href="ch4p3.htm">Ch4P2</a><br>
<a class="submenutext" href="ch4p3.htm">Ch4P3</a>
</span>
</div>
</body>
</html>
Junior Coders
Drop Down OnClick & Sub-Tree Menu
Thanks for your help.
But this is not what I want. Once I OnClick on main menu then 2nd level menu will come out. After that I still need to Onclick again at 2nd level menu. then 3rd come out. And if possible, don't want to use switch menu.
Junior Coders
Please visit http://www.destroydrop.com/javascripts/tree/
Hope this will fulfill your wish
Posting Permissions
Reply With Quote
Bookmarks