CSS Navigation Bar

When it comes to a website, one of the most important qualifications in order to judge its merits is the navigation bar. It has to be easy to use and go through. With CSS you can turn a simple looking navigation bar from CSS and make it look exciting and better looking.

The CSS Navigation Bar

When you use the CSS navigation bar you would have the advantage of being able to create a dynamic navigation bar without having to resort to specialized scripting in order to accomplish that. You just have to know some basic HTML and CSS of course and you would be able to accomplish a great deal.

Writing the HTML

The first thing that you need to do is to create the HTML. The main thing that would distinguish the CSS navigation bar from regular HTML is the id which would show like this: <ul id=”navigation-bar”>. By putting that id, not all of the codes there would be automatically turned into navigational bars.</ul>

CSS Makes it Special

If you just leave the usual HTML then your navigation bar would appear just the usual kind. By adding a few lines of CSS on it, you would be able to make it look like a stunning CSS navigational bar instead. Here is an example of code for a CSS navigation bar:

#navigation-bar {
list-style: none;
margin: 0px;
padding: 0px;
}

 

Vertical Navigation Bar

Most navigation bars are horizontal rather than vertical. Sometimes you might want to change that and switch over to a vertical navigation bar. This might make it look more interesting and would certainly be different. In order for you to achieve that, here is an example of a code that you can try:

{
display:block;
width:60px;
}

When you use block elements then you would be able to click on the whole area of the link and not just the link by itself. You would also be allowed to define the width of the area. Keep in mind that when you are using block elements that they would take up the whole width that’s available. That’s why you have to designate the actual area. For example; width:50px;. The width area would equal 50 pixels. Another reason why you have to define the width is because in some browsers you might end up with some unexpected results if you are not very careful.

Horizontal Navigational Bars

Most people would still prefer to use the more traditional horizontal navigational bars rather than the unusual vertical ones. You can create horizontal navigational bars either by using floating or inline items. If you would prefer that the links that you would be using should appear to be of the same size then you prefer to use the floating items.

Here is an example code on you can create a navigation bar using a floating elements:

li
{
float:left;
}
a
{
display:block;
width:60px;
}

 

Those are just some of the basic things that you need to know about CSS navigation bar.

Separator image .