Using icons in navigation


show more Using icons in navigation provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Site Navigation with CSS in Dreamweaver show less
please wait ...

Using icons in navigation

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 C...

Using icons in navigation
Video duration: 2m 14s 3h 24m Intermediate

Viewers:

Using icons in navigation provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Site Navigation with CSS in Dreamweaver

Subject:
Web
Software:
Dreamweaver
Author:
please wait ...