[cvs]
eforum/src/expresso/components/eforum/javascript/jimmenu-v5.3/tutorial
tutorial.html
JCorporate Ltd
jcorp at jcorp2.servlets.net
Wed May 19 15:55:16 PDT 2004
Update of /home/javacorp/.cvs/expresso/eforum/src/expresso/components/eforum/javascript/jimmenu-v5.3/tutorial
In directory jcorp2.servlets.net:/tmp/cvs-serv31247
Added Files:
tutorial.html
Log Message:
Register in CVS
--- NEW FILE: tutorial.html ---
<html>
<head>
<title>Top Navigational Bar 4 (aka PopMenu 5) tutorial</title>
<style type="text/css">
<!--
.main { margin:10px; background-color:white; font-family:Verdana; font-size:12px; color:black; }
td { font-family:Verdana; font-size:12px; color:black; }
//-->
</style>
</head>
<body class="main">
<font size="4"><a href="http://www.dynamicdrive.com/dynamicindex1/jimmenu/">Jim's DHTML Menu
v5.3</a> tutorial<br>
</font><i><font size="2">By Jim Salyer. Modified and recomplied by
DynamicDrive.com</font></i><p>The following explains each of the parameters
available when defining your menu items within "config.js". Study the below
closely along with live examples within "config.js' to set up your menu
precisely the way you want:</p>
<tt>
function init()<br>
{<br>
menus[0] = new menu(<a href="#1">125</a>, <a href="#2">"vertical"</a>,
<a href="#3">10</a>, <a href="#4">10</a>, <a href="#5">-1</a>,
<a href="#6">-1</a>, <a href="#7">"white"</a>, <a href="#8">"black"</a>,
<a href="#9">"MS Sans Serif"</a>, <a href="#10">9</a>, <a href="#11">"bold"</a>,
<a href="#12">"bold"</a>, <a href="#13">"black"</a>, <a href="#14">"white"</a>,
<a href="#15">2</a>, <a href="#16">"black"</a>, <a href="#17">2</a>,
<a href="#18">"v"</a>, <a href="#19">false</a>, <a href="#20">true</a>,
<a href="#21">true</a>, <a href="#22">false</a>, <a href="#23">0</a>,
<a href="#24">true</a>, <a href="#25">5</a>, <a href="#26">5</a>,
<a href="#27">"gray"</a>);<br>
menus[0].addItem(<a href="#s1">"#"</a>, <a href="#s2">"NEWWIN"</a>,
<a href="#s3">100</a>,
<a href="#s4">"center"</a>, <a href="#s5">"Home"</a>, <a href="#s6">0</a>);<br>
menus[0].addItem("#", 100, "center", "Products", 1);<br>
menus[0].addItem("#", 100, "center", "Services", 2);<br>
menus[0].addItem("#", 100, "center", "Contact Us", 0);<br>
menus[0].addItem("#", 100, "center", "Links", 0);<br>
}<br>
</tt>
<p style="background-color:yellow"><font size="3">Description of each parameter for <b>menu[x]</b>, from 1st to last:</font></p>
<p><a name="1"></a>1) <font face="Arial" size="2">This parameter
controls the set size of the menu. If the menu is horizontal, it refers
to the height of the menu. If the menu is vertical, then it refers to
the width of the menu. The number is measured in pixels. <b>(125)</b></font></p>
<p><a name="2"></a><font face="Arial" size="2">2) This parameter sets type of menu to be
displayed. The menu can be laid out horizontally, by inputting
"horizontal", and vertically, by inputting "vertical". <b>("vertical")</b></font></p>
<p><a name="3"></a><font face="Arial" size="2">3) Plainly put, this parameter sets the
horizontal coordinate of where the menu is to be displayed. If the menu
is a sub-menu, then this parameter can be left as zero, since sub-menus
are positioned dynamically. <b>(10)</b></font></p>
<p><a name="4"></a><font face="Arial" size="2">4) If you already read the last
parameter's description, then you probably guessed that this one is the
vertical coordinate of the menu. You're right. This paramter adheres to
the same options as the x coordinate does. <b>(10)</b></font></p>
<p><a name="5"></a><font face="Arial" size="2">5) This is the horizontal offset (in
pixels) to use when showing a new menu from this menu. A positive value
moves the new menu right and a negative value will move a new menu left.
<b>(-1)</b></font></p>
<p><a name="6"></a><font face="Arial" size="2">6) This is the vertical offset (in
pixels) to use when showing a new menu from this menu. A positive value
moves the new menu down and a negative value will move a new menu up. <b>
(-1)</b></font></p>
<p><a name="7"></a><font face="Arial" size="2">7) This one is the normal background
color of each item, a.k.a. the color that is default for each item of
the menu. It can be set with the name of the color, or with the
hexadecimal value of the color. If you don't know what hexadecimal
means, then just ignore the last part of the previous sentence. <b>
("white")</b></font></p>
<p><a name="8"></a><font face="Arial" size="2">8) This paramter is just the background
color of each item when the viewer mouses over that item. It involves
the same types of inputs as the normal background color parameter does.
<b>("black")</b></font></p>
<p><a name="9"></a><font face="Arial" size="2">9) This parameter refers to the name of
the font used for item text. Preferably, this should be set to a font
that is common on most systems like Arial or Times, but it can also be
set to multiple fonts by separating them with a comma like
"Arial,Helvetica" so the font would be similar even if a Mac was running
the script. <b>("MS Sans Serif")</b></font></p>
<p><a name="10"></a><font face="Arial" size="2">10) Simply put, this parameter describes
the point size of the font. If you are unfamiliar with point size, check
out Microsoft Word. It measures all its fonts in points. <b>(9)</b></font></p>
<p><a name="11"></a><font face="Arial" size="2">11) This parameter can have multiple,
space-separated values. It can contain one or up to all three of the
following font style values: bold, italic and underline. Try not to use
all three though. It might cause some strange looking results. This
style is for when the mouse is <b>NOT</b> over an item. <b>
("bold")</b></font></p>
<p><a name="12"></a><font face="Arial" size="2">12) This parameter can have multiple,
space-separated values. It can contain one or up to all three of the
following font style values: bold, italic and underline. Try not to use
all three though. It might cause some strange looking results. This
style is for when the mouse is over an item. <b>("bold")</b></font></p>
<p><a name="13"></a><font face="Arial" size="2">13) This is the normal color of item
text. Like the background color, it can be set with the name or the
hexadecimal value of the desired color. <b>("black")</b></font></p>
<p><a name="14"></a><font face="Arial" size="2">14) This is just like the background
color on mouse over, except it refers to the text of each item, not the
background. <b>("white")</b></font></p>
<p><a name="15"></a><font face="Arial" size="2">15) This parameter describes the size of
the border around the menu, and if desired, each item. It is measured in
pixels. <b>(2)</b></font></p>
<p><a name="16"></a><font face="Arial" size="2">16) What more do you want? This is the
color of the border around the menu and, if chosen, each menu item. It
is input just like the background and text colors are. <b>("black")</b></font></p>
<p><a name="17"></a><font face="Arial" size="2">17) This one could be described as the
margins for item content from each side of the item. But I like to think
of it as the padding around the content of each item or the distance
between the edge of an item and its content. This parameter is measured
in pixels. <b>(2)</b></font></p>
<p><a name="18"></a><font face="Arial" size="2">18) This is the character that is
displayed on the far right side of an item if that item opens a
sub-menu. It can be a letter like "v", or a number corresponding to a
ASCII character like 62 for >. If you use a number, please do not
surround the it in quotes. A roll over can be used by putting in
"rollover:img1.jpg:img2.jpg" or the like. <b>("v")</b></font></p>
<p><a name="19"></a><font face="Arial" size="2">19) This parameter tells the script to
display sub-menus opened from this menu with a mouse click, instead of
opening the sub-menus with a mouse over. That's it in a nutshell. <b>
(false)</b></font></p>
<p><a name="20"></a><font face="Arial" size="2">20) This parameter tells the script to
separate each menu item with a divider, which is the same size and color
as the menu's border. This should normally be done for effect or for
readability. <b>(true)</b></font></p>
<p><a name="21"></a><font face="Arial" size="2">21) Like the window title says, this
parameter defines a main menu if set to true. That means that this menu
will be displayed when the page loads, instead of on a mouse over or
mouse click. <b>(true)</b></font></p>
<p><a name="22"></a><font face="Arial" size="2">22) This parameter, if set to true, will
tell the script to display sub-menus using a transitional effect, given
by you, the programmer, in the next parameter. These transitions will
only work in PC versions of Internet Explorer numbered 5.5 and above. <b>
(false)</b></font></p>
<p><a name="23"></a><font face="Arial" size="2">23) This is a number from 1 to 23 setting
the type of transition to display, if transitions are set to true and
the browser is of the correct type. The Microsoft HTML/DHTML help file
and numerous Javascript and DHTML books will define these numbered
transitions for you. You can set this to zero if you set the previous
parameter to false. <b>(0)</b></font></p>
<p><a name="24"></a><font face="Arial" size="2">24) This tells the build script whether
or not to create a shadow for the menu. It's your standard true/false
value. <b>(true)</b></font></p>
<p><a name="25"></a><font face="Arial" size="2">25) This parameter defines how far away
from the menu the shadow should be displayed, horizontally. It is
measured in pixels, and negative values can be used. <b>(5)</b></font></p>
<p><a name="26"></a><font face="Arial" size="2">26) This parameter defines how far away
from the menu the shadow should be displayed, vertically. It is measured
in pixels, and negative values can be used. <b>(5)</b></font></p>
<p><a name="27"></a><font face="Arial" size="2">27) This is the color of the shadow. It
can be a color name like "white", or a hex value like "#FFFFFF". Make
sure that the color is something that befits a shadow. You don't want a
yellow shadow for a black menu, although it is possible for you to
define that here. <b>("gray")</b></p>
</font>
<p style="background-color:yellow"><font size="3">Description of each parameter for <b>menu[x].addItem()</b>, from 1st to last:</font></p>
<p><a name="s1"></a>1) <font face="Arial" size="2">This parameter defines the link that
the item can go to upon being clicked. This can be a local link, or a
global link like "http://www.yahoo.com". You can also add Javascript in
by coding "javascript:code" into the parameter. If you use a string
inside the Javascript code segment, you'll have to surround the string
like so: "javascript:alert('Alerting')". <b>(#)</b></font></p>
<p><a name="s2"></a><font face="Arial" size="2">2) Optional link target. Set it
to "NEWWIN" to open this menu item in a new window, "FRAMENAME" to open in a
specific frame, or "" for no target. <b>("NEWWIN")</b></font></p>
<p><a name="s3"></a><font face="Arial" size="2">3) This is the set size of each item,
dependent upon the layout of the menu. It is the height if the menu is
vertical, and the width if the menu is horizontal. <b>(100)</b></font></p>
<p><a name="s4"></a><font face="Arial" size="2">4) This parameter defines the alignment
for item content. It can be "center", "left" or "right". Don't put
anything else in this parameter, NOTHING ELSE!!! <b>("center")</b></font></p>
<p><a name="s5"></a><font face="Arial" size="2">5) Like the title states, this is the
item content parameter, here you can put the item text, or by putting in
"rollover:image1.jpg:image2.jpg" or the like you can make the item into
a roll over cell. <b>("Home")</b></font></p>
<p><a name="s6"></a><font face="Arial" size="2">6) This is the number of the menu to show
from this particular item on mouse over or on mouse click. There is one
warning with this parameter though. Do not try to open the same sub-menu
for two different parent menus, as this will bring up a Javascript
error. Also, please put in zero if the item doesn't open a sub-menu <b>
(0)</b></p></font>
<p><font size="4">Additional Notes:</font></p>
<p>
To add the menus to a page, put the following in your BODY tag: onload="init()". Do not define a
CSS style directly for the body tag. The Netscape 4 version of this script uses internal body
tags within layers to create the menus. Define the CSS style by using a class name (for your
document's body tag).<br>
<br>
Also, remember to set the "buildDir" variable in the file browser.js. It maps the build files to
the page that will display the menu.</p>
<p>
<b>Click here for browser compatibility
information.</b></p>
<p>
<font face="Arial" size="2">Below is a short description of the
browsers that are compatible and incompatible with this script. If
the Macintosh versions are not listed with a browser, then either
the browser isn't available in Mac format, or the browser is
virtually the same between a PC and a Mac, and the menu will
function similarly in both.</font></p><font face="Arial" size="2">
<ul>
<li><b><u>Microsoft Internet Explorer</u></b>
<ul type="disc">
<li>Version 4 - Compatible
</li>
<li>Version 5/5.5 - Compatible
</li>
<li>Version 6 - Compatible
</li>
<li>Mac Version 5+ - Compatible </li>
</ul>
</li>
<li><b><u>Netscape Navigator</u></b>
<ul type="disc">
<li>Version 4 - Compatible
</li>
<li>Version 6+ - Compatible </li>
</ul>
</li>
<li><b><u>Mozilla</u></b>
<ul type="disc">
<li>Version 1.2> - Unknown
</li>
<li>Version 1.3+ - Compatible </li>
</ul>
</li>
<li><b><u>Opera</u></b>
<ul type="disc">
<li>Version 6> - Unknown
</li>
<li>Version 7 - Compatible </li>
</ul>
</li>
</ul>
</font>
<p align="center"><font size="2">
©2003-2004. By Jim Salyer & <a href="http://www.dynamicdrive.com/">
Dynamic Drive.</a></font></p>
</body>
</html>
More information about the cvs
mailing list