Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Close the menu when the mouse is out and the page is loaded

    Hi all,

    The code below is a nice menu that works not very well:
    I need it to close when the mouse is not over it, and I dont know how to do it.
    Plus when the page load the menu goes expanded and it only should be expanded when the mouse is over not on page load.

    Thanks a lot in advance!

    Code:
    <head>
    
    <script type="text/javascript">
    <!--
    
    
    window.onload=montre;
    
    
    function montre(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    
    body {margin: 10px;
    padding: 0;
    font: 1em Verdana, sans-serif;}
    
    dt, dl, dd, ul, li {
    list-style-type: none;
    margin: 0 10px 0 0;
    padding: 0;
    }
    
    #menu {
    position : absolute;
    left: 50px;
    top: 20px;
    }
    
    #menu dl {
    float: left;
    }
    #menu li {
    display: inline;
    }
    
    #menu a {
    text-decoration: none;
    color: #000;
    background: #fff;
    }
    
    #smenu1, #smenu2, #smenu3, #smenu4 {
    position: absolute;
    left: 0;
    font-size: 0.7em;
    border-top: 1px solid gray;
    width: 400px;
    }
    
    
    .mentions {
    position: absolute;
    bottom : 300px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    }
    a {text-decoration: none;
    color: #222;
    }
    
    -->
    </style>
    
    </head>
    
    <body>
    
    <div id="menu">
    
    	<dl>
    		<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
    			<dd id="smenu1">
    				<ul>
    					<li><a href="#">Menu 1.1</a></li>
    					<li><a href="#">Menu 1.2</a></li>
    					<li><a href="#">Menu 1.3</a></li>
    
    				</ul>
    			</dd>
    	</dl>
    	
    	<dl>			
    		<dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
    			<dd id="smenu2">
    				<ul>
    					<li><a href="#">Menu 2.1</a></li>
    
    					<li><a href="#">Menu 2.2</a></li>
    				</ul>
    			</dd>
    	</dl>
    	
    	<dl>	
    		<dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
    			<dd id="smenu3">
    				<ul>
    
    					<li><a href="#">Menu 3.1</a></li>
    					<li><a href="#">Menu 3.2</a></li>
    					<li><a href="#">Menu 3.3</a></li>
    					<li><a href="#">Menu 3.4</a></li>
    					<li><a href="#">Menu 3.5</a></li>
    				</ul>
    
    			</dd>
    	</dl>
    	
    	<dl>	
    		<dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
    			<dd id="smenu4">
    				<ul>
    					<li><a href="#">Menu 4.1</a></li>
    					<li><a href="#">Menu 4.2</a></li>
    
    					<li><a href="#">Menu 4.3</a></li>
    				</ul>
    			</dd>
    	</dl>
    	
    </div>
    
    
    
    </body>

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    Code:
     
    <head>
     
    <script type="text/javascript">
    <!--
     
     
    window.onload=montre;
     
     
    function montre(id) {
    var d;
    d = id?document.getElementById(id):undefined;
    for (var i = 1; i<=4; i++) {
    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
    <style type="text/css">
    <!--
     
    body {margin: 10px;
    padding: 0;
    font: 1em Verdana, sans-serif;}
     
    dt, dl, dd, ul, li {
    list-style-type: none;
    margin: 0 10px 0 0;
    padding: 0;
    }
     
    #menu {
    position : absolute;
    left: 50px;
    top: 20px;
    }
     
    #menu dl {
    float: left;
    }
    #menu li {
    display: inline;
    }
     
    #menu a {
    text-decoration: none;
    color: #000;
    background: #fff;
    }
     
    #smenu1, #smenu2, #smenu3, #smenu4 {
    position: absolute;
    left: 0;
    font-size: 0.7em;
    border-top: 1px solid gray;
    width: 400px;
    }
     
     
    .mentions {
    position: absolute;
    bottom : 300px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    }
    a {text-decoration: none;
    color: #222;
    }
     
    -->
    </style>
     
    </head>
     
    <body>
     
    <div id="menu">
     
    <dl>
    <dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
    <dd id="smenu1">
    <ul>
    <li><a href="#">Menu 1.1</a></li>
    <li><a href="#">Menu 1.2</a></li>
    <li><a href="#">Menu 1.3</a></li>
     
    </ul>
    </dd>
    </dl>
     
    <dl> 
    <dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
    <dd id="smenu2">
    <ul>
    <li><a href="#">Menu 2.1</a></li>
     
    <li><a href="#">Menu 2.2</a></li>
    </ul>
    </dd>
    </dl>
     
    <dl> 
    <dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
    <dd id="smenu3">
    <ul>
     
    <li><a href="#">Menu 3.1</a></li>
    <li><a href="#">Menu 3.2</a></li>
    <li><a href="#">Menu 3.3</a></li>
    <li><a href="#">Menu 3.4</a></li>
    <li><a href="#">Menu 3.5</a></li>
    </ul>
     
    </dd>
    </dl>
     
    <dl> 
    <dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
    <dd id="smenu4">
    <ul>
    <li><a href="#">Menu 4.1</a></li>
    <li><a href="#">Menu 4.2</a></li>
     
    <li><a href="#">Menu 4.3</a></li>
    </ul>
    </dd>
    </dl>
     
    </div>
     
     
     
    </body>
    your code was checking for elements up to 10 but you only have 4, that would be generating errors, causing the script to break. the entry to the montre function also could cause errors being that on page load no id is being passed in to the function but is still being passed to document.getElementById. the thing you can do now to make the menus collapse on mouse out is to add
    Code:
     
    onmouseout="montre();"
    to each menu
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Mike for your gorgeous code!

    The only thing, if I do:

    Code:
    onmouseout="montre();"
    I don't have the time to click on the submenus. As soon as I put the pointer out of the word “Menu”, in order to choose one of the submenus, the submenu’s line disappears :-(

    Thanks once again!

  • #4
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    move that to the dl instead of the dt
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #5
    New Coder
    Join Date
    Feb 2008
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again, but I'm afraid it does not work even moving it to the dl..

  • #6
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <head>
    
      <script language="JavaScript">
    
          window.onload=montre;
    
          function montre(id) {
            var d = document.getElementById(id);
            for (var i = 1; i<=2; i++) {
              if (document.getElementById('smenu'+i)) {
                document.getElementById('smenu'+i).style.display='none';
              }
            }
            if (d) {
              d.style.display='block';
            }
          }
    
      </script>
    
      <style type="text/css">
        
        dl, dt, dd, ul {
          margin: 0;
          padding: 0;
          list-style-type: none;
        }
          
        li {
          background-color: #660000;
          line-height: 20px;
          border: 1px solid;
          border-color: #000000;
          text-align: center;
          margin: 1px;
          font-weight: bold;
          background-image: url(images/buttonbg.png);
        }
          
        #menu {
          position: absolute;
          width: 145px;
        }
          
        #menu dt {
          background-color: #660000;
          line-height: 20px;
          border: 3px double;
          border-color: #000000;
          text-align: center;
          margin-bottom: 3px;
          font-weight: bold;
          background-image: url(images/buttonbg.png);
        }
          
        #menu dd {
          position: absolute;
          z-index: 2;
          left: 125px;
          margin-top: -26px;
          width: 150px;
          background-color: #660000;
          border: 1px solid;
          border-color: #000000;
        }
          
        #menu ul {
          padding: 2px;
        }
        
        #menu li {
          text-align: center;
        }
        
        #menu li a, #menu dt a {
          color: #AAAAAA;
          text-decoration: none;
          display: block;
        }
          
        #menu dt a:hover {
          text-decoration: none;
          background-color:#770000;
          background-image:url(images/buttonover.png);
        }
          
        #menu ul a:hover {
          text-decoration: none;
          background-color:#3300FF;
          background-image:url(images/buttonover.png);
        }
      </style>
    		
    </head>
        	
    <body>
    
      <dl id="menu">
        <dt onmouseover="montre('smenu1');" onmouseout="montre();">
          <a href="#">Menu 1</a>
        </dt>
        <dd id="smenu1" onmouseover="montre('smenu1');" onmouseout="montre();"> 
          <ul>
            <li><a href="#">Menu 1.1</a></li>
            <li><a href="#">Menu 1.2</a></li>
            <li><a href="#">Menu 1.3</a></li>
          </ul>
        </dd>
        <dt onmouseover="montre('smenu2');" onmouseout="montre();">
          <a href="#">Menu 2</a>
        </dt>
        <dd id="smenu2" onmouseover="montre('smenu2');" onmouseout="montre();"> 
          <ul>
            <li><a href="#">Menu 2.1</a></li>
            <li><a href="#">Menu 2.2</a></li>
          </ul>
        </dd>
      </dl>
    
    </body>
    This is a little tweek to what you have and it works fine. The only issue I have with it is that when you open the page it asks for permision to use the script/active x control. If you can fix that small hiccup I would very much apreciate it as I really like this menu style.


  •  

    Posting Permissions

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