Navigation Tab using HTML5 and CSS3 - No JavaScript

Web Project

Share

In this project we will make navigation tab using HTML5 and CSS3 and no JavaScript.

Requirement

For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.

In the above video Brackets has been used which is an open source software and can be downloaded from their website brackets.io

 

Files

For this project we will write all the code in an tab.html page but you can separate the code into different files if you want.

tab.html


<!DOCTYPE html>
<html>
    <head>
        <title>Navigation Tab</title>
        <style>
            header#page_header nav ul li{
                list-style: none;
            }
            
            a{
                text-decoration: none;
                float: left;
                height: 40px;
                line-height: 40px;
                padding: 0 10px;
                margin: 0 5px;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                background-color: #12aa21;
                font-size: 20px;
                color: #ffffff;
                font-family: arial, verdana, sans-serif;
            }
            
            a:hover{
                background-color: #432234;
            }
        </style>
    </head>
    <body>
        <header id="page_header">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>