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

Get Designing SVG Web Graphics now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.