Basic Joomla! Responsive menu

by kricore

HTML

<nav id="siteNav" class="navigation">
    <a href="#" id="menuToggler" class="show-on-small">
        <span class="icon icon-menu">&#9776;</span> <!-- insert your icon font here -->
        <span>Menu</span>
    </a>
    <!-- mod_menu start -->
    <ul class="menu">
        <li class="parent deeper">
           <a href="#">Parent Item +</a>
            <ul>
                <li><a href="#">Second Level</a></li>
                <li class="parent deeper">
                    <a href="#">Parent Item +</a>
                    <ul>
                        <li><a href="#">Third Level</a></li>
                        <li><a href="#">Third Level</a></li>
                        <li><a href="#">Third Level</a></li>
                    </ul>
                </li>
                <li><a href="#">Second Level</a></li>
                <li><a href="#">Second Level</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Top Level</a>
        </li>
        <li>
            <a href="#">Top Level</a>
        </li>
        <li>
            <a href="#">Top Level</a>
        </li>
    </ul>
    <!-- /mod_menu end -->
</nav>

CSS

/* for demo purposes */ 
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body { font-size: 100%; }
body { font-family: Helvetica, Arial, sans-serif; }
a { color: #000; text-decoration: none; }
a:hover { color: #262626; text-decoration: none; }
ul { list-style: none outside none; }

/* the visibility toggler */
#menuToggler { display: none; }

/* our menu (Typical horizontal menu) */
ul.menu { backround: #fff; margin: 0; padding: 0; font-size: 0.9em;  }

	/* second level */
	ul.menu ul { left: -9999em; opacity: 0; position: absolute; width: 300px; background: #e6e6e6; margin: 0; padding: 0; top: 40px; }
	ul.menu ul ul { background: #cccccc; }

	ul.menu > li { display: inline-block; vertical-align: middle; position: relative; /* top level links only in order to avoid overriding */ }
	ul.menu > li > a { display: inline-block; vertical-align: middle; padding: 8px 10px; }
	ul.menu > li > a:hover,
	ul.menu > li:hover > a { background: #e6e6e6; }

	/* setting the visibility */
	ul.menu > li:hover > ul { opacity: 1; top: 30px; left: 0; }
	ul.menu > li > ul > li:hover ul { opacity: 1; top: 36px; left: 300px; }

		/* second and third level */
		ul.menu ul > li { display: block; display-display: block; display-padding: 10px 15px; }
		ul.menu ul > li a { display: block; padding: 10px 15px; }
		ul.menu ul > li a:hover,
		ul.menu ul > li:hover a { background: #bfbfbf; }
		ul.menu ul ul li a:hover { background: #a6a6a6; }

		/* Active and parent classes- using Joomla! menu classes - use the :after pseudo-classes to add images or icon fonts. You can safely remove this part since it's completely optional - remove at will */
		/* active states */
		ul.menu > li.parent > a { }
		ul.menu > li.active { }
			/* lower levels */
			ul.menu > li.active > a { }
			ul.menu > li.active > ul > li.active > a { }
			ul.menu > li.active > ul > li.active > ul > li.active > a { }

@media screen and (max-width: 800px) {
 ...

JavaScript

(function($){
    $(document).ready(function(){    
        $('#menuToggler').on('click', function(e){
            e.preventDefault;
            $('#siteNav ul.menu').toggleClass('menuIsActive');
        });
    });
})(jQuery);