Jump to:

23472 Posts in 18941 Topics by 2878 members

General Questions

SilverStripe Forums » General Questions » superfish navigation

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1 2
Go to End
Author Topic: 3924 Views
  • mhull
    Avatar
    Community Member
    79 Posts

    superfish navigation Link to this post

    I wonder if anyone may be able to help me. I am trying to use Superfish navigation - nav bar style to create a horizontal nav-bar with a horizontal second tier
    http://users.tpg.com.au/j_birch/plugins/superfish/#examples

    So far I have it in place, using this code in page

    <ul id="topmenu" class="sf-menu sf-navbar">
       <% control Menu(1) %>

    <li class="$LinkingMode"><a href="$Link" title="$Title">$MenuTitle</a>
                    <ul>
    <% control Children %>
    <li class="$LinkingMode"><a href="$Link" title="$Title">$MenuTitle</a></li>
                <% end_control %>
                </ul></li>
             

    <% end_control %>
       </ul>      

    However when the child page is a selected page, it disappears.
    I see it is being used on this site: http://aucklandringcompany.co.nz/ built by NickJacobs but I cant work out how.
    It seems to be something to do with Highlighting the current page and the section class.

    Can anyone help?

  • raamklaza
    Avatar
    Community Member
    182 Posts

    Re: superfish navigation Link to this post

    If you find the solution for this could you drop the code in here?

  • NickJacobs
    Avatar
    Community Member
    144 Posts

    Re: superfish navigation Link to this post

    Hi, this is how I have set it up:

    In Page.php

    Requirements::javascript('js/superfish.js');
    Requirements::css('css/superfish.css');
    Requirements::css('css/superfish-navbar.css');
          

    Navigation.ss

    <ul id="topmenu" class="sf-menu sf-navbar">

    <% control Menu(1) %>

    <li <% if LinkOrSection = section %>class="current"<% end_if %>><a href="$Link" >$MenuTitle</a>
    <% if Children %>
    <ul>
    <% control Children %>
    <li class="$LinkingMode"><a href="$Link" >$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    </li>

    <% end_control %>

    </ul>

    in Page.ss

    $(document).ready(function(){
          
       

    $("ul.sf-menu").superfish({
    pathClass: 'current',
          autoArrows: false,
          dropShadows: false ,
          pathLevels: 3

    });
    }
          

    Pretty sure that's it (it was a while ago)....If it still doesn't work let me know.

  • mhull
    Avatar
    Community Member
    79 Posts

    Re: superfish navigation Link to this post

    Amazing! Many thanks for your help. It all seems to be working with a little tweaking. I am also using hoverIntent which solved the problem of the page width change on dropdown, and is a nice fade effect.

  • mhull
    Avatar
    Community Member
    79 Posts

    Re: superfish navigation Link to this post

    One more question, how would I hide the children of some pages on the navigation?
    I have tried

       <ul id="topmenu" class="sf-menu sf-navbar">
    <% control Menu(1) %>

    <li <% if LinkOrSection = section %>class="current"<% end_if %>><a href="$Link" >$MenuTitle</a>
    <% if Children %>
    <ul>
    <% control Children %>
    <li class="$LinkingMode"><a href="$Link" >$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    </li>

    <% else %>
    <<% if Title = What's New %>
    <% end_if %>
    <% end_control %>
    </ul>


    But I can't seem to get it to work? Any ideas?

  • NickJacobs
    Avatar
    Community Member
    144 Posts

    Re: superfish navigation Link to this post

    looks like you've missed the start of your if statement from that post.....

    .... but i see what your trying to do. I would tend to use URLSegment..that title you've got in there isn't going to work, so something like:

    <% control Children %>

    <% if URLSegment != what-s-new %>

    <li class="$LinkingMode"><a href="$Link" >$MenuTitle</a></li>

    <% end_if %>

    <% end_control %>

    note that the URLSegment for What's New would be what-s-new

  • mhull
    Avatar
    Community Member
    79 Posts

    Re: superfish navigation Link to this post

    Okay, So it is now applying, but applying to all the children not just whats new. What is it I am doing wrong?

       <ul id="topmenu" class="sf-menu sf-navbar">
    <% control Menu(1) %>

    <li <% if LinkOrSection = section %>class="current"<% end_if %>><a href="$Link" >$MenuTitle</a>
    <% if Children %>
    <ul>
    <% control Children %>
    <% if URLSegment != what-s-new %>
    <li></li>
    <% end_if %>
    <% else %>
    <li class="$LinkingMode"><a href="$Link" >$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    </li>
    <% end_control %>

    </ul>

  • mhull
    Avatar
    Community Member
    79 Posts

    Re: superfish navigation Link to this post

    Right, The closest I have managed to get is to show everytime I am on the section - whats new all the children show nothing. However this is applying across the whole navigation and not just the children of Whats new. How do I make just the children of Whats new not appear?

    What I have so far:

       <ul id="topmenu" class="sf-menu sf-navbar">
    <% control Menu(1) %>

    <li <% if LinkOrSection = section %>class="current"<% end_if %>><a href="$Link" >$MenuTitle</a>

    <% if InSection(what-s-new) %>
    <ul>
    <% control Children %>
    <li class="$LinkingMode"><a href="$Link" >blank</a></li>
    <% end_control %>
    </ul>
    <% else %>

    <ul>
    <% control Children %>
    <li class="$LinkingMode"><a href="$Link" >$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    </li>

    <% end_control %>

    </ul>

    Any help anyone can give me would be much appreciated, I am out of ideas.

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