last day (14 days later) » 

12:07 AM
2
A: How to make JQuery select individual submenus?

SidrielThis happens because $('nav.main-menu#mobile ul ul').toggleClass('open'); is targeting all occurrences of nav.main-menu#mobile ul ul and applying the open class. To solve this issue, you'll have to use this within the event handler. Something similar to as follows... $('.submenu-button').click(f...

 
Hi, I've tried this in my script and it doesn't seem to work, when I click the button nothing happens.
 
The cause could be in one of two places, Javascript, or CSS. I suggest using the Web Inspector to check whether or not the class open is being properly added when the button is clicked. If it is, then the CSS rule which reveals the hidden menu items needs to be reviewed, as the way to select the opened element may have changed. I included a JSFiddle in my answer, reviewing it may offer some answers.
If the site located in your HTML's menu items is correct, I believe the culprit is that nav.main-menu#mobile ul li.current-menu-item a:link has set the color of the menu items to #ffffff causing them to appear missing as the background is also white. For me, at least (On Google Chrome) the menu is properly expanding when clicked.
 
Yes, I noticed this just now – I've managed to get it to work, so thanks very much the code does work :). I think what threw me is the CSS selector: .menu-item-has-children:not(.open) .sub-menu {... is this the same as writing .menu-item-has-children { followed by .menu-item-has-children.open {? Before I was using nav.main-menu#mobile ul ul { and nav.main-menu#mobile ul ul.open {and changing the height to open it, I'm going to try and get this to work now it's not the ulI'm adding the open class to.
 
Yes, your understanding of the :not pseudo-class is spot on. It is selective only when a class does not exist on an element, and allows me to declare a single rule, rather than multiple. As for setting the height, I would recommend setting a max-height of 0 when it is closed and an unreachable size when it is open, this would allow you to utilize a css transition as it is opening, whereas height would not.
 
Sorry for all the questions, I think I'm nearly there – I've got this to work with the max-height rules like you suggested. the only issue is that the parent links are hidden as well, when the submenus are closed. Do you know what part of the CSS could be causing this?
Thanks for taking the time to help me Sidriel
 
12:09 AM
For the optimal solution, I would recommend creating a rule to target .sub-menu alone, and utilize max-height: 0; to hide it. When the parent li has the open class, expand it as such. li.open .sub-menu max-height:1000px;. These two rules combined should give the desired result, to add transition .sub-menu { transition: 0.5s all ease-in-out; }
No problem, sorry for taking it to a chat, there are just rules regarding flooding comments on a question.
.sub-menu { max-height: 0; transition: all 0.5s ease-in-out; } li.open .sub-menu { max-height: 1000px; } might be the final code.
 
Thanks, I'll try that now
 
Looks like you've got it working. Also, if you're interested in an added piece of flare, there is a way to allow the + to transform into a - when the submenu is expanded purely in css, if you're interested.
 
Awesome, that worked perfectly, thank you :)
If I'd have written that, I'd have probably ended up guessing something like `sub-menu.open`rather than `li.open .sub-menu`– What is the benefit of giving the li the open class rather than the sub-menu itself?
and yes, I saw that in the fiddle and took note. I was wondering how to do that a while ago
 
The reason I chose to append the class to the li instead of the .sub-menu element is because of the existence of the css selector + which selects the next element. Using that, we can style the .sub-menu when the list is open by selecting li.open + .sub-menu
So to achieve the + to - we would actually alter the Javascript slightly so that the span contains no text. We then utilize the css property content as such. .sub-menu:after { content:'+'; } li.open + .sub-menu:after { content: '-'; }
 
12:29 AM
Ahh, I see. What would I need to do to my Javascript? I was originally intending on giving the sub-menu button a background image, but hadn't gotten around to it yet, but the after rule will come in useful as I need to do something similar eventually to my main menu icon.
 
Just for reference, you can actually add images using content:url();. The change you would need in your javascript would be to get rid of the + when you are creating the sub-menu button. If you didn't get rid of it, the menu item would look like ++ when closed and +- when open.
 
Ah yeah, that makes perfect sense.
Great, I think I understand all this now. Thanks again for helping me out, I really appreciate it.
 
Again, for reference, if you were to use :before instead of :after it would appear as ++ when open and -+ when closed. They can be used together to perform functions such as wrap text in quotes. ` selector:before { content: '"'; } selector:after { content: '"'; } `
No problem! :P
 
Fantastic, have a great day :)
 
You too, feel free to drop me a line if you need anything else.
 

last day (14 days later) »