LAB#10 Navigation, Links

and Hover Rollovers 322432 Web Design Technology

By Yaowaluck Promdee, Sumonta Kasemvilas

Menu

Navigation means?

Links

Navigation Bar = List of Links

Vertical Navigation Bar

Horizontal Navigation Bar

Navigation

Navigation is a section of website or online

page intended to aid visitors in traveling

through the online document.

These sections of the webpage will

include links to the most important sections

of the site.

“ The navigation menu on the website is like

a road on a street or a level directory in a

shopping mall. You can’t reach your

destination without first knowing where you are.”

By Tomas Laurivicius

Type of Navigation

Main Menu

Secondary

Example Catalogs, Chapters

Help menu

Example Search Box, Image Map

Good Navigation ?

- Easy to use

- Learnability

- Simple, User friendly

- Mega Drop-Down

- Where You Are

- Back to homepage

Designing A Winning Navigation Menu: Ideas And Inspirations

By Tomas Laurinavicius. Filed in Web Design

From : http://www.hongkiat.com/blog/navigation-design-ideas-inspiration/

Information Architecture

Navigation planning should start

with information architecture. It

is vital to sit down and

brainstorm about a website’s

information architecture.

Using User-Enabled Technologies

Avoid using Flash, JavaScript, jQuery or anything else that risk inhibiting access to your website navigation in building

your navigation bar, or at least make sure they are able to degrade gracefully.

http://www.hongkiat.com/blog/css-javascript-fallback-methods/

Example

x Rounded Corners With Images

x JQuery Dropdown Menu System

X Targeted Internet Explorer Styles

Use Simple, User-Friendly Terms

It is better to use simple, obvious and terms that are easy

to figure out than to keep to industry-only terms for your navigation menu.

Indicate Where You Are

It is crucial to let the user know where he is at all times. You

can do this by changing the link’s background, color of the

page name or turn the text bold in the navigation menu to make it different from others. Breadcrumb navigation

Use Web Conventions

It is all about easy-to-use and intuitive website navigation. Web

conventions make it a lot easier for designers to work around their

designs. Most users would click on the website logo to get back to the homepage, so design your logo to do that.

You can learn more about web conventions here:

• 10 Web Design Conventions

• Don’t Reinvent the Web Design Wheel

• Design With Web Conventions

Links

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

Example-1 /*CSS*/ .linkbox a:link {color: #FF0000} /* unvisited link ………..*/ .linkbox a:visited {color: #00FF00} /* visited link ……………..*/ .linkbox a:hover {color: #FF00FF} /* mouse over link pink color */ .linkbox a:active {color: #0000FF} /* selected link ………………*/

<a href="css_chapter01.html">Chapter1</a>

<a href="css_chapter02.html">Chapter2</a>

<a href="css_chapter03.html">Chapter3</a>

<a href="css_chapter04.html">Chapter4</a>

<a href="css_chapter05.html">Chapter5</a>

Ex.1- HTML

Example-2

a:link {background-color:#B2FF99;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

a:active {background-color:#FF704D;}

Navigation Bar = List of Links

<ul>

<li><a href=”home">Home</a></li>

<li><a href="news">News</a></li>

<li><a href="contact">Contact</a></li>

<li><a href="about">About</a></li>

</ul>

ul { list-style-type:none; margin:0; padding:0; }

Show?

Vertical Navigation Bar

a { display:block; width:60px; }

/* HTML */

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

Horizontal Navigation Bar

li { display:inline; }

ul {

list-style-type:none;

margin:0;

padding:0;

overflow:hidden; }

li { float:left; }

a {

display:block; width:60px;

background-color:#dddddd; }

Example3

Assignment LAB#10

- Creating your project “Science Web”

followed your site map 4 html pages

Example

About us, Programs, Service, Contact us