What is navigation bar? How to create horizontal navigation bar?
- The bar that has several links to navigate the website.
- The navigation bar provides an easy navigation of webpage in a website.
- A collection of link that is formatted (to be a bar).
- Usually it looks vertical or horizontal depending to website.
Kinds of navigation bar.
Text Format navigation bar – Accepted by all browser, simple and easy to create navigation bar. Combination of link or
<a> element and formatted horizontally or vertically. Text Format navigation bar contribute, to reduce the loading time of website, but very boring or static to the eyes of its user. Example of text formatted navigation bar:
CSS navigation bar – Accepted by all browser depending to the CSS declared property (some CSS property are not compatible in user’s browser). Popularize because of CSS :hover selector. CSS navigation bar are fancy and eye catchy, in terms of loading time it depends to type of CSS used.
Graphics navigation bar – Focus on using image, choice of right icon contribute to the description and usability of the bar. The disadvantage of graphics navigation bar; it loads longer, because it compose many picture. If the picture failed to load, the link must have alt attribute/tag, serves as text alternative display.
Let’s create CSS horizontal navigation bar
In creating a navigation bar HTML was used as base, the CSS is also needed to provide the formatting and some website programmer add graphics to make it more eye catchy. But in our navigation bar we just use HTML and CSS. Then let’s start:
Essentially navigation bar is listing of links, so the
<ul> and <li> elements will be the perfect bone for the navigation bar. We will start by making nested <ul> and <li>.<ul id='navigate'>
<li>HOME</li>
<li>ABOUT</li>
<li>PRODUCT</li>
<li>SERVICE</li>
<li>FAQ</li>
</ul>
Then, when done in the code above you should have this following output:
Then make an External Style sheet, the filename of the style sheet should match the name declared in the
<link> tag. Example "<link rel="stylesheet" type="text/css" href="THE FILENAME MUST BE MATCH">".
Inside the external style sheet, declaration of right property and value is the key to transform the list link into, fancy and eye catchy navigation bar. The first step is, format the parent element of
<li> and that is <ul>, I decide to put ID attribute in <ul> because the CSS property of <ul> is unique. The CSS declaration of <ul> :#navigate li{
list-style:none;
float:left;
font-family:arial;
}
By correct typing this declaration into your external style sheet, you should have this output:
EXPLANATION: The symbol "#", meaning it's an ID, and the word after #, is the ID name (navigate). I’ve decided to remove the bullet decoration of each list items, so use the property list-style and assign the value none. Float property makes the block element go to the next block element, the value of float property is left, meaning the entire element that is inside of the parent element
<ul>, should align left.
The float explanation:
Then I set the font to arial by using font-family property.
My next step is, declaring the width of each
<li>:#navigate li{
width:10%;
}
I set the value to 10%, I use % unit so that, in any screen resolution, my navigation item/tab should always be 10%. I should look like this after applying the width:10% (image bellow):
Then after the declaration of width of each tab, let’s now transform it to navigation bar with background color and design. Before you can accomplish that you should add this CSS declaration first.
#navigate a{
display:block;
background-color:#fff000;
text-decoration:none;
font-weight:bold;
color:#1c8114;
padding:30px;
text-align:center;
}
With this CSS declaration above, "#navigate a" meaning that all element
<a> inside the parent element <ul> with the id name navigate, should be formatted depending to the declaration of property and value that we put inside of paired curly braces ({ }).
Then set the background color of each link tab by using background-color:#fff000, and remove the underline of the text using text-decoration, with the value of none. Also I make the font bold by using font-weight:bold, and change its color with the use of color:#1c8114, and align to the center of their tab,by using text-align:center. Lastly I put spacing on top and bottom of the text inside our navigation tabs, then I use this property and value padding:30px.
Your navigation bar should look like this:
The missing part of our navigation bar is the hover effect, then add this CSS declaration bellow.
#navigate a:hover{
color:#ffffff;
background-color:#1c8114;
}
When the user tries to select from the five(5) navigation tabs, tabs will eventual change its background color and text color accordingly to the declared property and style inside the #navigate a:hover, and it look like this(image bellow).
 |
| the user move the mouse cursor over the product tab |
That’s a simple and easy instruction on how to create a navigation bar and explanation what is navigation bar.
DOWNLOAD ProgramDWeb HORIZONTAL NAVIGATION BAR
