JoomlaWorks

Member Dashboard
  • Home
  • Extensions
    • Commercial
      • Frontpage Slideshow
      • K2 Plugin for sh404SEF
      • Simple Image Gallery Pro
      • SocialConnect
    • Free
      • K2
      • AllVideos
      • DISQUS Comments for Joomla!
      • IAKI (Import As K2 Image)
      • Quick Menu (for Joomla 4)
      • Simple Image Gallery
      • Simple RSS Feed Reader
    • Free On Github
      • Akismet for Kunena
      • Fill It Up
      • K2 Example Plugin
      • K2 Links for JCE
      • Rebuild K2 Image Cache (CLI utility for K2)
      • TinyLetter Subscribe
      • URL Normalizer
      • User Extended Fields for K2
  • Templates
    • Commercial Templates
      • Anagram
      • Archetype
      • BusinessOne
      • Ibento
      • Janaro
      • Kiji
      • Matchbox
      • nuMuzik
      • RadioWave
      • Toreda
    • Free Templates
      • nuModusVersus
      • Takai
  • Demos
    • Joomla Extension Demos
    • Joomla Template Demos
    • WordPress Plugin Demos
  • Labs
    • Web Apps
      • JSON 2 JSONP
      • Feed Reader (bookmarklet)
      • Device Info
  • Support
    • Documentation for Joomla Extensions
      • AllVideos
      • Frontpage Slideshow
      • Simple Image Gallery
      • Simple Image Gallery Pro
      • SocialConnect
    • Documentation for Joomla Templates
      • General Resources
        • Installation
        • Content
        • Customization
      • Commercial Templates
      • Free Templates
    • Get Help
      • Community Forum
        • Recent Topics
        • Categories
        • Create free account
      • Help Desk
      • Contact us by e-mail
      • Contact us on Facebook Messenger
      • Contact us on Twitter
  • About
    • Blog
    • Company
    • License & Terms of Service
    • Privacy Policy
  • My Account
23 10 2013
Written by  JoomlaWorks
Published in Blog
Tagged under
  • +rwd
  • +jquery
  • +CSS
2 comments

Responsive navigation in Joomla

Responsive navigation in Joomla

This week in our series of web design and development blog posts we are going to dive deep into responsive Joomla templating and demonstrate part of our daily template development workflow here at JoomlaWorks HQ.

Responsive navigation has been covered in lots of tutorials across the web. But let's face it, Joomla has it's (modular) way of things. For one, you know that the Joomla menu has a default HTML output using an unordered list (ul), which is pretty generic. If you've done Joomla template overrides before, you know that the process of overriding the HTML output of any extension may be simple, but there's a small catch for the menu module specifically. Since the output of the menu module is heavily mixing HTML with PHP code (due to the nature of the code, to be honest), if you perform changes to the HTML output, you may be put in a position to contantly monitor if your override works whenever a new Joomla update is released. Not that it's happened too often, but it has happened...

How cool would it be if we could leave the HTML output of the menu module untouched and "responsive-ize" our menu using just a few lines of JavaScript/jQuery and CSS? As you'll see in the code snippets following, we're not touching the menu module overrides at all. We'll be extending our existing menu by creating a "classic" responsive menu that is vertical and gets triggered by an anchor link when our site is viewed on a mobile or tablet device. So our menu will switch from a typical horizontal menu to a vertical one.

We'll be doing things in 3 steps: first place the required HTML and JavaScript, then add the CSS for the responsive state and thirdly, extend the CSS to animate the menu when toggled on and off.

The code examples will work on most tablet and mobile devices. We'll assume that the desktop layout is already handled by your template.

Beside the static code examples, we'll be using live code examples embedded from jsFiddle.

So let's get started!

 

Step 1a: Some Basic Markup

