Navigation

Home » Navigation

Edit

Navigation refers to the system that allows visitors to a website to move around that site.

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 &lt;nav&gt; tag for creating your navigation elements:
<iframe src="http://jsfiddle.net/mapster86/wy6vgbvL/embedded/html,result" width="100%" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
NOT all links of a document should be inside a &lt;nav&gt; element. The &lt;nav&gt; element is intended only for major block of navigation links, such as a navigation bar.

You can also build your navigation bar using the &lt;table&gt; tag.  However, this method is a bit outdated and it's recommended you use the &lt;nav&gt; tag or <a title="CSS" href="http://code.emrysproductions.com/wiki/css/">CSS</a>.

It's recommended you read the Wiki on creating a <a title="Table" href="http://code.emrysproductions.com/wiki/table/">table</a> before trying this so you understand the elements involved:
<iframe src="http://jsfiddle.net/mapster86/kap7u3ou/embedded/html,result" width="100%" height="160" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

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:

<strong>Horizontal Navigation 1</strong>

Horizontal navigation bars are becoming standard place in websites.  In this example the hover CSS attribute has been used along with a CSS transition.

<strong>Vertical Navigation 1</strong>

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.

<span style="font-size: 14pt;"><strong>Other Navigation Examples:</strong></span>

<strong>Horizontal Navigation 2</strong>

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.

Cancel

Navigation

Edit

Search

Tag Cloud

Popular Wikis