• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 5. Creating Navigation Bars > Text Navigation Bars

Text Navigation Bars

A text navigation bar has just about the simplest design you can create. The code for a three-page text navigation bar is shown in Listing 5.10. The purpose of the deep blue rectangle is simply to show you the boundary of the navigation bar. The navigation bar is contained within a nested <svg> element. If you want to move the navigation bar slightly up or to the side (or even to the right side of the page), you can do that by changing only the x and y attributes of the nested <svg> element and maintaining the relative positioning of everything inside it.

Listing 5.10. (TextNavBar01.svg)

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
      "http://www.w3.org/TR/2001/PR-SVG-20010719/ 
       DTD/svg10.dtd"> 
<svg width="200" height="600"> 
<rect x="150" y="0" width="50" height="600" 
style="fill:#000099"/> 
<svg x="0" y="0"> 
<a xlink:href="Page02" id="Page02Link"> 
<text x="20" y="30" style="font-family: Arial, 
sans-serif; font-size:12; fill:#000099; 
stroke:#000099"> 
<set attributeName="stroke" 
begin="Page02Link.mouseover" end="Page02Link.mouseout" 
 to="#FF0066"/> 
<set attributeName="fill" begin="Page02Link.mouseover" 
 end="Page02Link.mouseout" to="#FF0066"/> 
Page 02 
</text> 
</a> 
<a xlink:href="Page03" id="Page03Link"> 
<text x="20" y="60" style="font-family: Arial, 
sans-serif; font-size:12; fill:#000099; 
stroke:#000099"> 
<set attributeName="stroke" 
begin="Page03Link.mouseover" end="Page03Link.mouseout" 
 to="#FF0066"/> 
<set attributeName="fill" begin="Page03Link.mouseover" 
 end="Page03Link.mouseout" to="#FF0066"/> 
Page 03 
</text> 
</a> 
<a xlink:href="Page04" id="Page04Link"> 
<text x="20" y="90" style="font-family: Arial, 
sans-serif; font-size:12; fill:#000099; 
stroke:#000099"> 
<set attributeName="stroke" 
begin="Page04Link.mouseover" end="Page04Link.mouseout" 
 to="#FF0066"/> 
<set attributeName="fill" begin="Page04Link.mouseover" 
 end="Page04Link.mouseout" to="#FF0066"/> 
Page 04 
</text> 
</a> 
</svg> 
</svg> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint