CSS3 > Navigation bar

Navigation bar in CSS3

How to create Navigation bar using CSS


Navigation bar

A set of buttons or images in a row or column that serves as a control point to link the user to sections on a Web site. The  navigation bar may also be a single graphic image with multiple selections, Navigation bar is very usefull to devolop the website .

List of links

A navigation bar needs basics of html, in order to create navigation bar we need to create the list of links

 <p><i>Links with list</i></p>
        <ul>
            <li><a href="http://www.dotnetfunda.com">DotnetFunda</a></li>
            <li><a href="http://www.techfunda.com">TechFunda</a></li>
            <li><a href="http://www.itfunda.com">ITFunda</a></li>
        </ul>

In the above code snippet we have the link with list We have created the link in the <ul>element to create the list to the link, the anchor tag <a> is inserted in the <li> tag to create the list to the link

output

 

Removing the bullets from the list

To create the navigation bar we need not to have the bullets in the list, we need to add the style as list style:none to remove the bullets in the list 

 <style>
        li{
            list-style:none;
        }
    </style>
</head>
<body>
    <p><i>Removing bullets in the list</i></p>
        <ul>
            <li><a href="http://www.dotnetfunda.com">DotnetFunda</a></li>
            <li><a href="http://www.techfunda.com">TechFunda</a></li>
            <li><a href="http://www.itfunda.com">ITFunda</a></li>
        </ul>
</body>

Removing bullets in list

In the above code snippet we removed bullets from list, we added list style as none to remove bullets in the list, the link <a> tag is given in the <li>element.

output

Vertical navigation bar

To arrange the list in the vertical we need to add a element in list<li>

<style>
        ul{
            list-style:none;
        }
        li a{
            display:block;
            width:85px;
            height:30px;
            background-color:green;
        }
    </style>
</head>
<body>
    <p><i>Adding list in vertical line</i></p>
        <ul>
            <li><a href="http://www.dotnetfunda.com">DotnetFunda</a></li>
            <li><a href="http://www.techfunda.com">TechFunda</a></li>
            <li><a href="http://www.itfunda.com">ITFunda</a></li>
        </ul>
</body>

Vertical navigation bar

In the above code snippet we have defined adding list in vertical line, to create the list in vertical shape we need to add the <a> tag in the list

display:block; - It adds the whole link as clickable

width - It adds width size of the block

output

Vertical navigation bar with hover

Hover is added to the vertical navigation bar, when the mouse is placed on the link it changes the background color of the link

 <style>
        ul {
            list-style-type: none;
            margin:0;
            padding:0;
            width: 120px;
            background-color: black;
        }
        li a {
            display: block;
            color: white;
            padding: 8px 0px 8px 16px;
            text-decoration: none;
        }
               li a:hover {
                background-color: green;
                color: red;
            }
    </style>
</head>
<body>
    <h2>Vertical Navigation Bar with Hover</h2>
    <ul>
        <li><a href="http:www.techfunda.com">TechFunda</a></li>
        <li><a href="http://www.dotnetfunda.com">DotNetFunda</a></li>
        <li><a href="http://www.itfunda.com">ITFunda</a></li>
        <li><a href="http://www.kidsfunda.com">KidsFunda</a></li>
    </ul>
</body>

Vertical navigation with Hover

In the above code snippet we have vertical navigation bar with Hover, we added the hover element a:hover properties as color red and background color as green, when the hover is placed on the link it changes the color and backgroundcolor of the link.

output

Vertical navigation bar in active state

Active is added to the link to get the link in active state

 <style>
        ul {
            list-style-type: none;
            margin:0;
            padding:0;
            width: 120px;
            background-color: black;
        }
        li a {
            display: block;
            color: white;
            padding: 8px 0px 8px 16px;
            text-decoration: none;
        }   
            li a:hover {
                background-color: green;
                color: red;
            }
            .active{
                color:black;
                background-color:red
            }
    </style>
</head>
<body>
    <h2>Vertical Navigation Bar with active</h2>
    <ul>
        <li class="active"><a href="http:www.techfunda.com">TechFunda</a></li>
        <li><a href="http://www.dotnetfunda.com">DotNetFunda</a></li>
        <li><a href="http://www.itfunda.com">ITFunda</a></li>
        <li><a href="http://www.kidsfunda.com">KidsFunda</a></li>
    </ul>
</body>

vertical navigation bar in active state

In the above code snippet we have the vertical navigation bar to add the link as active state and the link active is added to the <li> element

