Displaying subitems in responsive JQuery/CSS menu

Question

I'm sorry if I'm duplicating a question... promise I've looked everywhere for an answer to this.

I'm looking to add a submenu into a responsive menu. I'm struggling with finding a way to display the subitems together with the main items in a responsive way.

So here's my code snippets... the CSS is still a little rough, I'm working on that as soon as I can display all my menu items with just one slideTooggle();

I should mention I am working on this in Joomla... but I've checked my module configuration and the template and I'm pretty sure the problem is not there. But maybe you have a suggestion?

Ok, here's my code snippets. Thanks in advance! :)

 $(function() { var pull = $('#pull'); menu = $('nav ul'); menuHeight = menu.height(); $(pull).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); if(w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); 

 <nav id="menu" class="clearfix"> <ul class="clearfix"> <li><a class="current first-item" href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> <ul> <li><a href="#">Subitem 3.1</a></li> <li><a href="#">Subitem 3.2</a></li> <li><a href="#">Subitem 3.3</a></li> </ul> <li><a href="#">Item4</a></li> </ul> <a href="#" id="pull">Menu</a> </nav> 

And this is the CSS I have at the moment for small screens:

 nav { height: auto ; right: 15px; top: 0px; letter-spacing: 0;margin:0;position: relative;z-index: 10; margin: 0 4px 0 30px;} nav ul { width: 100%; display: block; height: auto;} nav li{ width: 50%; float: left; position: relative; z-index:10;} nav ul li a {display: block; padding: 25px 20px;color: #8c1b23; text-decoration: none;} nav li a { border-bottom: 1px solid #cccccc;} nav a { text-align: left; width: 100%; text-indent: 15px; } nav ul { display: none; height: auto; } nav a#pull { display: block; background-color: #8c1b23; width: 100%; position: relative;} nav a#pull:after { content: ""; background: url(../images/nav-icon.png) no-repeat; width: 20px; height: 20px; display: inline-block; position: absolute; right:0;} #nav a {background: #8c1b23; color: #000; display: inline-block; font-family: 'Lato', sans-serif; font-size: 11px; line-height: 35px; padding: 0 10px; text-decoration: none; } #nav ul {margin-left: 0px; padding:0; float:left; height:24px; list-style: none} #nav ul li {list-style:none;float:left;position:relative; padding-right:0px 20px; margin:0; margin-right:5px;} #nav ul li a {color: #2d2a2a;display: block;font-family: 'Lato', sans-serif;font-size: 10px;font-weight: normal;padding: 0;text-align: left;border-right:none;} #nav ul li a:hover { color:#2d2a2a; background:none; text-decoration:none;} #nav ul li:hover:after { display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; margin-left: -10px; } #nav ul li.active > a { background: #2d2a2a; color: #ebebeb; } #nav ul li:hover > a { background: #ececec; } #nav ul li ul {position:absolute; width:180px; left:-999em; border-top:0; margin:0; padding:0; } #nav ul li ul:hover {position:absolute; width:180px; left:-999em;border-top:0; margin:0; padding:0; } #nav ul li:hover ul {left:0;} #nav ul ul ul{display:none;} #nav ul li ul li:hover ul {left:100%; top:0; display: block;} #nav ul li:hover ul {left:100%; top:0; display:none;} #nav ul li:hover ul li a { border:none;} #nav ul li:hover ul li ul li a { display:none;} #nav ul li ul li:hover ul li a { display:block;} 

Answer 1

I think this might be what you were trying to accomplish:

HTML:

<nav id="menu" class="clearfix">
  <ul class="clearfix" style="display:none">
    <li><a class="current first-item" href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item3</a>
        <ul class="submenu" style="display:none">
          <li><a href="#">Subitem 3.1</a></li>
          <li><a href="#">Subitem 3.2</a></li>
          <li><a href="#">Subitem 3.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item4</a>
        <ul class="submenu" style="display:none">
          <li><a href="#">Subitem 4.1</a></li>
          <li><a href="#">Subitem 4.2</a></li>
          <li><a href="#">Subitem 4.3</a></li>
        </ul>
    </li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

JS:

$(function() {
        var pull        = $('#pull');
        menu        = $('nav > ul');
        menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();

        });

        // What I added
        $('#menu > ul > li').on('click', function(e) {
            $(this).find('.submenu').slideToggle();
        });

        // $(window).resize(function(){
        //     var w = $(window).width();
        //     if(w > 320 && menu.is(':hidden')) {
        //         menu.removeAttr('style');
        //     }
        // });
    });

Also, for your CSS, I think you have this misunderstanding which is causing funky things to happen. For instance, there's a huge difference b/w nav ul and nav > ul .

nav ul means that ALL the ul elements under the nav element follow the rules defined. In other words, even if the ul element is not a DIRECT child of the nav element, the CSS defined would still apply.

nav > ul on the other hand means that only a ul element DIRECTLY under the nav element would get affected. So if you have a ul within a li , it won't get affected.

I hope that makes sense, let me know if the menu worked as you wanted. Cheers :)

Also, here's the jsfiddle link: http://jsfiddle.net/u1zpoaj7/1/