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, simon_w

Dynamic javascript menu - how to do it?


Go to End
Reply


10 Posts   6133 Views

Avatar
JimAasheim

Community Member, 12 Posts

21 February 2008 at 9:54pm

Hi there,

I'm playing around with SilverStripe to see if I can use it for some future web sites. So far I like it a lot. Thanks for all the great work!

For one question, however, I couldn't find an answer in the forum:
Is there a way to build a menu that shows its children (recursively) when the mouse pointer hovers over it?
An example can be seen at http://www.hardware-software-pilot.de (the site is horrible, I know, but it has the menu as I want it...).
There I used the Tigra Menu.
What I like about it is that it allows the user to navigate more quickly because he can see what is below each menu item when going over it with the mouse pointer.

Any hints?

Avatar
Willr

Forum Moderator, 5513 Posts

21 February 2008 at 10:08pm

Rather then use javascript a much better idea is to use a css based dropdown navigation. We have used it for a few sites like wellingtonorthodontics.co.nz (vertical nav rather then horizontal) . That uses one of the great dropdowns from CSSPlay.co.uk. Heres a menu that would be relatively easy to use for your site - http://www.cssplay.co.uk/menus/flyoutt.html

Avatar
DesignCity

38 Posts

21 February 2008 at 10:24pm

Hi Jim,

two seperate problems here: one is getting from Silverstripe what you need, and the other is getting the style right.

From Silverstripe, you need an unordered list of the site content. You can get this by using control brackets in your template, something like this might work:

<% control Menu(1) %>
<li class="$LinkingMode $FirstLast"><a href="$Link">$MenuTitle</a></li>
<% if Children %><% control Children %>
<li class="$LinkingMode $FirstLast"><a href="$Link">$MenuTitle</a></li>
<% end_control %><% end_of %>
<% end_control %>

See more about creating menu systems in the forums and in the first tutorial (http://doc.silverstripe.com/doku.php?id=tutorial:1-building-a-basic-site#making_a_navigation_system)

Next you want to style that list with CSS and possibly javascript so that it looks like a dropdown menu, similar to the one you showed. There are HEAPS of code chunks around that will let you do that, for example http://www.alistapart.com/articles/dropdowns/ or http://www.htmldog.com/articles/suckerfish/dropdowns/ are both great, but you can easily google 100 more. Please keep in mind that CSS is able to accomplish 99% of dropdown menus, and Javascript should only be used to help older browsers (like IE<6) along where at all possible.

HTH :)

Avatar
JimAasheim

Community Member, 12 Posts

21 February 2008 at 11:41pm

Hi,
Thanx for the fast feedback (both of you) and the emphasis on CSS over Javascript...

@DesignCity:
the thing is: I want the "entire" content - all levels deep not just two or three or four.
I found what you posted in the tutorials, but that's only for a certain amount of levels as I have to write the control block for every level I want in the menu.
Is there a way to do it recursively?
Without real coding I suppose not?

Avatar
Willr

Forum Moderator, 5513 Posts

22 February 2008 at 9:23am

every level I want in the menu.

How many levels do you plan to support? You can do something like

<% control Menu(1) %>
<!-- top children -->
<% control Children %>
<!-- second level of children -->
<% control Children %>
<!-- Third Level -->
<% control Children %>
<!-- Fourth Level -->

and so on and so on till you iterate over all the levels you want. You can also wrap if statements around so you hide the 3rd/4th level if you are not on the second level etc. Multi level Menus can get a little crazy!

Avatar
saimo

Community Member, 67 Posts

22 February 2008 at 9:23am

You are right in that it can't be done without new code, or at least I haven't found a way. For me it causes the memory to get exausted, with a 128M memory limit. The problem here is not with the children code, but with the templating system. for example, this code was what I was trying to get working (Menu2.ss):

<% if LinkOrSection = section %>
   <% if Children %>
      <% include Menu2 %>
   <% end_if %>
<% end_if %>

I think that the teplating engine makes includes before evaluating conditions, which in this case causes infinite recursion.

Avatar
JimAasheim

Community Member, 12 Posts

22 February 2008 at 9:41pm

Edited: 22/02/2008 9:41pm

Well, actually I'd like to have a "menu depth" that reflects the depth in the site tree. With the solutions posted here - which I have tried already and which work fine (I'll post the solution once I'm completely done... IE, my troublesome friend) - I need to code every level in the template.
If I code let's say five levels and my customer adds a sixth level it doesn't appear in the menu. So I'd prefer a recursive solution that simply displays all there is.

Memory issues
I did something like this in my own cms and there wasn't a problem with the memory at all. Maybe it does when you have a deeply nested menu with a couple of 100000 items. I haven't tried that big a number of items, of course.

Avatar
Briohny

Community Member, 199 Posts

16 September 2008 at 10:08pm

"Heres a menu that would be relatively easy to use for your site - http://www.cssplay.co.uk/menus/flyoutt.html"

Hi Willr. You've helped me out before and I was hoping to get some more help! :) I want to use the above flyout menu that you recommended previously in this thread. I have all the CSS working etc but am unsure as to what code i need in the template for the actual flyout bit to work. First level appears perfectly but I can't get the flyout (sub menu) to appear. I've tried various control brackets but with no luck yet.

Your help is much appreciated as always.

Cheers. Briohny.

Go to Top