To build a vertical menu you need two main elements tobe included or linked to an HTML page, which are :
- a javascript file I called SpryMenuV.js . This file provides the operation of the vertical menu and disappearing submenu items. You can download this file by clicking on the link with the right button and choose "save as." Save it in a directory where he can easily find and retrieve. This file is placed in the web page between tags <head> ....</head> with the following statement:
<script src="../scripts/SpryMenuBarV.js" type="text/javascript"></script>
- be aware to link the correct directory. A CSS style sheet that I called SpMenubarV. css This CSS file defines the visual characteristics of the menu. You can download it by clicking on the link with the right button and choose "save as" and save it in a directory where you can then find easily. This file is placed in the web page - be careful to set the right directory - with the statement
<link href="SpMenuBarV.css" rel="stylesheet" type="text/css" />
Both files are quite long, should explain well use only the file you need to edit to change the appearance menu, ie the CSS file (style sheet, because that other one should not be changed and does not need explanations.
In case you need to remind you what are the directory, how to use them, and how to structure a site, I recommend going first to see the page of explanations (click).
Another necessary element is obviously the menu, that is, you must have already defined what is the list of menu items and submenu of each item with links to the files to be opened.. On the page of our example we can put this scheme with the menu their titles, again as an example, which then everyone will be able to change:
| Soups | > | Pastas | Minestre | |||
| Meat | > | Chicken | Beef | |||
| Seafood | > | Blue | White | Shells | ||
| Raw vegetables | ||||||
| Cooked vegetables | ||||||
| Drink | > | with gas | wines | beer |
WRITE A VERTICAL MENU
The menu is written as 'unordered list' with the following elements
<ul> which are the initials of 'unordered list' which is the beginning of the list, and </ ul> indicating the end of the list.The class is "MenubarVertical"
<li> they are the first two letters of the element 'list' and indicate the start of a line of the list and </ li>, which indicates the end of the line in the list
To start a sub open a line <li> with MenuBarItemSubmenu class "followed by a sub-list <ul> with many rows <li> ........ </ li > how many are the submenu items. To the ends of the sub-list is closed with </ ul>
You must attribute the menu class. The menu class is called MenuBarVertical and its properties can be found in the style sheet SpMenuBarV.css . So we have the following instructions, with reference to the above menu :
|
Let's write just to give an example the menu's page and remind that it is essential to check that the address of files to which it refers is correct, relative to the directory where the file that contains the menu is placed
|
A PRACTICAL TRICK
Here's how you can do to get and then adapt your menu
- Click this link to open the main menu of this site in your browser
- Save it with name the open page into a previously prepared directory OR check the text with the developer tool of your browser
- If tyou saved as, go to see what is into your previously prepared directory. You'll find the css and script and other needed files into a subdir
- If you did read and understand the previous samples You can:
- open into a text editor
- delete or add lines to menus and submenus by copy and paste the texts
- change the text of items in menu and submenus, and save as htm
- prepare all the pages that you want to link to
- link the files to each
The menu can be used into an iframe or as you want. Enjoy
The same menu can be done only with <DIV>- ....... <DIV>