Navigation Bar - Sample Implementation of A Navigation Bar

Sample Implementation of A Navigation Bar

A one level navigation bar is a sectioned portion of a web page that does not include any drop down menus. A typical and simple implementation of this type of bar will include two web based programming languages: HTML and CSS. Typically the HTML code will consist of a an un-ordered list and number of list elements holding anchor tags such as the following code:

Using some basic CSS web designers can change the look and feel of navigation system to fit the overall design or theme of web document. Here is how some sample CSS code may look:

ul {


padding: 0 0 0 0;


margin: 0 0 0 0;


text-decoration: none;


list-style-position: inside;


}



li {


padding: 1em;


text-decoration: none;


list-style-type: none;


padding-top: 1em;


}

#main-nav {


font-variant: small-caps;


margin-top: 2em;


margin-left: 1em;


width: 200px;


}