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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

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

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo

Dynamic javascript menu - how to do it?


Go to End


10 Posts   7857 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