Share
View previous topicGo downView next topic
avatar
Eby Disagnio
WebMaster
Numri i postimeve : 77
Join date : 2014-06-14
Age : 32
Location : USA
http://webmaster.albanianforum.net

Side bar menu navigation

on Thu Jul 17, 2014 3:29 pm


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>
avatar
Diti
Antar
Numri i postimeve : 6
Join date : 2014-06-15

Re: Side bar menu navigation

on Thu Jul 17, 2014 3:44 pm
i vendosa keto kode por kur klikoj te ikonat nuk me con gjekundi ???
avatar
Eby Disagnio
WebMaster
Numri i postimeve : 77
Join date : 2014-06-14
Age : 32
Location : USA
http://webmaster.albanianforum.net

Re: Side bar menu navigation

on Tue Sep 22, 2015 8:04 pm
Diti wrote:i vendosa keto kode por kur klikoj te ikonat nuk me con gjekundi ???

Ne code ke # .......vendos linket
Sponsored content

Re: Side bar menu navigation

View previous topicBack to topView next topic
Permissions in this forum:
You cannot reply to topics in this forum