Solved

integrating superfish into wordpress 3.0 using the new naive menus

Posted on 2010-09-01
15
947 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

758 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

20 Experts available now in Live!

Get 1:1 Help Now