Versioni : punBB
CSS
- Code:
/* Side Navigation Menu =================== License: http://goo.gl/KC3XXj =================== Author: @eby disagnio */@import url(http://pablogarciafernandez.com/css/reset.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 */
HTML
- Code:
<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>