Ask your WordPress questions! Pay money and get answers fast! (more info)

Need OnClick solution for Wordpress Custom Menue

  • SOLVED

Hi,

I'm looking for a OnClick solution for an Wordpress Custom Menue.

Something like this: [[LINK href="http://jsfiddle.net/snoffoz/4rZa9/1/"]]http://jsfiddle.net/snoffoz/4rZa9/1/[[/LINK]]

Problem:
The parent (Menu 1 and Menu 2 in example) are links. When I click on a link I would like to come to the parent page you click. On parent page child pages for that page should be visible until you click on another parent or dubbel click on the current parent. The child menu should also stay open if you click on a child in that ul.


This is the site: [[LINK href="http://wptemp.site90.net/"]]http://wptemp.site90.net/[[/LINK]]
Right now Im using:

li.current_page_item ul.sub-menu { display: block; visibility: visible; !important}

To make the menue stay open. But this does not work for "Projecten" since that menue section is an added feature so Wordpress doesn't generate a li.current_page_item for that ul.


If anything is unclear let me know and I'll try to provide you with some more information.

Answers (3)

2012-06-27

Hai Bui answers:

Instead of .current_page_item, you can use .current-menu-item so it works for "Projecten"

anything else you need to solve?


snoffoz comments:

Hi Hai Bui,

But the child categories would still disappear once I click on them right? Like it does now on "Bureau"?
I would like for them to stay.


Hai Bui comments:

ok, then add .current-menu-parent:
li.current_page_item ul.sub-menu, li.current-menu-parent ul.sub-menu { display: block; visibility: visible; !important}


snoffoz comments:

Hi Hai Bui,

Just tried your solution but doesn't work on "Projecten", have a look.

http://wptemp.site90.net/


Hai Bui comments:

I'm sorry, my typo, it should be
li.current_menu_item ul.sub-menu, li.current-menu-parent ul.sub-menu { display: block; visibility: visible; !important}


snoffoz comments:

Still no dice


Hai Bui comments:

Really sorry, too many typos today... here's the correct one:
li.current-menu-item ul.sub-menu, li.current-menu-parent ul.sub-menu { display: block; visibility: visible; !important}


snoffoz comments:

Almost,

If I click on one of the image thumbnails under the tap "Projecten" the list of child pages disappears.


Hai Bui comments:

It doesn't disappear for me. I click "Woningen 6" and the list of child pages is still visible


snoffoz comments:

I tried both Chrome and Safari and they disappears in both of them as soon as I click on a thumbnail images (Woningen 6, fo instance).

2012-06-27

Ross Wilson answers:

Agree with Hai above, if you want to do this in jquery

jQuery('.current-menu-item.parent').find('.sub-menu').css('visibility', 'visible')


snoffoz comments:

Hi Ross Wilson,

jQuery would be fine too. And would work better in IE right?


Ross Wilson comments:

You can add both of these lines to your code (below your click handlers) to handle keeping the menu open when a sub item is clicked and keeping the project menu open. Try them out and let me know if it needs any tweaks

$('.current-menu-item').parent('.sub-menu').css('visibility', 'visible');
$('.current-menu-item.parent').find('.sub-menu').css('visibility', 'visible');


snoffoz comments:

Hi Ross Wilson,

The code almost works!

But when I go to:

"Projecten > Woningen 6" the list of child pages goes away.

Maybe this was unclear.
If I click on one of the image thumbnails under the tap "Projecten" the list of child pages disappears.

Why is that?
(im trying this out on localhost)


Ross Wilson comments:

Try updating the code to this


$('.current-menu-item').parent('.sub-menu').css('visibility', 'visible');
$('.current-menu-item.parent, .current-portfolio-ancestor').find('.sub-menu').css('visibility', 'visible');


snoffoz comments:

That did it!

Only a few questions.

Would it be possible to close the child pages with a duble click on the parent (Projecten, Bureau)?

And if I want to highlight the current page im on so it shows in read in the menu how would i do this?


Ross Wilson comments:

This will get the current page to show as red (in your css file):

ul.sub-menu li.current-portfolio-parent a {
color: red;
}
ul.sub-menu li.current_page_item a {
color: red;
}


For the double click you might run into problems, because a single click will be detected first, and that single click takes you to a new page. I can write a function to handle the doubleclick, but you would probably have to disable the single click functionality for it to be consistent


snoffoz comments:

Almost there!

I still can't get any highlight when Im clicking on a child category under "Projecten".
Se here: http://wptemp.site90.net/works/maatschappelijk/ (the page is online here)

Is it possible to make a single click to show and hide the child categories?

Or if I keep it the way it is i could just remove $('.jsddm > li').bind('dblclick', jsddm_timer); ?


Ross Wilson comments:

Add this also to your css

ul.sub-menu li.current-menu-item a {
color: red;
}


Ross Wilson comments:

For handling the collapse of the menu do the following:

add this line after the click handlers:

$('li.current-menu-ancestor>a, li.current-menu-item.parent>a').attr('href','');


change the following function to look like this:
function jsddm_open() {
jsddm_canceltimer();
var close = $(this).find('ul').css('visibility') == 'visible';
ddmenuitem = $(this).find('ul').css('visibility', 'visible').parent().addClass('jsddm_hover').end();
if(close)
jsddm_close();
return false;
}


snoffoz comments:

The CSS works fine now but the menu doesn't. Can't click the links and one parents child categories doesn't go away if you click on another parents menu point.


Ross Wilson comments:

Change this function


function jsddm_open() {
if ($(this).is('.current-menu-ancestor, .current-menu-item.parent')){
jsddm_canceltimer();
var close = $(this).find('ul').css('visibility') == 'visible';
ddmenuitem = $(this).find('ul').css('visibility', 'visible').parent().addClass('jsddm_hover').end();
if (close)
jsddm_close();
return false;
}
}


snoffoz comments:

Better, but no dice.
Have a look [[LINK href="http://wptemp.site90.net/works/projecten/"]]http://wptemp.site90.net/works/projecten/[[/LINK]]


Ross Wilson comments:

There is an extra } above function jsddm_close() {


snoffoz comments:

Can't seem to get it to work. Maybe I did something wrong?
[[LINK href="http://wptemp.site90.net/"]]http://wptemp.site90.net/[[/LINK]]


Ross Wilson comments:

If you can send your ftp info to [email protected] I can get it fixed


Ross Wilson comments:

I think we are looking good now, do you agree snoffoz?

2012-06-27

Gabriel Reguly answers:

Hi snoffoz,

Looks like you got an extra '});' at script.js (line 63, col 5)

Regards,
Gabriel


Gabriel Reguly comments:

Hi snoffoz,

Ross is offering to help directly in your site, that seems very good.

Regards,
Gabriel