0

Horizontal Blue Color Linear Gradient Menu Bar


This horizontal nav menu create using Simple html and css. This menu bar looks a linear gradient on the background to give the menu depth. Active items are highlighted by an inner box shadow.

Demo Download

HTML Markup:
<div class='menu'>
<ul>
<li>
     <a href='#'>Home></a>
</li>
<li>
     <a href='#'>About Us</a>
</li>
<li>
     <a href='#'>Demos</a>
</li>
<li class='active'>
     <a href='#'>Tutorials</a>
</li>
<li class='last'>
     <a href='#'>Downloads</a>
</li>
</ul>
</div>

CSS Code:
.menu ul, .menu li, .menu a {

     list-style: none;
     margin: 0;
     padding: 0;
     border: 0;
     line-height: 1;
     font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
}

.menu {

     border: 2px solid #0657D1;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     border-radius: 5px;
     width: auto;
}

.menu ul {

     zoom: 1;
     background: #0D64DD;
     background: -moz-linear-gradient(top, #0B408F 0%, #052F6F 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0B408F), color-stop(100%, #052F6F));
     background: -webkit-linear-gradient(top, #0B408F 0%, #052F6F 100%);
     background: -o-linear-gradient(top, #0B408F 0%, #052F6F 100%);
     background: -ms-linear-gradient(top, #0B408F 0%, #052F6F 100%);
     background: linear-gradient(top, #0B408F 0%, #052F6F 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
     padding: 5px 10px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     border-radius: 3px;
}

.menu ul:before {

     content: '';
     display: block;
}

.menu ul:after {

     content: '';
     display: table;
     clear: both;
}

.menu li {

     float: left;
     margin: 0 5px 0 0;
     border: 1px solid transparent;
}

.menu li a {

     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     border-radius: 5px;
     padding: 8px 15px 9px 15px;
     display: block;
     text-decoration: none;
     color: #ffffff;
     border: 1px solid transparent;
     font-size: 16px;
}

.menu li.active {

     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     border-radius: 5px;
     border: 1px solid #0D64DD;
}

.menu li.active a {

     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     border-radius: 5px;
     display: block;
     background: #1154B2;
     border: 1px solid #133e40;
     -moz-box-shadow: inset 0 5px 10px #133e40;
     -webkit-box-shadow: inset 0 5px 10px #133e40;
     box-shadow: inset 0 5px 10px #133e40;
}

.menu li:hover {

     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     border-radius: 5px;
     border: 1px solid #0D64DD;
}

.menu li:hover a {

     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     border-radius: 5px;
     display: block;
     background: #1154B2;
     border: 1px solid #133e40;
     -moz-box-shadow: inset 0 5px 10px #133e40;
     -webkit-box-shadow: inset 0 5px 10px #133e40;
     box-shadow: inset 0 5px 10px #133e40;
}

Unknown

nowstartwebdesign.com tutorial has been prepared for the beginners to help them understand basic HTML programming. After completing this tutorial you will find yourself at a moderate level of expertise Web Designing from where you can take yourself to next levels

No comments :

Post a Comment