paetje Posted April 27, 2006 Share Posted April 27, 2006 I found a script to create a sitemap witch look logical and handy to me. Now I can make the path like I want but when the page is loaded the whole path starts open. It's closeble but I want it to start closed, anyone a suggestion?HTML: <html> <head> <title>Test</title></head> <link rel="stylesheet" type="text/css" href="test.css"> <script language="JavaScript" src="menu.js"></script> <body> <div id="menu"> <ul> <li><a href="1.htm" target="mainFrame">Startpagina</a></li> <li><a href="2.htm" target="mainFrame">Cursussen</a></li> <li><a href="3.htm" target="mainFrame">Links</a></li> <li><a href="" target="mainFrame" onClick="return expandOrCollapse(this);">Artikels</a> <ul class="submenu"> <li><a href="4.1.htm" target="mainFrame">PHP</a></li> <li><a href="4.2.htm" target="mainFrame">HTML</a></li> <li><a href="" target="mainFrame" onClick="return expandOrCollapse(this);">JAVASCRIPT</a></li> <ul> <li><a href="4.1.htm" target="mainFrame">TEST</a></li> </ul> </ul> </li> <li class="last"><a href="5.htm" target="mainFrame">Scripts</a></li> </ul> </div> </body> </html> java script: function expandOrCollapse(menu) { var ul = menu.nextSibling; while(ul.tagName != "UL") // Search for the next UL tag { ul = ul.nextSibling; if ( ul == null ) return true; } if ( ul.style.display == "none" || ul.style.display == "" ) ul.style.display = "block"; else ul.style.display = "none"; return false; } CSS: /* CSS Document */ body { background-color: palegreen; } #menu { width:12em; } #menu ul { list-style:none; margin-left:0pt; } #menu ul.submenu { margin-left:10px; } #menu li a { display:block; padding: 5px 5px 5px 0.5em; border-left: 10px solid darkgreen; border-right: 10px solid darkgreen; background-color: seagreen; color: #fff; text-decoration: none; width:100%; } #menu li a:hover { border-left: 10px solid yellowgreen; border-right: 10px solid yellowgreen; background-color: green; color: #fff; } #menu li { border-top: 1px solid palegreen; } #menu li.last { border-bottom: 1px solid palegreen; } Link to comment Share on other sites More sharing options...
scott100 Posted April 27, 2006 Share Posted April 27, 2006 add this line in test.css #menu ul.submenu { margin-left:10px; display:none; } that will set it not to display on page load. Link to comment Share on other sites More sharing options...
paetje Posted April 27, 2006 Author Share Posted April 27, 2006 I tried this on a couple of places but didn't work , here it does work .So thanx Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now