Up to and including ten different menues can be defined for use within a single site using SiteClone. The Menu(s) is defined using the Sites option.
No limit to number of menu items
Vertical or Horizontal menu methods supported
Expandable menues can be defined
You only define the menu items text and the page to link to
All menu items are used to build a site map automatically
Up to 10 different menues can be defined
Each menu is identified in the page style by a pre-defined div (see Styles for more information)
The menu items defined using the Sites option are free format text. If you want to add a page to the site then add or insert a line to the menu, define the page in the " Pages" option, " Build the site" and upload. It should only take a few minutes.
Menu groups
There are 10 menu groups which can be used in a site. These are selected using the Sites option.
Menu items
You can have as many menu links/items as you want. These can be presented using one of four different styles. Sophisticated controls can be applied to the menu appearance using your css style sheet. SiteClone enables the automatic creation of your menues and includes simple presentation, you will need to use a css style sheet for more complicated structures.
Defining a menu
The example below is used to generate the menu for the "demonstration data".
Home->index.html
Destinations
Flights->none
Spain->flights_to_spain.html
France->flights_to_france.html
Contact
Site map
Each line consists of three parts
1) Indent - if there is an indent then you are defining a submenu to the item above it. You can define up to 10 levels of indent. Indents only work with vertical menues.
2) Visible text - This is what will be visible on the page
3) The link - text following the visible text is separated using -> otherwise it will be included in the visible text
none - do not link
blank - the text will be linked to a page with the same name - lowercase, extension of .html, spaces replaced by _
otherwise - the name of the page to link to
When you define "Pages" you will give each page a name. This is how the page and menu link together.
Menu Types
You can define one of four menu types
Vertical list
Vertical bullet list
Vertical expand list
Horizontal list
Vertical listA very simple menu structure. Each item is terminated with a <br>. All menu lines appear within a div with an id of menu_?? where ?? is the group number, 01, 02, 03 etc. A css style sheet can be used to control the appearance of the menu.
Vertical bullet listA bullet point menu is generated using <menu> and <li> tags. All menu lines appear within a menu with a class of menu_?? where ?? is the group number, 01, 02, 03 etc. A css style sheet can be used to control the appearance of the menu.
Vertical expand listA bullet point menu is generated using <ul> and <li> tags. All menu lines appear within a ul with an id of menu_?? where ?? is the group number, 01, 02, 03 etc. A css style sheet can be used to control the appearance of the menu. All indented sections are hidden until the mouse is over the "parent" of the indented option(s), then the next level of menu options appear. You must also add the following code to your css style sheet and a .js file and set the body tag of your page.
css style sheet code
li ul {display:none;}
li > ul {top:auto;left:auto;}
li:hover ul, li.over ul { display:block;}
<body> tag
<body onload='subLists("menu_01");'>
Javascript .js file
subLists = function(Id) {
if(document.all&&document.getElementById){
navRoot = document.getElementById(Id);
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {this.className+=" over";}
node.onmouseout=function() {this.className=this.className.replace(" over", "");}
}
}
}
}
Horizontal listA very simple menu structure. Each item is separated with a single space - a " ". All menu lines appear within a div with an id of menu_?? where ?? is the group number, 01, 02, 03 etc. A css style sheet can be used to control the appearance of the menu.
Linking to other language versions of this site
If this site links to the same pages in a different language, use the language grid in the Sites option to define how the pages are linked. You need to define a div with an id of "language" in your style page. See the "Styles" section for details on how to do this. This div will be replaced when the site is built with a block of flags - one for each language where a link has been defined in the grid.
Use the "Vertical" or "Horizontal" select to define how the block of flags is generated
The name of each flag is assumed to be in the format of "lang_xxx.jpg" where xxx is the language code (as folder)
You supply the jpg's for each language you want to use
Flag jpg's are located in the html folder or using the "Flag Image Offset" for example ../images/
In the example above (the demonstration data) the languages are English, German, Spanish and French. English, German and French are in the same FTP area, just in different folder. The Spanish language site is in a totally different domain. The flags will link accordingly. Each flag is given a hint. Examples below
eng - English
fra - Français
deu - Deutsch
esp - Español
Extent of site
If SiteClone is not used for all the pages in a site, make sure that none SiteClone generated pages are included in the " Menu" section to ensure that all the pages "fit" together,
| All web site design, text, graphics, the selection and arrangement thereof, Copyright (c) 2009 e21Software.com LLC USA. All Rights Reserved. All trademarks, product names and company names or logos cited are the property of their respective owners. Site map |  |