Solved

integrating superfish into wordpress 3.0 using the new naive menus

Posted on 2010-09-01
15
952 Views
Last Modified: 2012-05-10
Greetings Experts!

I am trying to use Superfish to generate a dynamic dropline menu which in turn is generated by WP 3.0 new native menus.  I got the thing to work with the old list_pages method and got it to work if dropmenu is not required but the combo of needing to support both is doing me in.

Here's my project work sheet page: http://69.175.35.82/~southbro/wp-content/themes/sbpc/menutest.html  It's got a demo of my progress so far, a link to a site with a functioning example site of the desired behavior, etc.

Key Issues:
- Keeping the second level open with current page and siblings displayed
- highlighting decedents and ancestors of the current page  

Thanks in advance.
0
Comment
Question by:teenaw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
15 Comments
 
LVL 13

Expert Comment

by:darren-w-
ID: 33584308
Hi,

Assuming that you want the menu to look like the one in the first link, why don't you first start by taking the code from the working example and substitute in your links?

Darren

0
 

Author Comment

by:teenaw
ID: 33586143
It needs to look like the one in the example but wor with a UL generated dynamically from WP3's new native menu system.  The challenge is to adapt the css without  changing the UL.
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 33586574
You could  move the html  around to be in the correct format using jquery , and perhaps strip out /replace the id's and classes and use the css that's on the superfish example, haven't got time to give examples at the moment sorry.
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

Author Comment

by:teenaw
ID: 33590512
Thanks Darren, I'll give it a try.  Likely you have given me enough to start with.  
0
 

Author Comment

by:teenaw
ID: 33593965
More Info:  Getting really close...  Still having trouble figuring out how to make the second level items visible by default when you are on one of the pages in that section.  Also that level is sliding off a little.

Page in progress is at: http://69.175.35.82/~southbro/?page_id=295

Really appreciate any feedback....
0
 
LVL 13

Accepted Solution

by:
darren-w- earned 500 total points
ID: 33594381
It looks like  sub-menu is getting reset to hidden when the specified section is selected and then rolled off, but when the the category it is in is selected it stays static.

change the line here:

$("ul.sf-menu").superfish({
         pathClass:  'current-menu-item',
         pathClass: 'current-menu-ancestor'   <<< add this line
     });
0
 

Author Comment

by:teenaw
ID: 33596334
Added, no change.  
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 33596615
you have missed out the comma on the first line thats causing a syntax error
0
 

Author Comment

by:teenaw
ID: 33596930
Oddly, when I put that in the menus second level items would show up on mouseover but hide when you moved the courser down to try to click on one.  When I removed the item, the second level items go back to staying visible if you are on a first level page with subs as desired.  Remaining issue is that the second level menu items of the parent group do not appear if you are on a second or third level page.
0
 

Author Comment

by:teenaw
ID: 33597150
Whoops, put the comma in.  The behavior is the same.  With this line in, the second level items are not visible by default, show up on mouseover but hide when you moved the courser down to try to click on one.  
0
 

Author Comment

by:teenaw
ID: 33597218
I left the this in place for the moment: $("ul.sf-menu").superfish({
         pathClass:  'current-menu-item',
         pathClass: 'current-menu-ancestor'  
     });

These appear to be path vars,
          current_page_item
          current-page-parent
          current-page-ancestor
          current-menu-parent
          current-menu-ancestor

I tried several combinations...  Can I use a wildcard?  

$("ul.sf-menu").superfish({
         pathClass:  'current-menu-*',  
     });
0
 

Author Comment

by:teenaw
ID: 33597257
Tried the wildcard, it did not work, but when I put your solution back in, it worked!  Thanks for your help and for being sooooo  patient.
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 33598553
Have a nice weekend
0
 

Author Comment

by:teenaw
ID: 33598633
Actually, it isn't wuite solved.  Now if you are on a first level page, it does not show children. It does work correctly if you are on a second or third level page.  I still think you supplied the solution, likely I need at add a current-menu-parent  to the pathClass.
0
 

Expert Comment

by:maurohead
ID: 37621858
<script type="text/javascript">

$('document').ready(function(){
  $('ul.sf-menu, ul.sub-menu')
  .find('ul.sub-menu, li.current_page_item,li.current_page_parent,li.current_page_ancestor,li.current-menu-item,li.current_category_item, li.current-menu-ancestor ')
    .addClass('current')
    .end()
  .superfish({
    pathClass : 'current'
  });
});
</script>
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will learn how to dynamically set the form action using jQuery.

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question