Building up a fully responsive accordion menu
Here at Pixel2HTML we like to give back to the open source community whenever we have the time. That’s why today we’re kickstarting our new Pixel2HTML Tutorials blog section with this post.
On this first release, we’re going to give you an overview of how to make a cool Responsive Mobile Menu with Accordions using technologies such as SASS, CoffeeScript, Jade, SVG icons and Gulp as our task runner.
You can check out our screencast on the following video, and check the step by step below as well.
Lets take a look at the completed site to get an overall picture:
Here a demo on GitHub Pages. Also remember that you can clone and checkout the repo for this project on GitHub to use on you own projects and/or to mess around with it.
The repo is actually a clone of my Ground-Zero package that I use for a lot of projects both personal and for Pixel2HTML
So after you clone the repo and run
npm run firstTime and
npm run getReady you should end with something like this:
So let me give you a quick overview of the situation:
bower.jsonis where we are keeping track of our front-end tools, in this case we have jQuery and Modular Scale for Sass
- Next we have our
gulpfile.jsfile which only points to the
gulpdirectory where we are keeping our gulp tasks to concatenate js files, compile sass, jade, etc.
node_modulesis where the packages that node installs live
package.jsonis the file that keeps track of which node modules we are using for our project.
srcinside this directory are all of our actual working files
So now lets get into the real deal lets code the accordion menu.
The whole idea is to take this kind of markup and turn into an accordion menu:
Moving forward I’ll use the Jade notation because its much cleaner. For more info check Jade-Lang.
So the basic idea is we have our
nav inside we get the
.toggle which contains the burger icon as well as the word “Menu” then we get the actual
.navigation which inside has an unordered list with some more unordered lists nested inside (those will work as our accordion stuff)
For our icons we are using some inline svgs. I’ve abstracted the work away in such a way that you only need to drop the icons you want inlined inside
src/svg/inline but if you want to know the logic behind that check this article where I got the inspiration for such thing: How to work with SVG icons
Also here is the correspondent gulp task of the svgs: Svg.coffee
The actual accordion
Now for the accordion part what we actually need is some stuff:
- Start with the item you want to toggle with a
display: nonestyle. So for us that means hiding the entire
.navigationas well as the
On my CSS I’m also creating a new class called
.is-active which just sets the display to block lets look at the navigation example:
When we click the toggle we will trigger the class
is-triggered on the toggle, that will make the transition for the burger icon to become an X icon. Next we will check if the navigation is active and either add or remove the is-active class as well as performing the slideUp or slideDown method.
Now for the accordion part of the nested second level ul tags:
We are almost doing the same except we are only allowing one nested
ul tag to be open at a time.
But the difference is that we are using the
.attr jQuery method to set the icon
xlink:href attribute to either
#minus depending on the situation.
And that’s it! You should be all set by now.
Remember to take a look at the source code over our Github account and at the demo for a more detailed overview.
And if you need help with your Front-End Development, just contact us!