LONG LIVE M-COMMERCE!
These days, going mobile is one of the best decisions anyone could ever make for their eCommerce site. This trend keeps growing bigger and bigger, and there is no stopping it. How to make it to the top? Providing the best user experience is the best place to start.
If you have done some research on mobile menus, you are already aware that there has not been a lack of UX creativity from web designers and developers for the rest of us to play with. The off-canvas navigation menu is one of those many solutions, and I’m going to show you the proper way to make this mobile menu style work with Magento.
WHAT IS AN OFF-CANVAS MENU?
It is a menu that stays hidden outside of the website’s wrapper and slides in from (generally) the left side of the screen pushing the content with it after the menu button is tapped. Once you tap the menu button again, the off-canvas menu slides back out of view. This menu functionality can be accomplished entirely with CSS3.
FILES THAT YOU WILL NEED TO EDIT AND/OR CREATE:
STEP 1: DECLARE YOUR LAYOUT BLOCKS.
We will be creating an entirely new tree structure for our off-canvas navigation menu, so go ahead to your local.xml file and create your parent block:
It needs to be created at the ‘root’ level because it will live outside of all of the content and the type=”core/text_list” tells the block to automatically display all of its children.
When something is off-canvas it can be on either the top, bottom, left or right sides, so let’s declare a block with the ‘left’ word in its name since that’s the position we want it in.
This time we give it a type=”core/template” which is the most general block type and contains all the methods we will need for this. We will create the template file later on.
Now, it is time to declare the children blocks of content that the off-canvas menu will contain and render. In this tutorial we will have three: a search bar, the category navigation, and extra navigation links. Place these inside of ‘off_canvas_left’.
This one will consist of two blocks
We use the type=”page/html_topmenu” because it is the same type Magento uses for the topmenu.phtml file to render and we will be using the same kind of menu.
Extra navigation links:
Again, this block type is the same Magento uses to render lists of links.
Here is the end result:
Now that we have all of our off-canvas blocks declared, we can proceed to declaring the block for our mobile navigation in the header.
This one goes outside of the <reference name=”root”></reference> block entirely and in the “header” block instead. This is where you will place the menu icon, and other important mobile navigation buttons.
And that is it for layout!
STEP 2: CREATE THE TEMPLATE FILES.
The first line is a check box because we will be using the :checked pseudo class to make this mobile menu work. I’ll show you how a bit later.
After that, you can see two wrapping divs that contain three children divs with the content blocks we declared earlier: search, categories, and links.
This one is a copy and paste from Magento’s template/page/html/topmenu.phtml, the only change here is the <ul id=””>. You could also just write a code snippet here that calls only the top level categories of the store which would make styling easier, but may not be as good for the user experience. It all depends on the kind of navigation functionality you want/need.
The code you see in there is the proper way to create a list of links in Magento. The links that will get rendered by this template will have to be defined in the layout xml by referencing the name of the block <reference name=”off.canvas.links”></reference> and placing an <action method=”addLink”></action> inside of it with the appropriate parameters. Take a look at Magento’s customer.xml file to see an example on how to do this.
This one is easy, you just need to call the child block we declared in the header block earlier. Preferably below ‘topMenu’. You will later on show and hide this with CSS and media queries but, for anything to render we first need to create the following template file.
This is only an example of the content code you could have in this file.
Here we have a ‘menu-icon-wrap’ div for, as the name suggests, our menu icon. Next to that we have placed some basic links: the login links which are in their own block, and a link to the store locator. And finally, we have as a bonus to this tutorial the code that will display the cart item count right on your mobile navigation. The styling is up to you.
You will notice that inside of the ‘menu-icon-wrap’ we have a label. This is the label that goes together with the input check box we placed inside of offcanvasleft.phtml. Just make sure the ID of your check box matches the for=”” attribute of your label.
All of these will need the same code edit. Inside of the <body> you will need to wrap the <div class=”wrapper”> with two other wrapping divs, one called ‘outer-wrap’ and another called ‘inner-wrap’. In-between the ‘outer’ and ‘inner’ divs is where you will call the off-canvas menu block, like so:
And that is it for templates! Now last step.
STEP 3: CSS3 TRICKS.
Here is how we create the sliding animation
We don’t want or need to see the check box, so we better display:none it.
Just some styles and transitions for the wrappers to work better with the off-canvas menu. For the outer-wrap we did overflow-x:hidden to avoid getting a scrolling bar once the off-canvas is open. For the inner-wrap we added a left:0 for the animation to have a starting position. And last but not least we need position:relative here because we will need to do position:absolute on the #off-canvas-left inside of it.
This is our off-canvas menu. The first part here is, of course, the transitions that will allow the sliding animation to happen. We use position:absolute to position the menu relative to the browser window, height:100% to make it reach the bottom of the window at all times, and overflow:hidden so that we can put it outside of its container box without increasing the container’s width. Then we give it a 75% width and a left margin of the same amount but negative so that it’s fully hidden outside of the browser.
Here is where we finally get to use the magic of CSS3. We use the pseudo-class :checked to target the check box when checked. It’ll be checked when the user taps the label that is related to it (the menu button is the label). We use the ‘+’ selector to target only the immediate sibling element with the ‘nav-menu-mobile’ class, and then add the necessary styles for it to slide to the right.
Here we use the :checked pseudo-class again but this time we use the ‘~’ selector which targets any next siblings with the class ‘inner-wrap’ which is the site’s content wrap. We want to simultaneously slide this to the right while the off-canvas slides to the right as well. We need left:75% so that they both move the same distance and look synced. We need position:relative here for left:75% to work.
And finally some media queries to hide the mobile navigation and off-canvas menu from 940px and up. We also want to return ‘inner-wrap’ to left:0. The transitions will make it look nice when you’re resizing the browser window.