Ads Top

Custom Horizontal navigation bar in css

How to create custom navigation bar basic in CSS, Horizontal navigation bar with CSS, can feel as given below image:


HTML Code:

<div class="horizontal-navigation-bar">

    <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Designs</a></li>
        <li><a href="#">Developments</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Educations</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
    <div class="clr"></div>
</div>



CSS Code:

<style>

    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .horizontal-navigation-bar {
        margin: 0;
        float: right;
        padding: 0;
    }
    .horizontal-navigation-bar ul {
        margin: 21px 0 0 0px;
        padding: 0;
        list-style: none;
    }
    .horizontal-navigation-bar ul li {
        background: #bbb;
        color: #333;
        display: inline;
        float: left;
        height: 26px;
        margin: 0 1px;
        padding: 0;
    }
    .horizontal-navigation-bar ul li a {
        background: #bbb;
        color: #333;
        font: bold 12px Verdana, Arial, Helvetica, sans-serif;
        display: block;
        line-height: 26px;
        margin: 0 0px;
        padding: 0 20px;
        text-decoration: none;
    }
    .horizontal-navigation-bar ul li a:hover,
    .horizontal-navigation-bar ul li a.active {
        background: #fff;
        color: #000;
    }
    .clr {
        clear: both
    }
</style>


No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.