The markup is pretty straightforward. Open up the index.php file of your Joomla template and locate the module position in which we're publishing our main (multi level) menu. Let's say this module position is called "main_menu". We'll be wrapping the module position with a <nav> element (part of the HTML5 spec), but you can use any other block element (e.g. a <div>). Inside the <nav> element we're adding an anchor link with a hash (#) for the URL. This anchor element will be used as the menu toggler when our site is rendered in a tablet or mobile device. On desktop browsers our menu will look as it did before implementing this (unobtrusive) technique :)

Here's the code to add in our index.php file:

<?php if($this->countModules('main_menu')): ?> <nav id="siteNav"> <a href="#" id="menuToggler" class="show-on-small">&#9776; Menu</a>
<jdoc:include type="modules" name="main_menu" style="" /> </nav> <?php endif ;?>

As you'll notice, the <nav> element has an id attribute of "menuToggler". This is going to be used by our small jQuery snippet to attach the necessary open/close (toggle) behaviour when clicking the anchor element. The anchor element encloses the so called "navicon" or "hamburger icon" (☰) that we all know and use in many popular apps in tablet and mobile devices.

When on a tablet or mobile device, we're gonna be hiding the entire menu but the anchor, then use the anchor as the toggler (when clicked) to show/hide the menu. We do this by adding "a#menutoggler {display:none;}" in our template's CSS file. And we're adding some basic CSS to lay out the menu for this demo. On a real live site, this will already be handled by your template.

 

Step 1b: A simple jQuery script

Instead of using complex JavaScript based animation to toggle our responsive menu, we're going to use CSS transitions and transforms. They are easier to implement and will render better now and in the future. So, we'll only be adding JavaScript for the toggler functionality in the anchor link. This snippet swaps "visibility" classes on the menu container.

This is the code:

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

Nothing fancy or complicated here. Just simple class toggling. The a element with the id #menuToggler simply changes the class of your <ul> menu. Notice that the menu module's output already includes the class ".menu", so we're using this class to target our entire menu list from top to bottom. The visibility and all the effects will later be handled by CSS.

If you're not already loading jQuery on your site, check your template settings for a related option. Almost all templates nowadays load jQuery by default. Otherwise look for a plugin to load jQuery on your site or simply add jQuery directly in your template's <head> tag.

 

 

Step 2: The CSS code

We've covered the "desktop" state so far. Essentially what we've added is still not visible to anyone. We'll move on now and add the required CSS media queries to control the visibility of our menu on tablet and mobile devices. We'll assume the screen limit for such devices starts at a maximum of 800px. The code example that follows will make the anchor link visible when we switch to a screen that is 800px wide or less, while hiding the desktop menu and changing its orientation to vertical at the same time.

 

 

(From my experience I have noticed that building my menu module code based on the '>' child combinator requires significantly less code and fewer overrides, meaning cleaner and more sustainable code)

 

CSS Specificity with icons inspired by "The Shining"

 

I'm styling each level distinctly so when I have to "decorate" multi level menus I don't have to reset paddings, borders, radiuses, shadows (you get the picture...) on every level. Is it over specified? Sure.. but the code is much cleaner.

 

Step 3: Putting the menu off-canvas & animating things

Now that we have our basic working example of our responsive menu, we'll move on and spice it up a bit. We'll push the vertical menu "off-canvas" in its "off" state and the toggler will display back the menu using a linear slide-in effect from the left. Notice the CSS code blocks added that control the transition & transforms.

 

 

And there you have it!


The End Result

 

Moving forward: tips, techniques & a faster workflow

A note on media queries & breakpoints

In this demo we have a breakpoint at 800px. As part of my worklflow when either designing or developing a website I tend to use wider breakpoints than this. I usually try to take advantage of the touch capabilities of the device so I would realistically set my breakpoint between 1024 and 900 pixels.

 

Taking advantage of larger screens and touch capabilities - Toreda on an iPad

 

Cross browser

Using CSS transitions prevents us from using "display:none/block" states. I have chosen to use positioning and opacity instead to create this effect.

If you want cross browser opacity for IE8 or earlier (although not required in practice) you can use the proprietary -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" value.

 

Pushing the menu on/off canvas

You can use Modernizr to detect if 3D transforms are supported and provide a fallback CSS class for browsers which don't support them.

For Joomla templates I have found this build of Modernizr to be very helpful while not being too big.

 

Using SCSS

To make my life a bit easier and save me some hours I use CSS preprocessors and in this case SASS.

To handle all the semi-complex transitions and CSS transforms I have found bourbon both to have excellent documentation and to be super easy to use.

Worried about the -webkit- prefixes and the complex 3Dtransform code?
Well.. no need to, simply use this snippet for your simple transitions and this snippet for 3D transitions so you can code your menu in no time.

 

SASS lover?

I have created a SASS version as well. You can find it here.

Read 44943 times Last modified on Monday, 22 June 2020 14:36

2 comments

  • wilbert wilbert 11 Jan 2017
    Comment Link

    Is there a way to simple make the menu on mobile clickable on the menu items. Now everything is visable when you click on the hamburger menu

  • bax bax 06 Jun 2015
    Comment Link

    Do you have a demo somewhere?

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

back to top
BY MAIL BY RSS

Archives

  • May 2024 (1)
  • March 2023 (1)
  • January 2022 (1)
  • July 2021 (2)
  • May 2021 (1)
  • February 2021 (1)
  • December 2020 (1)
  • September 2020 (1)
  • June 2020 (1)
  • May 2020 (1)
  • February 2020 (1)
  • January 2020 (5)

Tag Cloud

allvideos announcement apache community development frontpage slideshow future joomla k2 Performance plugin release sh404sef simple image gallery simple image gallery pro simple rss feed reader socialconnect tips update video

Latest Entries

  • K2 will not be made available for Joomla 4/5 - change of course
    Written by  JoomlaWorks
    30 May 2024
  • New free extension release: Quick Menu (for Joomla 4)
    Written by  JoomlaWorks
    06 Mar 2023
  • Simple Image Gallery (free) v4.2 released
    Written by  JoomlaWorks
    07 Jan 2022
  • Simple Image Gallery Pro v3.9.1 released (bug-fix release)
    Written by  JoomlaWorks
    26 Jul 2021
  • Simple Image Gallery Pro v3.9.0 released
    Written by  JoomlaWorks
    05 Jul 2021

Join Our Newsletter

Enter your e-mail address to subscribe to our new or updated product notifications. We send combined newsletters, so we won't spam you every week :)

Get Social

  • Twitter
  • GitHub
  • Facebook
  • GitHub (K2)
  • YouTube
  • Speaker Deck

Grab Our Feeds

  • Extension Updates
  • Blog
  • Videos
  • Presentations
Copyright © 2006 - 2025 JoomlaWorks Ltd.
JoomlaWorks Ltd. and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.
designed by Nuevvo