Instructional Links

GETTING STARTED

1. download / install / open

2. logo

3. pages

4. mp3 player

5. flash image display

6. flash buttons

7. Zooom menu (animated icons)

8. themed background image
    ( index page )

9. themed background images
    ( template pages )

10. themed image
    ( transparent image )

11. vertical slidemenu

12. horizontal dropmenu

13. bottom links / copyright

14. static icons

15. search form

16. photo gallery

17. contact form page

18. catalog page

19. faq page

20. bookmark button

21. optimizing your web pages for search engines 

22. publishing your web site

23. insert the optional scroller

22. add site wide content boxes

 

Menu's and navigation

VIDEO LINKS: [ vertical_slidemenu ]  [  horizontal-dropmenu ] click to open video in a new window

dropmenu

vertical slidemenu

change MENU button NAME
change a SUB MENU button NAME
ADD a menu button ( no sub menu )
ADD a menu button ( with a sub menu )
REMOVE menu button
REMOVE a sub menu button

bottomlinks

add / remove edit links

 

 

if you are having troubles viewing the video's online, please download the video from the link below to view locally on your computer.

The download package includes a web page for viewing the video files, and several SWF or FLV video files.

Just download the zip file, extract, then double click on the 'web page' to view the video. 

VIDEO LINKS for download: [ vertical_slidemenu ]  [  horizontal-dropmenu ]

Overview

Your web template contains several 'navigation' components. When it comes to providing a method for your visitors to get from page to page in your site, we don't mess around, nor do we think that you should. The navigation components are designed to provide 'easy' and 'obvious' links to the pages in your website. The longer a visitor spends on your site the better.

We have several 'criteria' in designing the navigational components for your template.

  1. search engines must be able to spider or follow the hyperlinks
  2. must be fast loading
  3. must be attractive ( eye catching ) and obvious
  4. must provide a link to the home page, from all pages
  5. if interactive, they must be functional and not distracting
  6. minimally be located at the top and bottom of the page, and middle and sides when possible
  7. expandable, provide as many 'links' as possible, without taking up the entire length or width of the page

Several of the 'navigation' components have been reviewed in other help pages, for the instructions on this page we'll deal with 3 types of navigation components

  • horizontal dropmenu
  • vertical slidemenu
  • bottom links

horizontal dropmenu allows for the use of regular menu 'buttons' and 'buttons with sub menus'. The number of buttons you can fit into a page, is limited by the width of the page, and the number of characters in the button name. The width of the buttons is determined by the number of characters used in the button name. Fewer characters = narrower buttons. For menu buttons with sub menu's, there is an unlimited number of sub menu's you can add. Sub menu's are 1 level deep ( sub menu's can not display additional sub menu's ). As a bonus, the menu buttons using sub menu's also have the ability to include a hyperlink, so it will also double as a clickable button.

vertical slidemenu allows for the use of regular buttons and buttons with sub menu's. The sub menu's 'slide' down, and not 'out' Using this method allows for better browser control and compatibility. The buttons in this menu can be 'static' with a clickable link, or a button with a sub menu. Buttons with sub menu's will not be able to 'link' to a page as in the horizontal menu. The buttons using sub menu's act as a 'title' for the sub menu, and open the sub menu when clicked on. As a bonus, when the menu detects that a button has a sub menu, it will automatically display the 'indicator arrow' and that indicator arrow will rotate when the menu opens and back when the sub menu is closed. The sub menu allows for an unlimited number of menu items and extends the page when more room is required. When a visitor opens a sub menu, then clicks on a different 'menu' with sub menu, the menu's will simultaneously open and close. ( open the new menu / close the open menu ).

bottomlinks is a nice simple text based menu. This menu is included in your page, as it allows you include as many internal and external links as you like.

** NOTE ** INSTRUCTIONAL TEXT DISPLAYED IN RED, IS TEXT THAT SHOULD NOT BE CHANGED OR MODIFIED IN THE {dropmenu or the vertical_slidemenu} PAGES

INSTRUCTIONS

dropmenu

The dropmenu contains 2 sections of 'code' which you can see when you open the {Library / dropmenu} page, and switch to 'code' view.

The first section of code is enclosed with comment tags and contains the info for the main menu buttons, so you can't miss it:

<!--1st section: THESE IS THE MAIN MENU BUTTONS -->

the second section is listed farther down the page and contains the info for the sub menu buttons

<!--2nd section: THESE IS THE SUB MENU BUTTONS -->

The easiest way to 'change' a button name, is to change it directly in the 'code' window. Although you can do it in 'design' view, I recommend you work in the code window...once you've tried it, I think you'll like it.

The button 'code' contains 3 bits of information about  each button ( the link, the title, the name )

The 'link' is the hyperlink or address of the page you want that button to go to when clicked.

