Suggestions needed for multi level vertical menu...

[sing2trees]

Hi all,

I currently have the vertical menu used here:
http://www.dynamicdrive.com/dynamici...ordionmenu.htm

But the fancy slide open / closed runs very slow on our intranet and therefore am looking for suggestions for something else which still looks good but maybe runs a bit quicker.

I do need it to be multi level:

ie.
Item One
- Sub Item One
- Sub Item Two
- Sub 2 / 1
- Sub 2 / 2
Item Two
- Sub Item One

etc etc

Am looking for a free script - does anyone have any suggestions or recommendations?

Many thanks

[aso186]

Do you need the animation? It's quite easy to write a similar script without the animation and it'll run a whole lot quicker

[sing2trees]

Nope - the animation isn't needed. Just need it to expand / collapse upon clicking!

[aso186]

In which case, have you got a link to your page or could you post the HTML code for your menu? I should be able to write up a quick script for it

[sing2trees]

Hi,

I haven't as yet built the menu. Do you want me to create the menu in list format?

Sorry - am still farily new to this...!

Thanks for your help by the way!

[aso186]

If you could build the menu, then it's easier to build a script round it (and make changes if needed )


Yeah, just use an unordered <ul> list!

[sing2trees]

Thanks again for your help so far. The code is as follows...

HTML: Select all

 <a href="#">Training<p></a>
<li><a href="#">Training Day One</a></li>
<ul>
<li><a href="#">Document One</a></li>
<li><a href="#">Document Two</a></li>
<li><a href="#">Document Three</a></li>
<li><a href="#">Document Four</a></li>
</ul>
<li><a href="#">Training Day Two</a></li>
<ul>
<li><a href="#">Document One</a></li>
<li><a href="#">Document Two</a></li>
<li><a href="#">Document Three</a></li>
</ul>
<li><a href="#">Training Day Three</a></li>
<ul>
<li><a href="#">Document One</a></li>
<li><a href="#">Document Two</a></li>
<li><a href="#">Document Three</a></li>
<li><a href="#">Document Four</a></li>
<li><a href="#">Document Five</a></li>
<li><a href="#">Document Six</a></li>
</ul>
<a href="#">Forms<p></a>
<li><a href="#">Refund</a></li>
<li><a href="#">Suggestion</a></li>
<li><a href="#">Complaint</a></li>
<li><a href="#">Holiday</a></li>
<p>
<a href="#">Useful Info<p></a>
<li><a href="#">Contact Numbers</a></li>
<li><a href="#">Escalations</a></li>
<li><a href="#">Emails</a></li>
<li><a href="#">Regulations</a></li>
<p>
<a href="#">Scripts<p></a>
<li><a href="#">Call Script 1</a></li>
<li><a href="#">Call Script 2</a></li>
<li><a href="#">Call Script 3</a></li>
<li><a href="#">Call Script 4</a></li>
<li><a href="#">Call Script 5</a></li>
<li><a href="#">Call Script 6</a></li>
<li><a href="#">Call Script 7</a></li>
<li><a href="#">Call Script 8</a></li>
<li><a href="#">Call Script 9</a></li>
<li><a href="#">Call Script 10</a></li>

[aso186]

Your code is slightly off (we'll get to that later), so let me just check that you want:

Training -> Training Day X -> Documents

Forms -> Refund, Suggestion etc.

Useful Info -> Contact numbers, escalations etc.

Scripts -> Script 1, Script 2 etc.

I know that's not *exactly* what you want, it's just to confirm which are links, sub-links and sub-sub-links!

[aso186]

Ok, here's something to try out

The run-down of the attached script;

1. Look for a <ul> with ID list
2. Search for any nested lists and add class hidden
3. Search for any links within list
4. If the next element (sibling) of a link is a <ul>, assign an onclick function

When a link that has been assigned the onclick function is clicked, this the process;

1. Find the sibling list
2. Remove class hidden
3. Alter the onclick function to reverse the process next time the link is clicked

Let me know how you get on!

Tested on Windows: IE6, IE7, FF2 & Opera 9

(zip contains list.htm and expanding-menu.js)

[sing2trees]

wow - that is fantastic! Many many thanks for that.

One final question.....! Is there anyway that the expanded items (such as training day one etc) and the sub items (document one etc) can be in line with the first list?

ie (when expanded)
Training
Training Day One
Document One
Document Two
Document Three
Document Four
Training Day Two

etc

instead of the large margin on the left that the lists create?

Thanks again!

[aso186]

All you need to do is use a spot of CSS

Something like;

Code: Select all

#list li ul {
margin: 0;
padding: 0
}

This basically means any <ul> inside an <li> within #list has zero padding and margin