How to Create a Custom Navigation Bar

The RTML Tip section is intended for advanced Yahoo! Store users. It assumes that you have a basic understanding of how custom templates work and how to enter and change templates. If you are new to RTML, we recommend that you purchase one of the RTML books available here or at www.monitus.com. Look at http://www.ytimes.info/howtomodtem.html for a brief tutorial on how to modify and use customized templates.

The following example shows you how to replace the built-in graphical navigation bar with one that has regular text hyperlinks. To do this, you will need to create two custom templates and modify a built-in one.

The two custom templates to create are my-nav-bar and text-button. My-nav-bar is the template that will generate the navigation buttons (hyperlinks) based on the button settings in the store (the Buttons property of the home page and the Nav-buttons global variable.) This template is loosely based on the built-in nav-button template so it is easier to first copy that template and then change it to match the one shown below.


My-nav-bar ()

FOR-EACH variable but
         sequence OR
                    @buttons
                    @nav-buttons
  SWITCH but
    :help
    CALL :text-button 
      "Help"
      ACTION :help
    :search
    CALL :text-button 
      WITH-OBJECT :nsearch
        @name
      TO :nsearch
    :index
    CALL :text-button 
      "Index"
      TO :ind
    :info
    CALL :text-button 
      @info-text
      TO :info
    :show-order
    CALL :text-button 
      @show-order-text
      ACTION :show-order
    :empty
    CALL :text-button 
      ""
      nil
    :up
    CALL :text-button 
      "Up"
      TO OR
           up
           :index
    :next
    CALL :text-button 
      "Next"
      TO next
    :home
    CALL :text-button 
      @title
      TO :index
    :request
    CALL :text-button 
      @request-text
      ACTION :request
    :register
    CALL :text-button 
      "Register"
      ACTION :register
    :download
    CALL :text-button 
      "Download"
      ACTION :download
    :contents
    WITH-OBJECT :index
      FOR-EACH-OBJECT @contents
        CALL :text-button 
          @name
          TO id
    :email
    WHEN NONEMPTY @email
      CALL :text-button 
        "Email"
        ACTION :email
The next template, text-button, simply creates a hyperlink. It also puts a vertical space below the link. The height of this vertical space will be controlled by the value of the button-edge-width variable (but you can change this to suit your needs.) Please note that in your store you will have to replace yourstoreid with the Yahoo! ID of your own store. 

Text-button (label link)

WITH-LINK link
  TEXT label
CALL :yourstoreid-vspace 
  @button-edge-width
Finally, you'll need to change your copy of the side-nav template.
 
Change your side-nav template from this... ... to this: 

Yourstoreid-side-nav (vnav)

TABLE-CELL
  IMAGE source vnav
        antialias-color @button-edge-color
TABLE-CELL
  SHIM height 1
       width 26


Yourstoreid-side-nav (vnav)

TABLE-CELL
  CALL :my-nav-bar
TABLE-CELL
  SHIM height 1
       width 26


What our customers say:



Related Products/Categories
Quantity Pricing | Color Combinations for the Web | How to Create a Custom Navigation Bar | List-Pages | Yahoo! Merchant Solutions - Yahoo! Store Price Comparison