Navigation is most often thought of in terms of menus, but links within pages, breadcrumbs, related links, pagination, and any other links that allow a visitor to move from one page to another are included in navigation.
There are various different methods for creating your navigation on a website.
Since the adoption of HTML5 you are able to use the <nav> tag for creating your navigation elements:
NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links, such as a navigation bar.
You can also build your navigation bar using the <table> tag. However, this method is a bit outdated and it’s recommended you use the <nav> tag or CSS.
It’s recommended you read the Wiki on creating a table before trying this so you understand the elements involved:
nce you’ve got the basics down in Navigation you can then start styling it to suit your needs using CSS as is demonstrated by some of the examples below:
Horizontal Navigation 1
Horizontal navigation bars are becoming standard place in websites. In this example the hover CSS attribute has been used along with a CSS transition.
Vertical Navigation 1
Vertical navigation bars are still in use in some designs, usually in combination with horizontal navigation bars. Once again thsi example uses the hover and transition elements.
Other Navigation Examples:
Horizontal Navigation 2
This example is a lighter theme using the ‘hover’ feature to change the colour of the background and text when the cursor is over it.