SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard PHPycho's Avatar
    Join Date
    Dec 2005
    Posts
    1,201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Wizard PHPycho's Avatar
    Join Date
    Dec 2005
    Posts
    1,201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello everybody i am activating this post because of no reply........
    is there nobody who can help me in this case...........obviously there are..
    may be due to busy ness they were unable ........
    I am calling for help ....
    thanks in advance

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use CSS to set the initial display value for the sub-menus to 'none' (or offset them off the screen).

    Your code is a mess, though - you have unclosed elements which make it very difficult to work out what is going on. Validate.

  4. #4
    SitePoint Wizard PHPycho's Avatar
    Join Date
    Dec 2005
    Posts
    1,201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for interrupting......
    actually i didnt get your point . please help me in a bit detail sir...
    Anyway thanks for the reply.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •