Joomla Responsive Menus using SASS

A basic Joomla! responsive menu module with base styling

by kricore

HTML

<nav id="siteNav" class="navigation">
    <a href="#" id="menuToggler" class="show-on-small">
        <i class="icon icon-menu"></i> <!-- 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>

SCSS

/* common classes */
*,*: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;
    &:hover { color: lighten(black,15); text-decoration: none; } 
}
ul { list-style: none outside none; /* for demo purposes */ }
.show-on-small { display: none; } 

/* the visibility toggler */
#menuToggler {
    .icon { display: inline-block; vertical-align: middle; padding-right: 5px }
	span { display: inline-block; vertical-align: middle; font-weight: 800; font-size: 12px; line-height: 28px; }
	a:hover { text-decoration: none; }
}

/* our menu */
ul.menu { backround: #fff; margin: 0; padding: 0; font-size: 0.9em;
    
    /* setting the visibility */
    ul { left: -9999em; opacity: 0; position: absolute; width: 300px; background: darken(white,10); margin: 0; padding: 0; top: 40px;
         -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 ul { background: darken(white,20); }
          
    > li { display: inline-block; vertical-align: middle; position: relative;
        
        /* top level links only in order to avoid overriding */
        > a { display: inline-block; vertical-align: middle; padding: 8px 10px; }
        > a:hover, &:hover > a { background: darken(white,10); }
        &:hover > ul { opacity: 1; top: 30px; left: 0; }
    }
    
    > li > ul > li:hover ul { opacity: 1; top: 36px; left: 300px; }
    
    /* second and third level */  
    ul > li { display: block 
        a { display: block; padding: 10px 15px; }
        a:hover,
        &:hover a { background: darken(white,25);  } 
    } 
    
    /* cover all lower levels */
    ul ul li a:hover { background: darken(white,35); }
    
    /* Active and parent classes-...

JavaScript

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