The 'title' is the text that is used for 'accessibility', specifically screen readers. It's also used as a description for the button, if you mouse over the button, the 'title' will display as a description. Also beneficial for advanced search engine optimization.

The 'name' is the actual text name displayed on the button.

instructions:

change menu or submenu button name

 in this example, you would ONLY change 'Home' or 'Item1' (examples displayed in red)

  • main button = <li><a href="../index.htm" title="Home"><span>Home</span></a></li>
  • sub menu button = <a href="../catalog.htm" title="Item 1">Item 1</a>

change menu or submenu button HYPERLINK

 in this example, you would ONLY change 'index.htm' or 'catalog.htm'

  • main button = <li><a href="../index.htm" title="Home"><span>Home</span></a></li>
  • sub menu button = <a href="../catalog.htm" title="Item 1">Item 1</a>

change the button title

 in this example, you would ONLY change 'Home' or 'Item1'

  • main button = <li><a href="../index.htm" title="Home"><span>Home</span></a></li>
  • sub menu button = <a href="../catalog.htm" title="Item 1">Item 1</a>

add a main button

the buttons are listed top to bottom, display on your page as left to right. To add a button to the 'left' of an existing button, copy and paste you button code above the button you would like it displayed next to.

  • copy an existing button ( select with your mouse, press CTRL+C to copy to clipboard )

    <li><a href="../index.htm" title="Home"><span>Home</span></a></li>
  • paste ( CTRL+V ) above or below an existing button ( paste above, button displays to the left, paste below, new button displays to the right )

if the new button will display a sub menu:

first, create your sub menu buttons by coping and existing 'sub menu' block

  • paste the copied code above or below and existing block
  • change the <div id="dropmenuX_c" - where X is the next highest number of the available dropmenus
    example: original block

    <!--3rd sub menu -->
    <div id="dropmenu3_c" class="dropmenudiv_c" style="width:150px">
    <a href="../optional/template1.htm">Layout 1</a>
    </div>

    example: copied, pasted and updated block

    <!--5th sub menu -->
    <div id="dropmenu5_c" class="dropmenudiv_c" style="width:150px">
    <a href="../optional/template1.htm">Layout 1</a>
    </div>

    note, I"ve changed only 2 bits of information in the new code, the comment "5th" which is optional, and the "dropmenu5_c" which is required.

    ** NOTE, just make sure the number in the sub menu code ( "dropmenu5_c" ) matches the ( rel="dropmenuX_c" ) in the next few steps:
  • add the following info to your main menu button code right after the title="Title" :

    (copy) rel="dropmenuX_c"

    example: button before

    <li><a href="../index.htm" title="Home"><span>Home</span></a></li>

    example: updated button with sub menu

    <li><a href="../index.htm" title="Home"  rel="dropmenu5_c"><span>Home</span></a></li>
  • change the X to a number to match the 'dropmenu id

remove menu or submenu button

  • simply delete the entire line to delete a menu button, or sub menu button

vertical_slidemenu

open the {Library / vertical_slidemenu} page

change menu button name

  • edit the 'text' between the <span> tags:
    example <span>Services</span> tags ( edit the text in black bold only )

change a sub menu button name

  • edit the 'text' on the right, between the > and the </a> tags:
    example <a href="../services.htm#Silver">Silver</a>  ( edit the text in black bold only )

add a menu button ( no sub menu )

  • copy the following 'code' and paste into the vertical_slidemenu page ( paste above, places the new button to the left )

     <!-- button X -->
    <div class="collapsed">
    <span><a href="../new_page1.htm">New Page</a></span>
    </div>
  • change the URL ( ../new_page1.htm ) and the name ( New Page ) to suit your needs

to add a menu button with a sub menu

  • copy the following code and paste into the vertical_slidemenu page ( paste above, places the new button to the left )

    <!-- button X -->
    <div class="collapsed">
    <span>Menu Button X</span>
    <a href="../new_page1.htm">New Page 1</a>
    <a href="../new_page2.htm">New Page 2</a>
    <a href="../new_page3.htm">New Page 3</a>
    </div>
  • change the URL's ( ../new_page1.htm.... ) and the names ( Menu Button X / New Page 1 - 3.... ) to suit your needs

remove menu button

  • select the entire block of code for that button, and delete, example: this is a block of button code

    <!-- button 2 -->
    <div class="collapsed">
    <span>Services</span>
    <a href="../services.htm#Silver">Silver</a>
    <a href="../services.htm#Gold">Gold</a>
    <a href="../services.htm#Platinum">Platinum</a>
    </div>

remove a sub menu button

  • select the individual line of code, in the menu block, and delete to remove:
    (example displayed in red)

    <!-- button 2 -->
    <div class="collapsed">
    <span>Services</span>
    <a href="../services.htm#Silver">Silver</a>
    <a href="../services.htm#Gold">Gold</a>
    <a href="../services.htm#Platinum">Platinum</a>
    </div>