Blue Discus Systems - Web Navigation Samples

Website Navigation Features and Styles


	The links are non-functional on this sample page - clicking on the navigation links will NOT change to another web page or have any other effect, except for expanding and collapsing vertical menus and trees.


	Other Behaviours - such as popup displays, changed content, animation and more - can be invoked by clicking on such links.


	It is often useful to implement several navigation styles within a website. This accommodates differences in the style people scan and navigate web pages. It also helpful to have a link directly within context in a page.


	Be Search Engine Friendly Search engines try to scan through all web pages within a web site in order to index all pages. To do this well, all pages should be accessible via a chain of links from the site's main or Home page. Linking to a Site Map or providing Footer Text Links are effective ways to insure that all of your pages are scanned by the engine's "spiders".


	Site Searches Searches are a very effective way to allow visitors to find site content.


	Drop-Down Links Space-saving Drop Down Links can also be effective for Site Navigation.


	Website Navigation Features & Styles Examples of website navigation link presentations. Links to Page Sections Vertical Navigation Menus and Trees Site Searches Drop-Down Links Horizontal Menu Bars and Drop-Down Menus Icons, Icon Bars and Tool Bars Breadcrumbs Image Menu Buttons Other Image Links Image Maps, Hot Spots and Slices Sequence Navigation Inline Text Links Site Map Footer Text Links

Vertical Navigation Menus and Trees

Vertical Navigation Menus and Trees are very effective site navigation tools (usually displayed in sidebars). The follow examples below show some of the varieties of the styles and features that can be used.

The With Animation example shows a general animation effect when the screen loads (expand it fully and then refresh the page to see it all). The same type of animation will occur when expanding and collapsing Menu 1 (other levels will animate a more standard expand or collapse effect).

NOTE: Animation is disabled for Opera browsers.

Legend:

= Expand All

= Collapse All

Colors Bars & Images

With Animation

Tree Style 1

Tree Style 2

< Back to Top >

Horizontal Menu Bars and PopUp Menus

The Horizontal Menu Bar (top) is a typical site navigation approach. The top example also includes a PopUp Menu, which also can be attached to each menu item as well as to other elements (images, text links, etc.) on the web page. Popup Menus can be placed horizontally as well as vertically and can also be invoked by clicking and right-clicking as well as by hovering (as above).

Navigation Tabs (below) are another common example of a Horizontal Menu style.

	Home			About Us			Services

Images of some other horizontel menu styles (images are smaller than real size):

< Back to Top >

Icons, Icon Bars and Tool Bars

Icons, Icon Bars and Toolbars can also be used for page navigation as well as to invoke other functionality.

You can use standard icons, styles and sizes, or customize them uniquely.

< Back to Top >

Breadcrumbs

Breadcrumbs display the path through the website to your current page and allows an easy way to retrace your steps. The path can reflect the site's hierarchal structure and/or the specific sequence you traveled within the website.

Home > Services > Consulting

< Back to Top >

Image Menu Buttons

Image Buttons can be used for navigation menus (horizontal or vetical) or as stand-alone buttons. The images can either be static or dynamic. Most of the below examples are dynamic with rollover images that change the image when hovering over it. In most of the examples below, the 'Home' button shows the button image for the current 'page' (which is slightly different than the other page button images to indicate which page you are currently on).

The following examples show some of the many possibilities. Most, if not all, can be arranged vertically or horizontally.

< Back to Top >

Other Image Links

Links on images can be very effective - with or without a rollover image.

< Back to Top >

Image Maps, Hot Spots and Slices

Segments - hot spots and slices - of an image can be used for navigation links. A static rectangular or irregularly shaped area can become a hotspot. Rectangular slices can be animated with another rollover image, as in the below simple example.

< Back to Top >

	Sequence Navigation

	When a series of web pages form a natural sequence (such as for tutorials and other natural series), typical navigation links and/or buttons (as below) are effective to lead the visitor through the sequence. << First \| < Previous \| Next > \| Last >> < Back to Top >

Inline Text Links

Links within text sections allow for easy navigation within context, as illustrated in the following short example:

Our staff just returned from touring Indonesia aboard the Adaline cruise ship. Among our fascinating adventures ... Read more...

< Back to Top >

Site Map

A Site Map will display an organized listing of every page within a web site allowing visitors to navigate to all accessible pages from one spot.

Home Page

About Us

Services

    Software Development

    Web Design & Development

    Technologies

etc., etc. ....

< Back to Top >

	Footer Text Links

	Footer Text Links provide alternative access to all (or the primary) web pages within the site. See below... < Back to Top >