output

Navigation bar with center and border

In order to align the navigation bar in center, we need to add the textalign property and border to the <li> element

 <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: white;
            border: 1px solid black;
        }
        li a {
            display: block;
            color: green;
            padding: 8px 16px;
            text-decoration: none;
        }
        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }
            li:last-child {
                border-bottom: 2px solid green;
            }
            li a.active{
                background-color: red;
                color: white;
            }
            li a:hover:not(.active) {
                background-color: pink;
                color: white;
            }
    </style>
</head>
<body>
    <h2>Vertical Navigation Bar with borders and aligning the links in center</h2>
    <ul>
        <li><a class="active" href="http://www.techfunda.com">TechFunda</a></li>
        <li><a href="http://www.dotnetfunda.com">DotNetFunda</a></li>
        <li><a href="http://www.itfunda.com">ITFunda</a></li>
    </ul>
</body>

Text align 

In the above code snippet we have the text align property and border to align the text to the center and applying border to the list

output

Full height fixed vertical navigation bar

It creates the full height side navigation 

 <style>
        body {
            margin: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #808080;
            position: fixed;
            height: 100%;
            overflow: auto;
        }
        li a {
            display: block;
            color: black;
            padding: 8px 0 8px 16px;
            text-decoration: none;
            text-align:center;
        }
            li a.active {
                background-color: green;
                color: white;
            }

            li a:hover:not(.active) {
                background-color: red;
                color: white;
                text-align:left;
            }
    </style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">TechFunda</a></li>
        <li><a href="#news">DotNetFunda</a></li>
        <li><a href="#contact">ITFunda</a></li>
        <li><a href="#about">KidsFunda</a></li>
    </ul>

    <div style="margin-left:25%;padding:1px 16px;height:1000px;">
        <h2>Full-height Side Nav</h2>
        <p> Have a .NET related question or topic to discuss? Write a Post and get responses from community members. You can also respond to the existing posts and win monthly prizes as well as gain community credit points.
</p>
        <p> Have a .NET related question or topic to discuss? Write a Post and get responses from community members. You can also respond to the existing posts and win monthly prizes as well as gain community credit points.
</p>
        <p>
            Have a .NET related question or topic to discuss? Write a Post and get responses from community members. You can also respond to the existing posts and win monthly prizes as well as gain community credit points.

        </p>
<p> Have a .NET related question or topic to discuss? Write a Post and get responses from community members. You can also respond to the existing posts and win monthly prizes as well as gain community credit points.
</p>
    </div>
</body>

Fullheight side navigation bar

In the above code snippet we have created the side page with full height navigation bar beside the given navigation bar, we have the navigation bar width as 25%, we created the side page with the div element by giving the style as width with margin-left which starts the page from the side of the navigation bar

output

Horizontal navigation bar

It is used to create the links in horizontal manner

 <style>
                ul {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                }

                li {
                    display: inline;
                }
            </style>
        </head>
        <body>
            <p>Horizontal navigation bar</p>
            <ul>
                <li><a href="#home">TechFunda</a></li>
                <li><a href="#news">DotNetFunda</a></li>
                <li><a href="#contact">ITFunda</a></li>
                <li><a href="#about">KidsFunda</a></li>
            </ul>
        </body>

Horizontal navigation bar

In the above code snippet we have created horizontal navigation bar by using display:inline; we can create the links in the horizontal navigation bar

output

List with float items

To create the horizontal lists we have another method by using float in <li> element

<style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        li {
            float: left;
        }

            li a {
                display: block;
                padding: 8px;
                background-color: #808080;
                color:palegoldenrod;
            }
    </style>
</head>
<body>
    <p><i>Float is used to create horizontal navigation bar</i></p>
    <ul>
        <li><a href="#techfunda">TechFunda</a></li>
        <li><a href="#DotNetFunda">DotNetFunda</a></li>
        <li><a href="#ITFunda">ITFunda</a></li>
        <li><a href="#KidsFunda">KidsFunda</a></li>
    </ul>
</body>

List with FLoat

In the above code snippet we have created the horizontal navigation bar, w can create the horizontal navigation bar by using float:left which creates the navigation bar in horizontal

output

Float with background color

It creates the list with background color by using background color in the ul

 <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
            
        }

        li {
            float: left;
        }

            li a {
                display: block;
                padding: 8px;
                color:green
            }
    </style>
