Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo

Dynamic javascript menu - how to do it?


Go to End
Reply


10 Posts   6584 Views

Avatar
JimAasheim

Community Member, 12 Posts

21 September 2008 at 3:17am

Edited: 09/10/2008 6:41am

Hi,

Here comes the code I had promised...

In the code below you find five levels of depth. Menus with deeper levels need to extend this implementation - but you might also want to take a moment to think about the question whether you really need 6 or more levels...
The CSS stylesheets attached will make the flyout menu work on both IE and non-IE browsers.

Good luck!
Jim

It seems I forgot to attach the code...
Here it is:

<ul id="Menu1">
<% control Menu(1) %>

<li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
<a class="hide" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
&nbsp;&nbsp;&gt;
<% end_if %>
</a>

<!--[if lte IE 6]>
<a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
&nbsp;&nbsp;&gt;
<% end_if %>
<table><tr><td>
<![endif]-->

<% if Children %>
<!-- second level menu -->
<ul class="menu2">
<% control Children %>
<li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
<a class="hide" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
&gt;
<% end_if %>
</a>

<!--[if lte IE 6]>
<a class="sub" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
&gt;
<% end_if %>
<table><tr><td>
<![endif]-->

<% if Children %>
<!-- third level menu -->
<ul class="menu3">
<% control Children %>
<li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
<a class="hide" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
&gt;
<% end_if %>
</a>

<!--[if lte IE 6]>
<a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
&gt;
<% end_if %>
<table><tr><td>
<![endif]-->

<% if Children %>
<!-- 4th level menu -->
<ul class="menu4">
<% control Children %>
<li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
<a class="hide" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
&gt;
<% end_if %>
</a>
<!--[if lte IE 6]>
<a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
&gt;
<% end_if %>
<table><tr><td>
<![endif]-->

<% if Children %>
<!-- 5th level menu -->
<ul class="menu5">
<% control Children %>
<li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
<a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle</a>
</li>
<% end_control %>
</ul>
<% end_if %>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
<% end_control %>
</ul>
<% end_if %>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<% end_control %>
</ul>
<% end_if %>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<% end_control %>
</ul>
<% end_if %>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<% end_control %>
</ul>

Avatar
codepotato

Community Member, 14 Posts

8 October 2008 at 7:15am

Edited: 08/10/2008 7:39am

Hi,

I'm fairly new to SS, and have built about 2 - 3 sites using this as the monster machine behind it.

I recently came over an issue with trying to create a vertical navigation, and found this thread, but was dissapointed when the code listed above didn't work for me.

With a bit of jiggery pokery, i managed to craft a version, and have posted the code below for everyone else to use.

<ul id="Menu1">
<% control Menu(1) %>
<li><a href="$Link">$MenuTitle</a></li>
<% if Children %>
<% control Children %>
<ul id="Menu2">
<li class="$LinkingMode $FirstLast"><a href="$Link">$MenuTitle</a></li>
</ul>
<% end_control %>
<% end_if %>
<% end_control %>
</ul>

Hope that helps for those of you that have struggled.

Gareth

Go to Top