Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Dynamic javascript menu - how to do it?

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

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

Page: 1 2
Go to End
Author Topic: 5914 Views
  • JimAasheim
    Avatar
    Community Member
    12 Posts

    Dynamic javascript menu - how to do it? Link to this post

    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?

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Dynamic javascript menu - how to do it? Link to this post

    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

  • DesignCity
    Avatar
    38 Posts

    Re: Dynamic javascript menu - how to do it? Link to this post

    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

  • JimAasheim
    Avatar
    Community Member
    12 Posts

    Re: Dynamic javascript menu - how to do it? Link to this post

    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?

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Dynamic javascript menu - how to do it? Link to this post

    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!

  • saimo
    Avatar
    Community Member
    67 Posts

    Re: Dynamic javascript menu - how to do it? Link to this post

    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.

  • JimAasheim
    Avatar
    Community Member
    12 Posts

    Re: Dynamic javascript menu - how to do it? Link to this post

    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.

  • Briohny
    Avatar
    Community Member
    199 Posts

    Re: Dynamic javascript menu - how to do it? Link to this post

    "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.

    5914 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.