Navigation bar

From Wikipedia, the free encyclopedia

A navigation bar or (navigation system) is a section of a website or online page intended to aide visitors in travelling through the online document. Typically, webpages will have a primary navigation bar and a secondary navigation bar on all pages of the web document. These sections of the webpage will include links to the most important sections of the site. The implementation and design of navigation bars is a crucial aspect of web design and web usability.

Sample implementation

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 an un-ordered list and number of list elements holding anchor tags, such as the following code:

<div id="main-nav">
<ul>
<li><a href="1.html">Section 1</a></li>
<li><a href="2.html">Section 2</a></li>
<li><a href="3.html">Section 3</a></li>
<li><a href="4.html">Section 4</a></li>
<li><a href="5.html">Section 5</a></li>
<li><a href="6.html">Section 6</a></li>
</ul>
</div>

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;

}

See also

  • Web template

References


This article is issued from Wikipedia. The text is available under the Creative Commons Attribution/Share Alike; additional terms may apply for the media files.