Navigation bar describes about your pages, it will be look stylish and quality one. here is a simple and stylish navigation bar for your website by using simple css.
CSS File:
html {
font-family: 'Roboto', sans-serif;
font-weight: 100;
background: #f25916;
}
.container {
width: 960px;
margin: 50px auto;
}
nav {
list-style: none;
position: relative;
}
nav li {
float: left;
}
nav li a {
position: relative;
padding: 18px 34px;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
background: #374140;
border-right: 1px solid #2A2C2B;
border-bottom: 10px solid #2A2C2B;
transition: all 0.1s ease;
font-weight:bold;
}
nav li a:hover {
color: rgba(255, 255, 255, 0.9);
border-bottom: 15px solid #2A2C2B;
top: -5px;
}
nav li a:active {
color: rgba(255, 255, 255, 0.2);
border-bottom: 0px solid #2A2C2B;
top: 10px;
}
HTML File:
<div class="container">
<nav>
<li><a href="">HOME</a></li>
<li><a href="">PAGE 1</a></li>
<li><a href="">PAGE 2</a></li>
<li><a href="">PAGE 3</a></li>
<li><a href="">PAGE 4</a></li>
</nav>
</div>
Show Conversion Code Hide Conversion Code Show Emoticon Hide Emoticon