phpocean: Code is Clay
  • Tutorials
    • Front end
    • Back end
    • Computer skills
    • Design & illustration
    • See all »
  • Forum
  • Blog
  • Contact
  • Log In|Join free

PHP Frameworking - Templating (Part 4)

Previous article

How to upload images and files using php

Next article

How to create a hardware accelerated menu with css3 ?

By zooboole Apr 7th, 2015 Demo   PDF </>

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

Sharing is caring, help us by sharing

Twitter Facebook Pinterest Linkedin
zooboole

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

Related tutorials

Advertisement

Leave a comment

Log in to comment with your phpocean account or use the form bellow to comment as a guest


Comments (2)


Don't miss any tutorial again

Receive fresh and new tutorials right at the moment they are published into your private email

Recent tutorials

  • Here's how I forced myself to learn ReactJS September 4th, 2018
  • How to disable the touchscreen drivers permanently on Ubuntu 17.10 March 11th, 2018
  • The science of creating fixed components on scroll with vanilla JavaScript February 13th, 2018
more »
Write for us Want to become an author on phpocean.com? Request a tutorial Can't see a particular tutorial? Ask for it.

Latest updates

  • Learn a bit of offline coding January 21st, 2019
  • Secrets developers never tell anyone, even to mom January 16th, 2019
  • 6 reasons why you should blog as a software developer November 21st, 2018
  • 5 toughest questions from self-taught developers and their answers October 28th, 2018
  • 4 Most suitable Programming Language for Beginners October 11th, 2018
  • 10 Guest Post Email Request Tips to get you accepted September 20th, 2018
  • DevCongress V9 just took place - here is what you should know July 22nd, 2018
more »
  • About us
  • Faq
  • Policy & Terms
  • Advertise with us
  • Contact
  • Discussions
  • Vialactea Technologies
Copyright © 2015 - 2019 phpocean.com. by Vialactea Technologies Ltd. Except where noted, all rights reserved - Proudly made in Ghana .:. Powered by zooboole.me.