Navigation

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 <nav> 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 <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 <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.

Old	New	Date Created	Author	Actions
		February 27, 2015 @ 08:59:04	Mr H
		February 27, 2015 @ 08:58:49 [Autosave]	Mr H
		February 27, 2015 @ 08:57:40	Mr H
		February 27, 2015 @ 08:56:51	Mr H
		January 30, 2015 @ 18:26:21	Mr H
		January 30, 2015 @ 18:24:51	Mr H
		January 30, 2015 @ 17:12:00	Mr H
		January 30, 2015 @ 17:03:59	Mr H
		January 30, 2015 @ 16:48:25	Mr H
		January 28, 2015 @ 18:09:03	Mr H
		January 28, 2015 @ 18:02:25	Mr H
		January 28, 2015 @ 18:01:44	Mr H
		January 28, 2015 @ 18:01:15	Mr H
		January 28, 2015 @ 17:58:38	Mr H
		January 28, 2015 @ 17:56:23	Mr H
		January 28, 2015 @ 15:20:00	Mr H
		January 28, 2015 @ 15:19:19	Mr H
		January 28, 2015 @ 15:17:21	Mr H
		January 28, 2015 @ 15:16:20	Mr H
		January 28, 2015 @ 14:59:05	Mr H
		January 28, 2015 @ 14:58:28	Mr H
		January 28, 2015 @ 14:57:47	Mr H
		January 28, 2015 @ 14:55:06	Mr H
		January 28, 2015 @ 14:53:53	Mr H
		January 28, 2015 @ 14:49:49	Mr H
		January 28, 2015 @ 14:38:11	Mr H
		January 28, 2015 @ 14:37:38	Mr H
		January 28, 2015 @ 14:24:39	Mr H
		January 28, 2015 @ 14:24:14	Mr H
		January 28, 2015 @ 14:22:24	Mr H
		January 28, 2015 @ 14:16:56	Mr H
		January 28, 2015 @ 14:11:52	Mr H
		January 28, 2015 @ 14:11:32	Mr H
		January 28, 2015 @ 14:10:25	Mr H
		January 28, 2015 @ 14:08:51	Mr H
		January 28, 2015 @ 14:08:21	Mr H
		January 28, 2015 @ 14:05:35	Mr H

Revision for “Navigation” created on February 27, 2015 @ 08:59:04

Search

Tag Cloud

Popular Wikis