Jump to content

Sitemap collapse


paetje
 Share

Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...