Forums

  • # 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 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 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 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 20, 2012 at 1:46 am

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

    # January 20, 2013 at 11:23 pm

    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!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag