Solved

integrating superfish into wordpress 3.0 using the new naive menus

Posted on 2010-09-01
15
948 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
  • 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
 

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now