LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Side navigation menu

Created with by Pablo García Fernández

CSS
/*	
	Side Navigation Menu
	===================
	License:
	https://goo.gl/KC3XXj
	===================
	Author: @PableraShow

 */

@import url(http://pablogarciafernandez.com/css/reset.css);

/* Typography
------------------------------------- */
@charset "UTF-8";
@import url(https://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 */
Host Instantly Drag and Drop Website Builder

 

Description

These is a "Side Navigation Menu" with CSS3 transition technology & without JS.
Term
Mon, 11/27/2017 - 22:11

Related Codes

Pen ID
Pen ID
Pen ID