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

superfish navigation


Go to End
Reply


10 Posts   4273 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, 146 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, 146 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