How to create a hardware accelerated menu with css3 ?
Welcome to this new tutorial. Here I am about to show you how to create a very simple Hardware Accelerated Slide Menu with CSS3. If you would like to have a look at the final work, just click here. Now, let's start.
Our Project Structure
- projectFolder
- index.html
- styles.css
- script.js
If you need you can go ahead and create these base files using the code below then store them in the same directory.
index.html
<!doctype html>
<head>
<title>Hardware Accelerated Slide Menu with CSS3</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- jQuery 1.11.2 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!-- our project's html here -->
</body>
<script src="script.js"></script>
</html>
styles.css
body,html {
margin:0; /*overwrite default 8px margin*/
}
script.js
$(document).ready(function() {
/* our code goes in here */
});
1. Creating our menu element
Create our menu element and give it an id of slide-menu and position fix it to the top left.
I'm making my width 250px because it will be a reasonably safe size for desktop, tablet and mobile.
index.html
<div id="slide-menu"></div>
styles.css
#slide-menu {
background-color: #191e25;
height: 100%;
position: fixed;
top: 0;
left: 0;
max-width: 250px;
width: 250px;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: translate3d(-250px, 0px, 0);
transform: translate3d(-250px, 0px, 0);
-webkit-transform: translate(-250px, 0px);
transform: translate(-250px, 0px);
}
The page should be blank, though if you delete all the transform's and refresh you will see our menu.
All we're doing is moving our element negative 250px along the X axis moving it off of our page to the left. If we give it a positive interger it will move to the right.
Note: We call a translate3d first with a regular translate fallback. For production include all browser prefixes for both transform: translate3d and transform: translate.
2. Open and Closed states
So we've got our menu and it's positioned off of our screen in it's closed state, we need to create an open state for it, create a new unique css class called open for our menu. Note the selector #slide-menu.open this is important.
styles.css
Here all we're doing is resetting our translate back to 0px.
#slide-menu.open {
-webkit-transform: translate3d(0px, 0px, 0);
transform: translate3d(0px, 0px, 0);
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
A CSS pre processor like SCSS, LESS or SASS to empower your style sheets with variables, functions, loops and selector nesting to help you write beautiful, and less confusing messy css.
3. We need a trigger
So now we have our menu and it's open class defined we need something to click right? create a new element
I have just made a fixed element in the top left with a :before psuedo for use of content property with a string of menu, you will see how it's changed later.
index.html
<div id="menu-button"></div>
style.css
#menu-button {
position: fixed;
left: 20px;
top: 20px;
background-color: #191e25;
color: white;
font-family:verdana;
cursor: pointer;
padding:10px;
}
#menu-button:before {
content:"Menu";
}
Now we have our button we can bind our click function to toggle our menus open class on and off using jQuery's toggleClass.
var menuButton = $('#menu-button');
var menu = $('#slide-menu');
$(menuButton).click(function() {
$(menu).toggleClass('open');
});
This is good but not what we're after, we want the button to move and change when the menu is open
4. Final Steps
Re apply our methods to our button and give it it's own unique open class. We're also going to create our :before open state now, note it's selector #menu-button.open:before, becoming true when our menu has the open class
styles.css
#menu-button.open {
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: translate3d(250px, 0px, 0);
transform: translate3d(250px, 0px, 0);
-webkit-transform: translate(250px, 0px);
transform: translate(250px, 0px);
}
#menu-button.open:before {
content:"Close";
}
We also need to edit our click function to toggle our new open class on our button, we can use the this keyword as its selector. Add below inside our click function
script.js
$(this).toggleClass('open');
5. Conclusion
So that's out hardware accelerated menu using CSS3 and jQuery done, we covered some great practices on giving our front end some fancy animations and effects, obviously we didn't completely finish our menu because we don't have our links, I have left that one to you to finish off! Good luck and happy coding! show me how your menus turned out and how you further developed them!
Demo | My Source Code
zooboole
Hey! I am Ahmed Salifou Amidou aka Zooboole. Full-Stack & Full-time Web Developer. I am always learning and sharing at the same time what I discover. I am currently writing a book check it out at: www.webdevelopmentstarterkit.com
