What's a navigation?, how to create a navigation bar, Good design of navigation, Links and hover rollover. Navigation design with CSS and HTML.

1. NAVIGATION, LINKS AND
HOVER ROLLOVERS
322432 Web Design Technology
By Yaowaluck Promdee, Dr.Sumonta Kasemvilas
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 1

2. Meaning of Navigation
Links
Navigation Bar = List of Links
Vertical Navigation Bar
Horizontal Navigation Bar
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
INTRODUCTION
Web Design Technology - 2015 2

3. 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.
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 3

4. “ 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
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 4

5. TYPE OF NAVIGATION
• Main Menu
• Secondary Example Catalogs, Chapters
• Help menu Example Search Box, Image Map
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 5

6. GOOD DESIGN NAVIGATION
• Easy to use
• Learnability
• Simple, User friendly
• Mega Drop-Down
• Where You Are
• Back to homepage
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 6

7. GOOD DESIGN NAVIGATION > EASY TO USE
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
EASY TO USE
Navigation should be a prominent element of your design.
Web Design Technology - 2015 7

8. GOOD DESIGN NAVIGATION > EASY TO USE
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
EASY TO USE
Web Design Technology - 2015 8

9. GOOD DESIGN NAVIGATION > LEARNABILTY AND SIMPLE
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
LEARNABILITY AND SIMPLE
Web Design Technology - 2015 9

10. GOOD DESIGN NAVIGATION > WHERE YOU ARE
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
WHERE YOU ARE
Breadcrumb Navigation
Web Design Technology - 2015 10

11. GOOD DESIGN NAVIGATION >
WHERE YOU ARE >
IN THE PROCESS
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
WHERE YOU ARE
Web Design Technology - 2015 11

12. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
LINKS
WDS
CS KKU
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouse over it
a:active - a link the moment it is clicked
Web Design Technology - 2015 12

13. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
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; }
Output?
WDS
CS KKU
Web Design Technology - 2015 13

14. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
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>
WDS
CS KKU
Web Design Technology - 2015 14

15. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Horizontal Navigation Bar
li { display:inline; }
WDS
CS KKU
Web Design Technology - 2015 15

16. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
/*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 ………………*/
WDS
CS KKU
EXAMPLE1
Web Design Technology - 2015 16

17. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
EXAMPLE 2
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
WDS
CS KKU
Web Design Technology - 2015 17

18. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden; }
li { float:left; }
a {
display:block; width:60px;
background-color:#dddddd; }
EXAMPLE3
WDS
CS KKU
Web Design Technology - 2015 18

19. ASSIGNMENT#10
WDS
CS KKU
Creating your project “ Personal Blog” followed your
site at least 4 html pages Example Home, About
me, Lab, Lesson, and etc.
Web Design Technology - 2015 19