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

  1. 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...
  2. 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...
  3. 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...
  4. 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: Look up at the top left corner of this page... You can find many scripts for this type of navigation at Dynamic Drive or by Googling for it!

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

     Look Up at the top area of THIS PAGE ... you'll see an example of Tab Navigation...

You'll see how 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...

You'll see how HTML Table Coding presents the Nav Area links to our other pages, and how CSS Coding (in our main site stylesheet) makes the link text "change color" as you mouseover them...

ALSO you might want the Tabs to "Move Down The Page As You Scroll Down" (as you see our Tabs Do Infact "remain in constant view, which becomes extremely helpful for users to navigate without having to scroll back up to the top of the page")... and so, you can use Javascript Coding to achieve this kool result... Find The Script Here

     Next, Look over to the LEFT SIDE AT THE TOP OF THIS PAGE... and you'll see an example of Javascript Menu Style Navigation...

You can find many scripts for this type of navigation at Dynamic Drive or by Googling for it!

     Next, Look over to the LEFT SIDE OF THIS PAGE... and you'll see an example of Table Style Navigation...

You'll see how HTML Table Coding presents the Nav Area links to our other pages, and how CSS Coding (in our main site stylesheet) makes the link text "change color" as you mouseover them...

You can find help with HTML Tables Coding for Presentation at Our 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...

     Finally, Look at some of our Design Pages to see the Previous/Next Style Navigation of Those Pages... and you'll see how visitors can navigate back and forwards thru our 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 our 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:

image

You can see it in action on Our Intro Page (if you use a PC)

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:

image

You can see it in action on Our Furniture Page (if you use a PC) by using a Tablet or iPad or any other Device that has a touch screen! Viewing it on a PC will still show the HOVER effect!

This concludes our discussion on Webpage Navigation...