</head>
<body>
    <p><i>Float with background color</i></p>
    <ul>
        <li><a href="#techfunda">TechFunda</a></li>
        <li><a href="#dotnetfunda">KidsFunda</a></li>
        <li><a href="#itfunda">ITFunda</a></li>
        <li><a href="#farmingfunda">DotNetFunda</a></li>
    </ul>
</body>

Background color

In the above code snippet we have created the navigation bar with background color by using background color in the ulelement

output

Horizontal navigation bar with active links

In this we are creating the horizontal navigation bar with active links 

 <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }
            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
                li a:hover {
                    background-color: green;
                }
                .active{ background-color:limegreen;
                }                
    </style>
</head>
<body>
    <p><i>Horizontal navigation bar with active element</i></p>
    <ul>
        <li class="active"><a class="active" href="#home">ASP.NETMVC</a></li>
        <li><a href="#news">ANGULARJS</a></li>
        <li><a href="#contact">SQLSERVER</a></li>
        <li><a href="#about">jQUERY</a></li>
    </ul>
</body>

Navigation bar with active element

In the above code snippet we have created the navigation bar with active element by using class as active 

output

Active and current navigation bar

Active and current navigation bar defines the link will be in active state and current state

 <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }
            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
                li a:hover:not(.active) {
                    background-color:red;
                }

        .active {
            background-color: green;
        }
    </style>
</head>
<body>
    <p>Active and current Navigation bar</p>
    <ul>
        <li><a href="#home">TechFunda</a></li>
        <li><a href="#news">DotNetFunda</a></li>
        <li><a href="#contact">ITFunda</a></li>
        <ul style="float:right;list-style-type:none;">
            <li><a class="active" href="#about">Register</a></li>
            <li><a href="#login">Login</a></li>
        </ul>
    </ul>
</body>

Active and current navigation bar

In the above code snippet we have created the active and current navigation bar by using active element in the list

output

Horizontal navigation bar with borders

We can create navigation bar withe borders by using Border property

 <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
            border:1px solid pink;
        }
            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
                li a:hover:not(.active) {
                    background-color:red;
                }

        .active {
            background-color: green;
        }
    </style>
</head>
<body>
    <p>Navigation bar with borders</p>
    <ul>
        <li><a class="active" href="#techfunda">TechFunda</a></li>
        <li><a href="#DotNetFunda">DotNetFunda</a></li>
        <li><a href="#ITFunda">ITFunda</a></li>
        <ul style="float:right;list-style-type:none;">
            <li><a href="#FarmingFunda">Register</a></li>
            <li><a href="#login">Login</a></li>
        </ul>
    </ul>
</body>

Navigation bar with border

In the above code snippet we have the navigation with border, we use the border property to create the borders in the list

output

 

Navigation bar in the bottom

We can create the navigation bar in the bottom by using the bottom property

 <style>
        body {
            margin: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #808080;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        li {
            float: left;
        }

            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

                li a:hover:not(.active) {
                    background-color:black;
                }

        .active {
            background-color: green;
        }
    </style>
</head>
<body>
    <p><i>Navigation bar in bottom</i></p>
    <ul>
        <li><a class="active" href="#home">Articles</a></li>
        <li><a href="#news">Interviews</a></li>
        <li><a href="#contact">Forums</a></li>
        <li><a href="#about">Register</a></li>
    </ul>
    <div style="padding:20px;background-color:black;height:1500px;color:white">
        <h1>Fixed Bottom Navigation Bar</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>The navigation bar will stay at the bottom of the page while scrolling</h2>
        <p> Have a .NET related question or topic to discuss? Write a Post and get responses from community members. You can also respond to the existing posts and win monthly prizes as well as gain community credit points.</p>
        <p>Have a .NET related question or topic to discuss? Write a Post and get responses from community members. You can also respond to the existing posts and win monthly prizes as well as gain community credit points.</p>
        <p>Have a .NET related question or topic to discuss? Write a Post and get responses from community members. You can also respond to the existing posts and win monthly prizes as well as gain community credit points.</p>
        <p>Have a .NET related question or topic to discuss? Write a Post and get responses from community members. You can also respond to the existing posts and win monthly prizes as well as gain community credit points.</p>
    </div>

</body>

Navigation bar with bottom

In the above code snippet we have the navigation bar with the bottom property, we used the bottom property, we have vused the bottom as 0 which applies the given link to be in the bottom and the text is on the top of the page

output

 

 
          


 Views: 752 | Post Order: 127



Write for us