Joomla Responsive Menus - using CSS

The final menu with 3D Transforms

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>
    <div class="module">
        <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>
    </div>
</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;  }

.show-on-small { display: none; }

/* our 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;
				/* the transitions */
         -webkit-transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
            -moz-transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
                 transition: opacity 300ms ease-in-out, top 200ms ease-in-out;		
	}
	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 {...

JavaScript

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