Join Joseph Lowery for an in-depth discussion in this video Using icons in navigation , part of Site Navigation with CSS in Dreamweaver.
- View Offline
- Exercise Files
The simplest form of CSS navigation is to take an unordered list of words or…phrases and convert it to clickable buttons.…To make it easier for site visitors to understand and remember navigation…elements, many designers are integrating small images, or icons, into their nav bars.…Let me show you a few examples.…Here is the Narwhal Company, and as you can see in their navigation up top,…they have very simple icons hand-drawn which light up and highlight when you roll over them.…
And if we go to a specific one, like Passport here, the icon stays lit up in that…color, showing the selected page.…Another one is from custom TORONTO, and here's some side navigation.…Very clean, informative icons showing the various categories.…When you roll over it, a highlight outlines the icons as well as the text and…shows the flyout menu in a bright purple color.…If you go to a specific page, you can see that they've reversed that concept to…show the current page.…
Another approach can be seen on the Carsonified site.…
- Using icons
- Navigating with Spry widgets
- Styling Spry menus
- Working with background images
- Implementing sprites
- Designing navigation with accessibility in mind
- Adding drop-down menus
- Developing graphical navigation with jQuery
- Creating pop-out vertical navigation
- Exploring CSS3 and HTML5 enhancements
Skill Level Intermediate
Layouts with CSS in Dreamweaverwith Joseph Lowery3h 33m Intermediate
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
1. Trends in Navigation Design
2. Spry Navigation
3. Navigation Techniques
4. Horizontal Navigation
5. Vertical Navigation
6. Internal and External Navigation
Identifying anchor tags7m 4s
7. Cutting-Edge Navigation
Using the HTML5 nav tag3m 24s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.