Grow your CSS skills. Land your dream job.

Mobile Navigation Dropdown

  • # November 16, 2012 at 3:06 pm

    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?

    # November 16, 2012 at 3:39 pm

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

    # November 16, 2012 at 4:46 pm

    @Senff, you are awesome! That’s exactly what I needed, but I’m having some issues getting it to work with WordPress (not sure if you have experience with this or not).

    I placed the JavaScript part from this jsFiddle into my Head:
    http://jsfiddle.net/9cK3X/5/

    I changed $ to $j to load jQuery in no-conflict mode, but I still can’t seem to get it working correctly.

    Here is the website (pull your browser small for this nav):

    http://www.mcfaddengavender.net/newmg/

    # November 16, 2012 at 5:04 pm

    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();

    # November 16, 2012 at 5:48 pm

    Hmmm. Still no luck. Here is the code I’m using:
    http://jsfiddle.net/9cK3X/6/

    This has me baffled.

    # November 16, 2012 at 6:37 pm

    @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/

    # November 16, 2012 at 6:38 pm

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

    # November 16, 2012 at 8:43 pm

    First off, thanks guys! You’ve been a big help. I think we’re getting close, but something is still causing it not to work.

    @JohnMotylJr I added the }); and even tried copying and pasting your code directly into the HEAD. No luck. You can see the website here:
    http://www.mcfaddengavender.net/newmg/ (just pull the browser small)

    I was using the

    # November 16, 2012 at 8:59 pm

    @JohnMotylJr Your forked copy doesn’t seem to work in jsfiddle, even when I changed jQuery to $ – but I can’t seem to figure out why.

    # November 16, 2012 at 10:12 pm

    @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

    # November 16, 2012 at 10:22 pm

    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();
    });

    # November 16, 2012 at 10:30 pm

    @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...
    })
    # November 17, 2012 at 6:22 pm

    Thanks again guys.

    I wrapped the code with the function and tried it in both the HEAD and right before and still had no luck. I’m thinking there is something causing a conflict or that jQuery isn’t set up right in general.

    Here is everything from my HEAD, including the jQuery included from @JohnMotylJr‘s CodePen:

    http://codepen.io/anon/pen/Fbcas

    # November 17, 2012 at 9:58 pm

    Turns out the problem is somewhere with how WordPress is calling the jQuery script. I was using the recommended way for WP, but when I tried the standard way of calling the script everything worked great. I’m going to need to track down this issue, but that’s best left for another thread.

    However, with this partiucular nav, is it possible to make it so if a person clicks the parent link twice, it takes them to that page? For example, the “Results” page does not have any children and doesn’t seem to have a functioning link at the moment.

    Thanks again guys and sorry to make you attempt to fix an issue that was clearly my fault.

    # November 19, 2012 at 1:28 pm

    @JohnMotylJr and @Senff, finally got this working!

    Now my next question, is it possible to make it so the jQuery only affects the mobile navigation? Currently it is also being applied to the main navigation which is causing some issues. I tried this, but had no luck:

    $(function() {
    $('#main-nav_responsive > ul.menu > li > a').click(function(e) {
    $('#main-nav_responsive > ul.sub-menu').slideUp('normal');
    if($(this).next('#main-nav_responsive > ul.sub-menu').is(':hidden') === true) {
    $(this).next('#main-nav_responsive > ul.sub-menu').slideDown('normal');
    }
    e.preventDefault();
    });
    });

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".