banner

banner

banner

banner

Webpage Navigation
Some Important Considerations

Tables---Templates

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

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!

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

     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!

     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 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 at the bottom 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

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

Look Up at the top of this page and you'll see our "Cartoon Image Link" Navigation... you can find Images at Google Images and use your favorite Image Editor to create Images of a certain size... to make these types of links... then decide how to place them on your page so that they will be appropriately visible to all screen sizes especially smart phone screens! Use the CSS @media Rule to do this in your style sheet...

This concludes our discussion on Webpage Navigation...

Continue with help pages...use the links below...

Tables---Templates