O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Tabbed Navigation Bars

One of the navigation graphics commonly used within some of the major e-commerce sites is the tabbed navigation bar. Take a look at Amazon.com or similar sites to find lots of tabbed navigation bars. Often, the tabbed navigation bar is combined with menu choices or drop-down menus (such as that shown in Chapter 11) in the space below the navigation tabs.

To demonstrate how to create a tabbed navigation bar in SVG, I show you how to create a possible navigation bar for S-V-G.com with links to a number of other SVG and XML technology-related sites. Figure 05.10 shows the finished product with one of the tabs moused.

Figure 05.10. A tabbed navigation bar demonstrating a rollover effect on the tab being moused.

The first ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required