Last active
December 27, 2015 04:39
-
-
Save andornagy/7268890 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="nav"> | |
<ul> | |
<li><a href="#"><i class="fa fa-home fa-2x"></i><Br/>Home</a></li> | |
<li><a href="#"><i class="fa fa-book fa-2x"></i><Br/>Tutorials</a> | |
<ul> | |
<li><a href="#"><i class="fa fa-desktop fa-1x"></i>Design</a></li> | |
<li><a href="#"><i class="fa fa-cog fa-1x"></i>Development</a></li> | |
<li><a href="#"><i class="fa fa-code fa-1x"></i>Graphics</a></li> | |
</ul> | |
</li> | |
<li><a href="#"><i class="fa fa-code fa-2x"></i><Br/>Snippets</a></li> | |
<li><a href="#"><i class="fa fa-folder fa-2x"></i><Br/>Resources</a> | |
<ul> | |
<li><a href="#"><i class="fa fa-folder-open fa-1x"></i>Free</a></li> | |
<li><a href="#"><i class="fa fa-folder-open fa-1x"></i>Premium</a></li> | |
</ul> | |
</li> | |
<li><a href="#"><i class="fa fa-eye fa-2x"></i><Br/>Demos</a></li> | |
<li><a href="#"><i class="fa fa-user fa-2x"></i><Br/>About</a></li> | |
<li><a href="#"><i class="fa fa-envelope fa-2x"></i><Br/>Contact</a> | |
<ul> | |
<li><a href="#"><i class="fa fa-folder-open fa-1x"></i>Facebook</a></li> | |
<li><a href="#"><i class="fa fa-folder-open fa-1x"></i>Twitter</a></li> | |
</ul> | |
</li> | |
</ul> | |
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="nav"> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">Tutorials</a> | |
<ul> | |
<li><a href="#">Design</a></li> | |
<li><a href="#">Development</a></li> | |
<li><a href="#">Graphics</a></li> | |
</ul> | |
</li> | |
<li><a href="#">Snippets</a></li> | |
<li><a href="#">Resources</a> | |
<ul> | |
<li><a href="#">Free</a></li> | |
<li><a href="#">Premium</a></li> | |
</ul> | |
</li> | |
<li><a href="#">Demos</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.nav { | |
background-color:#39C; | |
width:auto; | |
} | |
.nav ul { | |
margin:0; | |
padding:0; | |
} | |
.nav ul li { | |
list-style:none; | |
display:inline-block; | |
margin:0; | |
} | |
.nav ul li a { | |
display:block; | |
text-decoration:none; | |
text-align:center; | |
padding:10px 30px 10px 30px; | |
color:#333; | |
font-size:18px; | |
font-family:Arial, Helvetica, sans-serif; | |
transition: color 0.5s, background 0.5s; | |
-webkit-transition: color 0.5s, background 0.5s; /* Safari */ | |
} | |
.nav ul li:hover a { | |
color:#efefef; | |
padding-bottom:10px; | |
background-color:#105476; | |
transition: color 0.5s, background 0.5s; | |
-webkit-transition: color 0.5s, background 0.5s; /* Safari */ | |
} | |
/* | |
Drop Down | |
*/ | |
.nav ul li ul { | |
display:none; | |
} | |
.nav ul li:hover ul { | |
z-index:2; | |
position:absolute; | |
display:block; | |
} | |
.nav ul li ul | |
{ | |
position:relative; | |
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
} | |
.nav ul li ul:before, .nav ul li ul:after | |
{ | |
content:""; | |
position:absolute; | |
z-index:-1; | |
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); | |
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8); | |
box-shadow:0 0 20px rgba(0,0,0,0.8); | |
top:50%; | |
bottom:0; | |
left:10px; | |
right:10px; | |
-moz-border-radius:100px / 10px; | |
border-radius:100px / 10px; | |
} | |
.nav ul li ul li { | |
list-style:none; | |
display:block; | |
float:none; | |
} | |
.nav ul li ul li:hover a { | |
color:#105476; | |
padding-bottom:10px; | |
background-color:#efefef; | |
transition: color 0.5s, background 0.5s; | |
-webkit-transition: color 0.5s, background 0.5s; /* Safari */ | |
} | |
.nav ul li ul li {} | |
.nav ul li ul li a { | |
padding:5px 15px 5px 15px; | |
text-align:left; | |
} | |
.nav ul li ul li a i { | |
min-width:20px; | |
padding-right:10px; | |
} | |
/* | |
Drop Down Arrow | |
*/ | |
.nav li > a:after { content: ' »'; } | |
.nav > li > a:after {content: ' »'; } | |
.nav li > a:only-child:after {content: ''; } | |
/* | |
Active Class | |
*/ | |
.nav ul .active { | |
color:#FFF; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment