Go Back   SitePoint Forums > Forum Index > Program Your Site > JavaScript
Reload this Page want to modify the javascript code !!
Newsletter FAQ Members List Calendar Mark Forums Read

New to SitePoint Forums? Register here for free!

SitePoint Sponsor
 
 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old Aug 26, 2006, 02:02   #1
PHPycho
SitePoint Wizard
 
PHPycho's Avatar
 
Join Date: Dec 2005
Posts: 1,128
want to modify the javascript code !!
I had made the menu using javascript and css.
what my problem is that when the menu loads , the submenus appears, which should appear only on mouseover.

what i want to do?
1> In horizontal menu ,when mouse is kept then a dropdown submenus appears but when the mouse is kept away it still
remains there. i want to disappear when the mouse is taken away.
2> In vertical menu, when the page loads submenu appears during loadtime. I want to disappear during loadtime.
Mysite is http://www.heavenlypath.org/ , can be checkd it out here..
Codes for horizontal menu and vertical menu are given below
In head portion
Code:
<head>
<!-- javascript function for vertical menu -->
<SCRIPT type=text/javascript>
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=20; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>
<!-- JS function for Horizontal Menu -->
<SCRIPT type=text/javascript>
<!--
function hmontre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('hsmenu'+i)) {document.getElementById('hsmenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>
</head>
In Body portion
Code:
<body>
<!-- Code for vertical menu -->
<DIV id=hmenu style="position: absolute; left: 296px; top: 122px; width:600px;">
<DL>
  <DT onmouseover=javascript:hmontre();>
  <A title="" href=" ">Home</A> 
  </DT>
</DL>
<DL>
  <DT onMouseOver="javascript:hmontre('hsmenu1');">
  <A title="" href=" ">About US </A>
  <DD id=hsmenu1>
	  <UL>
			<LI><A href="">Introduction</A> 
			<LI><A href="">Background</A> 	
			<LI><A href="">Central Committee</A> 			
			<LI><A href="">District Committee +</A> 					
	   </UL>
   </DD>
</DL>
<DL>
  <DT onMouseOver="javascript:hmontre('hsmenu3');">
  <A title="" href=" ">Biography </A>
  <DD id=hsmenu3>
  <UL>
	<LI><A href=" ">GodAngel</A> 
	<LI><A href=" ">Neehing Guru</A> 
	<LI><A href=" ">Seming Guru</A> 
	<LI><A href=" ">Rhezoin Guru</A> 
	<LI><A href=" ">Hengwee Guru</A> 
	<LI><A href=" ">Yamphung Guru</A> 
  </UL>
  </DD>
</DL>
<DL>
  <DT onMouseOver="javascript:hmontre('hsmenu4');">
  <A title="" href=" ">Philosophy </A>
  <DD id=hsmenu4>
  <UL>
    <LI><A href=" ">Sub Menu 3.1</A> 
    <LI><A href=" ">Sub Menu 3.2</A> 
  </UL>
  </DD>
</DL>
<DL>
  <DT onMouseOver="javascript:hmontre('hsmenu5');">
  <A title="" href=" ">Affiliates </A>
  <DD id=hsmenu5>
  <UL>
    <LI><A href=" ">Woman Organization</A> 
    <LI><A href=" ">Youth Organization</A> 
	<LI><A href=" ">Syangmee Organization</A> 
    <LI><A href=" ">Jeevan Darsan Association</A> 
	<LI><A href=" ">Cultural Association</A> 
    <LI><A href=" ">Art Division +</A> 
  </UL>
  </DD>
</DL>
<DL>
  <DT onMouseOver="javascript:hmontre('hsmenu6');">
  <A title="" href=" ">Network </A>
  <DD id=hsmenu6>
  <UL>
    <LI><A href=" ">HPO India</A> 
    <LI><A href=" ">HPO HongKong</A> 
	<LI><A href=" ">HPO Bhutan</A> 
    <LI><A href=" ">HPO Singapore</A> 
	<LI><A href=" ">HPO KSA</A> 
    <LI><A href=" ">HPO UK</A> 
  </UL>
  </DD>
</DL>
<DL>
  <DT onMouseOver="javascript:hmontre('hsmenu7');">
  <A title="" href=" ">Sandesh </A>
  <DD id=hsmenu7>
  <UL>
    <LI><A href=" ">Sub Menu 3.1</A> 
    <LI><A href=" ">Sub Menu 3.2</A> 
  </UL>
  </DD>
</DL>
</DIV>

<!-- Code for horizental menu -->
<DL id=menu>

  <DT onMouseOver="javascript:montre('smenu1');">
  	<A href=" ">Home</A> 
  </DT>
  <!--
  <DD id=smenu1 onMouseOver="javascript:montre('smenu1');" onmouseout=javascript:montre();>
	  <UL>
		<LI><A href="">Sub Menu 1.1</A> </LI>
		<LI><A href="">Sub Menu 1.2</A> </LI>
		<LI><A href="">Sub Menu 1.3</A> </LI>
	  </UL>
  </DD>
  -->  	
  <DT onMouseOver="javascript:montre('smenu2');" onmouseout=javascript:montre();>
  <A href=" ">About Us</A>  
  </DT>
  <DD id=smenu2 onMouseOver="javascript:montre('smenu2');" onmouseout=javascript:montre();>
	  <UL>
		<LI><A href="">Introduction</A> 
			<LI><A href="">Background</A> 	
			<LI><A href="">Central Committee</A> 			
			<LI><A href="">District Committee +</A> 
	  </UL>
  </DD>
  <DT onMouseOver="javascript:montre('smenu3');" onmouseout=javascript:montre();>
  <A href=" ">Membnership</A>  
  </DT>
  <DD id=smenu3 onMouseOver="javascript:montre('smenu3');" onmouseout=javascript:montre();>
	  <UL>
		<LI><A href="">Information</A> </LI>
		<LI><A href="">Lifetime Member</A> </LI>	
		<LI><A href="">General Member</A> </LI>	
	   </UL>
   </DD>
   
   <DT onMouseOver="javascript:montre('smenu4');" onmouseout=javascript:montre();>
  <A href=" ">Photo Gallery</A>  
  </DT>
  <DD id=smenu4 onMouseOver="javascript:montre('smenu4');" onmouseout=javascript:montre();>
	  <UL>
		<LI><A href="">Supreme Master</A> </LI>
		<LI><A href="">Other Gurus</A> </LI>	
		<LI><A href="">General Activities</A> </LI>	
	   </UL>
   </DD>
     
   <DT onMouseOver="javascript:montre('smenu5');" onmouseout=javascript:montre();>
  <A href=" ">Publications</A>  
  </DT>
  <DD id=smenu5 onMouseOver="javascript:montre('smenu5');" onmouseout=javascript:montre();>
	  <UL>
		<LI><A href="">Books</A> </LI>
		<LI><A href="">Audio Cassettes</A> </LI>	
		<LI><A href="">Video Clips</A> </LI>		
	   </UL>
   </DD>
   <DT onMouseOver="javascript:montre('smenu6');" onmouseout=javascript:montre();>
  <A href=" ">Yoga</A>  
  </DT>  
	<DT onMouseOver="javascript:montre('smenu7');" onmouseout=javascript:montre();>
  <A href=" ">Contact US </A>  
  </DT>   
   <DT onMouseOver="javascript:montre('smenu8');" onmouseout=javascript:montre();>
  <A href=" ">Philosophy of Life </A>  
  </DT>
   
   <DT onMouseOver="javascript:montre('smenu9');" onmouseout=javascript:montre();>
  <A href=" ">Culture</A>  
  </DT>   
   <DT onMouseOver="javascript:montre('smenu10');" onmouseout=javascript:montre();>
  <A href=" ">Healing Center </A>  
  </DT>
   <DD id=smenu10 onMouseOver="javascript:montre('smenu10');" onmouseout=javascript:montre();>
	  <UL>
		<LI><A href="">Aamas Healing Center</A> </LI>			
	   </UL>
   </DD>
   <DT onMouseOver="javascript:montre('smenu11');" onmouseout=javascript:montre();>
  <A href=" ">Syangmee </A>  
  </DT>
   
   <DT onMouseOver="javascript:montre('smenu12');" onmouseout=javascript:montre();>
  <A href=" ">Nishuee</A>  
  </DT>
  <DT onMouseOver="javascript:montre('smenu13');" onmouseout=javascript:montre();>
  <A href=" ">Comment</A>  
  </DT>
  <DT onMouseOver="javascript:montre('smenu14');" onmouseout=javascript:montre();>
  <A href=" ">Download</A>  
  </DT>
   
</DL>
<!-- Vertical Menu Ends -->	

</body>
css file for horizontal menu
Code:
DL {
	LIST-STYLE-TYPE: none
}
DT {
	LIST-STYLE-TYPE: none
}
DD {
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	PADDING-TOP: 0px; 
	LIST-STYLE-TYPE: none
}

UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#hmenu {
Z-INDEX: 0; POSITION: absolute; padding-left: 20px;
text-align: center;
}
#hmenu DL {
	FLOAT: left; WIDTH: 7em;
	height: 20px;
}
#hmenu DT {
	BORDER-RIGHT: gray 1px solid; 
	BORDER-TOP: gray 2px solid; 
	FONT-WEIGHT: bold; 
	BACKGROUND: #99FFCC; 
	BORDER-LEFT: gray 1px solid; 
	CURSOR: pointer; 
	BORDER-BOTTOM: gray 0px solid; 
	TEXT-ALIGN: center
}
#hmenu DD {
	BORDER-RIGHT: gray 1px solid; 
	BORDER-TOP: gray 1px solid; 
	DISPLAY: none; 
	BORDER-LEFT: gray 1px solid; 
	BORDER-BOTTOM: gray 1px solid
}
#hmenu LI {
	BACKGROUND: #99FFFF; 
	TEXT-ALIGN: center
}
#hmenu LI A {
	BORDER-RIGHT: 0px; 
	BORDER-TOP: 0px; 
	DISPLAY: block; 
	BORDER-LEFT: 0px; 
	COLOR: #336633; 
	BORDER-BOTTOM: 0px; 
	HEIGHT: 100%; 
	TEXT-DECORATION: none
}
#hmenu DT A {
	BORDER-RIGHT: 0px; 
	BORDER-TOP: 0px; 
	DISPLAY: block; 
	BORDER-LEFT: 0px; 
	COLOR: #336000; 
	BORDER-BOTTOM: 0px; 
	HEIGHT: 100%; 
	TEXT-DECORATION: none
}
#hmenu LI A:hover {
	BACKGROUND: #99CCFF;
	color: Maroon;
}
#hmenu DT A:hover {
	BACKGROUND: #eee
}
css file for vertical menu
Code:
DL {
	LIST-STYLE-TYPE: none
}
DT {
	LIST-STYLE-TYPE: none
}
DD {
	LIST-STYLE-TYPE: none
}
UL {
	LIST-STYLE-TYPE: none
}
LI {
	LIST-STYLE-TYPE: none
}
#menu 
{
padding-top: 0px;
LEFT: 0px; 
WIDTH: 91%;
text-align: left;
}
#menu DT 
{
	BORDER-RIGHT: #669966 3px solid; 
   FONT-WEIGHT: bold; 
	BACKGROUND: #F8F1D9; 
	MARGIN: 2px 0px;
   BORDER-LEFT: #669966 3px solid;  
	CURSOR: pointer; 
	LINE-HEIGHT: 20px; 
	BORDER-BOTTOM: gray 1px solid; 
	HEIGHT: 20px; 
	TEXT-ALIGN: left;
}
#menu DD 
{
	BORDER-TOP: gray 2px solid; 
	MARGIN-TOP: -1.4em; 
	Z-INDEX: 100; 
	BACKGROUND: #FFCC99; 
	LEFT: 16em; 	
	WIDTH: 10em; 
	BORDER-BOTTOM: gray 2px solid; 
	BORDER-RIGHT: gray 2px solid; 
	POSITION: absolute
}
#menu UL {
	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
#menu LI {
	FONT-SIZE: 85%; LINE-HEIGHT: 18px; HEIGHT: 18px; TEXT-ALIGN: center
}
#menu LI A {
	DISPLAY: block; 
	color: #999933;
	TEXT-DECORATION: none;
	text-align: left;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#menu DT A
{
	DISPLAY: block; 
	COLOR: #336000; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-left: 8px;
	text-align: left;
	TEXT-DECORATION: none
}

#menu DT A:hover
{
	DISPLAY: block; 
	COLOR: #003366; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-left: 8px;
	text-align: left;
	TEXT-DECORATION: none;
	background-color: CCCCFF;
}
#menu LI A:hover 
{
	TEXT-DECORATION: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: Maroon;
	background-color: #99CC99;
	font-weight: bold;
}
I am waiting for your help. Anyway thanks for reading my long problem. Lots of thanks in advance
PHPycho is offline   Reply With Quote
 

Bookmarks

« Previous Thread | Next Thread »

Thread Tools
Display Modes
Threaded Mode Threaded Mode

 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Sponsored Links
 
Forum Jump


All times are GMT -7. The time now is 03:02.


Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
Copyright 1998-2009, SitePoint Pty Ltd. All Rights Reserved