Webpage Navigation
Some Important Considerations

    Webpage Navigation will depend on how your Total Website is Structured... and will vary between different Sections of your site... but several important factors should be considered overall...

• Ease Of Use... Visitors to your site must be able to EASILY Navigate to other pages... so your Nav Areas should be Easily Accessible... which means that, generally it is best to place Nav Areas near the Top of your page, and again at the Right or Left sides of your page, and again near the Bottom of your page...
• Consistancy... Visitors need to find your Nav Areas easily, so being Consistant in placing your Nav Areas in the SAME PAGE LOCATIONS throughout your pages (within each section of your site) is a MUST if you want visitors to stay on your pages...
• Multiplicity... Visitors tend to Skim Thru Pages Quite Rapidly, and they might overlook Nav Areas unless they are placed multiple times in at least TWO LOCATIONS on each page...
• Navigation Type... Using TAB STYLE Navigation requires (in most cases) Javascript Coding, and infrequently JS might be either DISABLED or "Not Functioning" correctly in the Browser (due to code errors, from YOUR Code), so it is a MUST to provide secondary "back-up" Nav Areas, that use simple "list-type" or "table-type" display, which will Always Be More Likely to function correctly on the page...

IMPORTANT: Since small screen devices (like smart phones) have become very popular for web browsing, it becomes necessary to use a "Javascript Menu" style navigation, which is run by Javascript, to carefully conserve screen real estate! EXAMPLE: Begin scrolling down then Look Up at the top of this page... You can find many scripts for this type of navigation at Dynamic Drive or by Googling for it! Or for this specific type (look above at top of this page) Look Here

• Destination Target... When a visitor clicks a Nav Area link to goto another page, you must decide if you want that page to open in the Same Browser Window, or in a New Browser Window (in a new Tab, for Tab Browsers) ...and so to return to your current page, a visitor will have to use their Browser "Back Button" if you open the page in the Same Browser Window, or else the visitor can simply "Close The New Tab" (if you set target="_blank" in your link code) to open the page in a New Browser Window... and then they will REMAIN on your current page... so often you actually WANT visitors to REMAIN on your current page and simply "point out" another page to them, so to speak...

Navigation Examples

     Here's an example of Tab Navigation...

CSS Coding makes the Tab Areas "become underlined" as you mouseover them...

There are many easy Copy & Paste Tab Style Menus available to use, and you need to decide what is BEST for YOUR Page, if you want to use them... also there are Horizontal as well as Vertical Styles to choose from... Check out Dynamic Drive's CSS Library ... they provide all the code and files and instructions for you to Copy & Paste and/or Download to your computer... then of course you need to set up all the code and scripts to suit your specific requirements and then of course FTP these files to your Host Server...

     Here's an example of Table Style Navigation...

Table Coding presents the Nav Area links to pages, CSS Coding makes the link text "change color" as you mouseover them...

You can find help with HTML Tables Coding for Presentation at My Custom Tables Page

NOTE: Using SSI (Server Side Include) is a Very Helpful and Time Saving way to place your Nav Areas into your source code... Read more about SSI Here

     Throughtout this page's content area, you'll find linked Text Words... this is an example of Inline Navigation. Once again you need to decide if you want the links to open in the same Browser window, or in a new window...

     Next, Look at some of my Design Pages to see the Previous/Next Style Navigation at the bottom of Those Pages... and you'll see how visitors can navigate back and forwards thru my Design Series Pages... This type of Nav Area is often useful if you have content that you are trying to "string-out" or "continue" from page to page, so to speak... you can see how CSS Coding (in my main stylesheet) makes the link text "change color" as you mouseover them...

Now let's discuss Tab style navigation that has "dropdowns" within it... usually indicated by a "little down arrow" ( ▼ )... so these dropdowns can be made by using Javascript which is well known, but a simpler construct can be made by using only CSS codes...READ ABOUT IT HERE ... here's an EXAMPLE image of one:

But it only works with CSS HOVER coding, which does NOT function on small screen devices, like Tablets or Smartphones!

How kool it would be if you could make it a Clickable Dropdown so that those Devices could actually SEE the dropdown menues... by Taping on the Tab?

YES it can be done... READ ABOUT IT HERE ... here's an EXAMPLE of one:

This concludes my discussion on Webpage Navigation...