lab#10 navigation, links and hover rollovers
DESCRIPTION
Navigation bar, link, hover rollover, how to design navigation bar, Good Navigation ,exampleTRANSCRIPT
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