[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

integrating superfish into wordpress 3.0 using the new naive menus

Posted on 2010-09-01
15
Medium Priority
?
956 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

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.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

649 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