Pure CSS3 Side Navigation Menu

Today, we are sharing a great way to create Pure CSS3 Side Navigation Menu. It relies on CSS3 transition property without any JS. This one is created by PABLO GARCÍA FERNÁNDEZ and if you have an idea  how you can make it better, you can download it and give it try. You can contact Pablo and share your ideas on CodePen or  GitHub.

Pure CSS3 Side Navigation Menu

DEMO | DOWNLOAD

HOW IT WORKS

We have a <nav> tag on the left of the screen with position: fixed;, a width and a fixed height.

Then we have a list with <svg> images and hidden links with display: none;, when we do a :hover over <nav> tag we added more with to the <nav> and adisplay: block; so that the links appear.

Finally, we have to write on the <nav> tag the CSS3 transition property:

        nav {
            transition-delay: 0s;
            transition-duration: 0.4s;
            transition-property: all;
            transition-timing-function: line;
        }

Here is the whole code:

HTML

<nav>
<ul>
<li><img src="http://www.pablogarciafernandez.com/images/svg/side-navigation-menu_home.svg" alt="Home"><a href="#">Home</a></li>
<li><img src="http://www.pablogarciafernandez.com/images/svg/side-navigation-menu_about.svg" alt="About"><a href="#">About</a></li>
<li><img src="http://www.pablogarciafernandez.com/images/svg/side-navigation-menu_work.svg" alt="Work"><a href="#">Work</a></li>
<li><img src="http://www.pablogarciafernandez.com/images/svg/side-navigation-menu_contact.svg" alt="Contact"><a href="#">Contact</a></li>
</ul></nav>

<section>
<h1>Side navigation menu</h1>
<h2>Created with <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path d="M256,462L53.676,284.644V130.646L169.034,50L256,104.977L342.965,50l115.359,80.646v153.998L256,462z M93.801,266.457L256,408.64l162.198-142.183V151.553l-76.35-53.375L256,152.447l-85.849-54.27l-76.351,53.375V266.457z"/></svg>
by <a href="http://pablogarciafernandez.com" target="_blank">Pablo García Fernández</a></h2>
</section>

CSS

/* Typography
------------------------------------- */
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body{
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 1.8em;
  color:#4D4D4D;
}

/* Navigation */

a{
  text-transform: uppercase;
  text-decoration: none;
  color: #151515;

  transition-delay: 0s;
  transition-duration: 0.36s;
  transition-property: all;
  transition-timing-function: line;
}

nav a:hover{
  font-weight: 400;
}

nav, nav:hover{
    padding: 1em;
}

nav a{
  text-indent: -200px;
}

nav:hover a{
  text-indent:0px;
  color: #EEFFE5;
}

svg, a{
  vertical-align: top;
}

/* End Navigation */

/* Sections */

h1{
  font-family: 'Open Sans', sans-serif;
  font-size:3em; 
  font-weight: 300;
  color:#000;
  line-height:1.8em;
}

h2{
  font-weight: 300;
}

h2 a{
  font-weight: 700;
}

/* End Sections */

/* Structure
------------------------------------- */
body{
    background: #f1f1f1;
}

/* Navigation */

nav{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  height: auto;
  min-width: 40px;
  width: 40px;
  background-color: #ccc;

  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

nav:hover{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  height: auto;
  width: 140px;
  background-color: #9ED29E;
}

nav a{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity:0;
  margin-left: 1em;
}

nav:hover a{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity:1;
}

li{
  display: block;
  padding:0.2em;
  height:32px;
}

svg, a{
  display: inline-block;
}

/* End Navigation */

/* Sections */

section{
  padding: 2em 0 0 14em;
}

/* End sections */


You may also like...

4 Responses

  1. JimKendall says:

    Very nicely done, gonna see about how to make this wordpress compatible

  2. designifyme says:

    JimKendall  Brilliant idea! Give me a shout if you come up with something:) Thanks:)

  3. PableraShow says:

    It had not seen it! Nice post 😉

  4. PableraShow says:

    designifyme JimKendall, the Menu is compatible with WordPress and easy to implement. If you need any help, let me know it. You can write me an email ( [email protected] ) or tweet me at @PableraShow. It will be a pleasure!

Leave a Reply

Your email address will not be published. Required fields are marked *