Horizontal navigation bar in CSS


How to create custom navigation? 
It depends on the HTML and CSS: because giving a good look and feel. When you need hover effect then we use "display: block" at the navigation button and give color as you wish background or the color as explained below example: 

Horizontal navigation bar in CSS, create custom navigation bar in CSS. You will find look like as given below image:


HTML Code:

<![endif]-->
<nav>

    <ul>

        <li><a href="#">Contact</a></li>

        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li class="active"><a href="#">Home</a></li>
    </ul>
    <div class="clr"></div>
</nav> 



CSS Code:

<style>

    * {

        margin: 0;

        padding: 0;
    }
    ul {
        list-style: none;
    }
    body {
        background: #00ccff;
    }
    nav {
        float: right;
        width: 600px;
        margin: 50px 0 12px 0;
    }
    nav ul {
        margin-left: 22px;
    }
    nav ul li {
        position: relative;
    }
    nav li a {
        color: #000;
        display: block;
        border-radius: 4px;
        float: right;
        font: normal 16px/30px 'Open Sans', sans-serif;
        height: 30px;
        margin-left: 4px;
        padding: 0 13px;
        text-align: center;
        text-decoration: none;
    }
    nav li a:hover,
    nav li.active a {
        color: #000;
        background: #fff;
    }
    nav li a:active {
        background: #01a2ca;
    }
    .clr {
        clear: both
    }
</style>
 


No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.