Lab#10 navigation, links and hover rollovers
1 like869 views
Navigation refers to the links and menus on a website that allow users to move between different pages and sections. Effective navigation should be easy to use, learnable, and indicate the user's current location. When designing a navigation menu, it is important to start with information architecture and use simple, intuitive labeling. Navigation menus can be vertical lists or horizontal bars, and different link states like visited, hovered, and active can be customized with CSS. The document provides examples of code for different types of navigation menus and links.
Lab#10 navigation, links and hover rollovers
- 1. LAB#10 Navigation, Links and Hover Rollovers 322432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas
- 2. Menu Navigation means? Links Navigation Bar = List of Links Vertical Navigation Bar Horizontal Navigation Bar
- 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.
- 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
- 5. Type of Navigation Main Menu Secondary Example Catalogs, Chapters Help menu Example Search Box, Image Map
- 6. Good Navigation ? - Easy to use - Learnability - Simple, User friendly - Mega Drop-Down - Where You Are - Back to homepage
- 7. 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.
- 8. 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
- 9. 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.
- 10. 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
- 11. 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
- 13. 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
- 14. 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 ………………*/
- 15. <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
- 16. Example-2 a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
- 17. 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?
- 18. 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>
- 19. Horizontal Navigation Bar li { display:inline; }
- 20. ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; } Example3
- 21. Assignment LAB#10 -Creating your project “Science Web” followed your site map 4 html pages Example About us, Programs, Service, Contact us