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.

General Questions /

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

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

superfish navigation


Go to End


10 Posts   5726 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, 148 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, 148 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