17488 Posts in 4473 Topics by 1978 members
| Go to End | ||
| Author | Topic: | 5555 Views |
-
Re: Dynamic javascript menu - how to do it?
21 September 2008 at 3:17am Last edited: 9 October 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!
JimIt 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 %>
>
<% end_if %>
</a><!--[if lte IE 6]>
<a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
>
<% 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 %>
>
<% end_if %>
</a><!--[if lte IE 6]>
<a class="sub" href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
>
<% 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 %>
>
<% end_if %>
</a><!--[if lte IE 6]>
<a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
>
<% 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 %>
>
<% end_if %>
</a>
<!--[if lte IE 6]>
<a href="$Link" title="Gehe zu $MenuTitle">$MenuTitle
<% if Children %>
>
<% 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> -
Re: Dynamic javascript menu - how to do it?
8 October 2008 at 7:15am Last edited: 8 October 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
| 5555 Views | ||
| Go to Top |
