WebMasterLog in

Discover premium WordPress themes & website templates, including multipurpose and responsive Bootstrap templates, email templates & HTML templates.


Share

descriptionPost-itSide bar menu navigation

more_horiz


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>

descriptionPost-itRe: Side bar menu navigation

more_horiz
i vendosa keto kode por kur klikoj te ikonat nuk me con gjekundi ???

descriptionPost-itRe: Side bar menu navigation

more_horiz
Diti wrote:
i vendosa keto kode por kur klikoj te ikonat nuk me con gjekundi ???


Ne code ke # .......vendos linket

descriptionPost-itRe: Side bar menu navigation

more_horiz
Permissions in this forum:
You cannot reply to topics in this forum