Mobile Navigation Dropdown

[Jeremy Englert]

Hi Guys,

Currently, I’m working on a mobile navigation. here is what I have so far:
http://jsfiddle.net/JeremyEnglert/9cK3X/2/

As you can see, the parent links are highlighted in blue while the child links are highlighted in grey.

I would like to make it so only the parent links show until a parent link is clicked – in which case the child elements will then show. However, I would like the child elements to show without the page having to reload.

I’m assuming I will have to use some jQuery to make this happen – which I have very little experience with.

Anyone want to get me pointed in the right direction?

[Senff]

Here’s a quick setup: http://jsfiddle.net/senff/9cK3X/3/

[Senff]

When I look at the end of your jQuery library, I see this line:

jQuery.noConflict();

That means you should change $ to jQuery everywhere in your code, but you’ve replaced it with $j — so that’s why it won’t work.

Try this code on your site:

jQuery(‘ul.menu > li > a’).click(function(e) {

jQuery(‘ul.sub-menu’).slideUp(‘normal’);

if(jQuery(this).next(‘ul.sub-menu’).is(‘:hidden’) == true) {
jQuery(this).next(‘ul.sub-menu’).slideDown(‘normal’);
}

e.preventDefault();

[JohnMotylJr]

@JeremyEnglert, you were simply forgetting to include }); at the end of the .click( ) method. Also, when using jsFiddle or CodePen you really do not need to include script tags. There is a little button at the very top (JSLINT) which will tell you any/all errors. You were able to get away with == rather then using ===. jsFiddle will always catch on that.

Forked Copy: http://jsfiddle.net/john_motyl/LGCXV/

[Senff]

On jsfiddle, there is no noConflict mode so you’ll have to keep using $ there.

[JohnMotylJr]

@JeremyEnglert

Try this, re-wrote in CodePen so we wouldn’t have unknown mysterious characters floating around in your code from jsFiddle

Promise you this works

[Senff]

For some reason, the script is not being executed. Try wrapping it in a document.ready AND move it as low as you can in the markup (try it right before the </body> tag).

jQuery(document).ready(function() {
jQuery(‘ul.menu > li > a’).click(function(e) {

jQuery(‘ul.sub-menu’).slideUp(‘normal’);

if(jQuery(this).next(‘ul.sub-menu’).is(‘:hidden’) == true) {
jQuery(this).next(‘ul.sub-menu’).slideDown(‘normal’);
}

e.preventDefault();
});

[JohnMotylJr]

@JeremyEnglert,

@Senff, is correct. You need to ecapsolate that bit of code in some type of anonymous function.

---

$(function() {

//.. Your code goes here...

})

or

$(document).ready(function() {

//.. Your code goes here...

})

[JohnMotylJr]

@JeremyEnglert : FYI, not sure if this is on purpose, but when hovering over results and contact on your main nav, there is no color but you still have drop downs..

[soriamatt]

Hey all –

Thanks for posting this I’m using it for my mobile nav and it’s working great – the only thing I need help with is making sub-menus able to function – currently if I create a submenu and give it the same class as the parent list item (.menu) it re-collapses the entire menu when you click on it. I’m not very experienced with jquery, otherwise I would think it’s not that hard to do.

Any help appreciated!

[Author]

Posts