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 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2005
    Posts
    89
    Thanks
    2
    Thanked 0 Times in 0 Posts

    help need with expandable menu

    Hello all,

    I am trying to create a vertical expandable menu. The sample below works; ( you can see a sample from here), and you will see that when you click on a link, it produces a second set of links.

    From these second links I am trying to produce a third set of links, like a third menu. I have looked everywhere across the web and can't seem to find one. I tried to alter the code a few times but my javascript is not great. I have tried to duplicate the "show" function, rename it and tried to activate it with a new set of links (or my 3rd menu)

    Anyone have any suggestions - my code is pretty basic;

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    
    <style type="text/css" media="screen">
    <!-- 
    body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    position: absolute; /* Menu position that can be changed at will */
    top: 0;
    left: 0;
    }
    #menu {
    width: 15em;
    }
    #menu dt {
    cursor: pointer;
    margin: 2px 0;;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    border: 1px solid gray;
    background: #ccc;
    }
    #menu dd {
    border: 1px solid gray;
    }
    #menu li {
    text-align: center;
    background: #fff;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    border: 0 none;
    height: 100%;
    }
    #menu li a:hover, #menu dt a:hover {
    background: #eee;
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    window.onload=show;
    function show(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>
    
    
    </head>
    
    <body>
    
    
    <dl id="menu">
    
    		<dt onclick="javascript:show();"><a href="#">Menu 1</a></dt>
    			
    		<dt onclick="javascript:show('smenu2');">Menu 2</dt>
    			<dd id="smenu2">
    				<ul>
    					<li><a href="#">sub-menu 2.1</a></li>
    					<li><a href="#">sub-menu 2.2</a></li>
    					<li><a href="#">sub-menu 2.3</a></li>
    				</ul>
    			</dd>	
    
    		<dt onclick="javascript:show('smenu3');">Menu 3</dt>
    			<dd id="smenu3">
    				<ul>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    					<li><a href="#">sub-menu 3.1</a></li>
    				</ul>
    			</dd>
    
    		<dt onclick="javascript:show('smenu4');">Menu 4</dt>
    			<dd id="smenu4">
    				<ul>
    					<li><a href="#">sub-menu 4.1</a></li>
    					<li><a href="#">sub-menu 4.1</a></li>
    				</ul>
    			</dd>
    	
    </dl>
    
    </body>
    </html>
    Thanks for reading,

    John
    Last edited by fogofogo; 05-09-2006 at 03:41 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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