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.

General Questions /

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

superfish navigation


Go to End
Reply


10 Posts   4071 Views

Avatar
mhull

Community Member, 79 Posts

4 July 2009 at 1:41am

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?

Avatar
raamklaza

Community Member, 182 Posts

4 July 2009 at 2:52am

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

Avatar
NickJacobs

Community Member, 144 Posts

4 July 2009 at 11:19am

Edited: 04/07/2009 11:23am

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.

Avatar
mhull

Community Member, 79 Posts

4 July 2009 at 9:06pm

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.

Avatar
mhull

Community Member, 79 Posts

5 July 2009 at 7:43am

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?

Avatar
NickJacobs

Community Member, 144 Posts

5 July 2009 at 1:40pm

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

Avatar
mhull

Community Member, 79 Posts

5 July 2009 at 10:03pm

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>

Avatar
mhull

Community Member, 79 Posts

6 July 2009 at 9:09pm

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.

Go to Top