Navigation Bar

CSS Designing

Horizontal Navigation Bar Designing 

Hello friends,

Navigation Bar in any webpage is very important. Navigation Bar is the only things which is used by the visitors on your website to visit the webpages. So, The navigation bar should be appealing & stylish. In this blog, I am presenting you with a basic starting layout of navigation with which you can play & make it more stylish & elegant. 

Here is the HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>NAV Styling Demo</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header"><h1>My First Web Page</h1></div>
<div class="nav">
    <ul class="navmain">
        <li class="navmenu"><a href="#">Home</a></li>
        <li class="navmenu"><a href="#">About</a></li>
        <li class="navmenu"><a href="#">Contact</a></li>
    </ul>
</div>
</body>
</html>

& CSS code is here:

.header{
    width:50%;
    margin:auto;
    text-align:center;
}

.navmenu{
    float: left;
   
}

.navmain{
    height:50px;
    background-color: grey;
    list-style-type: none;
    margin:0;
    padding:0;
   
}

.navmenu a{
    text-decoration: none;
    display:block;
    color:black;
    padding: 14px 16px;
}
.navmenu a:hover{
    background-color: black;
    color:white;
}


The Web Page will look like :




Here is the step -by -step video tutorial detailing every step in creating the above navigation bar.

 

Code for the above Navigation Bar

Use the code & make it more creative & stylish...
Dont forget to comment a snapshot of your navigation bar

Comments

Post a Comment

Popular posts from this blog

CSS Colors

Image
There is no need to tell the importance of colors. But it is the most ignorable aspect of web designing & development cycle. Color should be considered with care for every design decision, particularly on websites. Chances are, if we don’t like the color palette, we’re not going to stay on the site for very long. Suppose if we visited a website having a dull color scheme, are we going to stay longer on such website? Now consider another website, in which , color scheme is very well selected & more appealing, we stay a little bit longer. The proper selection of color will make a website appealing, attracting & create a positive impact on the visitor. In CSS, we can define colors by four ways: By The name of color By defining the HEX value By defining the RGB value By defining the HSL Value There are two more ways of doing this: By defining the RGBA value By defining the HSLA value => RGB (Red, Green, Blue) rgb(0,255,132) value Can be anythi...
Read more

CSS Combinators & multi selectors

Image
CSS Combinators CSS Combinators are the means to select multiple selectors in a HTML document. CSS Combinators show the relationship between different selectors of the HTML. Before describing about Combinators, let us first clear the concepts about siblings, descendants & child. In laymen terms, Siblings are the elements present in the same level. Descendants & Child refer to the elements which are under a specified parent element. Let us clear this concept with the help of family members. Consider a family which consists of Grandparents, Parents & Their Children. In the above family tree, there are three levels: First Level, Second level & Third level. First Level consists of Grandparents. Second Level consists of Parent A & Parent B. Third Level consists of Child A, Child B & Child C. With reference to above family tree, Parent A, Parent B, Child A, Child B, Child C are the descendants of Grandparents. Parent A ...
Read more