FX Dyna Menus -
(by Felice Di Stefano)
(for PHP_MySQL, PHP_ADODB,
ASP_VBS, ASP_JS)
This extension will allow you to create
dynamic database driven menus choosing between outlining and pop-up type. It is completely customizable and it will create a basic stylesheet suitable for the menu or you may chose one of the free templates, then you may implement it manually or via the CSS Dreamweaver window to achieve the desired look. It permits you to build as many menus as you wish on the same page.
Before you begin please copy the images you found in the package in any location
of your site directory, these are just examples which you can use or use any
other image suites your taste. As in roll-over pictures the opener icons must be always
in pair for outlining menus since they represent the closed and opened node, the opened node picture
name must always include the suffix "_open", so if the closed (or
main) picture name is "foo.jpg" the opened picture must be named "foo_open.jpg". This is optional for the decoration image, if the alternative image exists it is catched otherwise remain the same. Instead a single image can be used as child indicator in pop-up menus.
Applying
The process of building a dynamic menu it may be a little complex but you must assume that this is a logic sequence of dependencies, there is no limit of levels and any level will depend on prior levels therefore a sequence of nested recordsets will be created in a little different way than the known DW's fashion. You can relay on different tables just they have a logic relation in between. The UI dialog will give you a help on building the required queries, in addition a field is provided to give you and your SQL skills the way to implement a query. Please read this tutorial on how to use the query main section.
The dialog opens with two levels as default since this is the minimum required for a tree menu and these cannot be removed, anyway if you desperately want to achieve only one level you can get around it building a fake query on the second level, that is, a query you know it will return no records. There are the Add/Remove buttons which do not work as seen in other behaviors, the explanation is provided below.
| Connection: | Select from this list the required connection to the database. |
| Menu Name: | Insert in this field a suitable name for the menu. This will appear in the server behaviors window. |
| Add/Remove: | The plus
and minus buttons are used to add or remove levels but do not act like in
other behaviors. Clicking the (+) button will not add a level if the previous one is not set. To set a level means to define the basic part of the query (i.e.: SELECT column FROM table), this because any subsequent level has to know to what has to depend on. Clicking the (-) button will always remove last level of the sequence |
| Levels: | This list
will display the levels with their partial simulation of the related query
just to have an idea of where you are, you will not be able to see it all
so just relay on what you see on the other fields when clicking on a level.
Clicking on an already set level it will show the table and text column fields disabled if next level is set, you can edit from the WHERE clause on only since the basic part of the query has a relation with next level, if you want to edit the basic part you must unset the subsequent level. |
| Link to Table: | Select from the list the table to bind to the current level. Changing table it will completely unset the level. |
| Text Column: | Select from the list the column from which to retrieve the item text will show in the menu. Changing column it will completely unset the level. |
| Group By: | Data in a table may be recursive so you would like to group it checking the box to avoid that the same item shows several times in the menu. If the data is unique this is not required. |
| Order By: | Checking this box it will sort the level items in ascending order. |
| Value Column: | From this list select, if required, a column which represents the value the Where Col of next level will relay on, this will be also passed as a url parameter in a link. If not selected it will copy the Text Column. |
| Where Col: | This is the primary Where condition. Select the column which value is equal to the Value Column of the prior level. No matter if it is a different table, just there is a relation. Any other relation with superior levels will be set automatically in a chain. Note that this is disabled for the first level since there will be no dependence. |
| Link Col: | If you want to retrieve links saved in database for the selected level choose the link column from this list. Note that saved links to external pages must be absolute url starting with http:// (ie: http://www.thecompany.com/products.php), otherwise can use relative url. Saved links can have Url parameters if required. |
| Only Condition: | Normally the where clause retains the Where Col condition of the prior levels, checking this box the where clause will have only the Where Col condition of the current level. This makes more possibilities to chain with other tables. |
| Alt Where: | This list together the following fields will add another condition to the query or may be used to add a Where clause to filter the first level by a static or dynamic value. Select from this list the column to use as a filter. Note that this will always be concatenated with "AND" except the first level if Where Col was not set. |
| Operator: | Select the operator to use in combination with the alternative Where Column. |
| Value: | Define a value, static or dynamic, which will complete the alternative (or secondary) Where condition. Dynamic values must follow a format rule which is explained later but you may use the dynamic button for that purpose which will apply the right form of the string. |
| Add: | This two
fields represent an ulterior implementation of the query which is up to
your SQL skills. You can choose the first concatenation operator from the
list and then you have to write the rest of the query in a correct way by
your self. Perhaps it will never be required so you can leave it blank but in case you want to go extremely advanced get the chance. |
| Link: | Any level may have a link or may not as you require. Use this if it is not intended to retrieve link from database. When attaching Url parameters which are values retrieved by the level recordsets use the URL button. |
| URL (button) | This button
will pop up a small dialog with a list of available values retrieved from
the level recordsets to pass as Url parameters. define the name of the variable
you want to pass and select the value from the list, then click the "Add"
button. Any time you repeat the operation a new parameter will be appended
to the link if doesn't already exists. The level recordset sources are written a little different from the common DW's sources so this pop up dialog will help you to insert the url values in the right form. You will read an explanation later. |
| Target: | Links may have a target, you can select from the list or write a frame name. |
| Ajax Support: | Checking this box you will enable the browser to send requests using the Ajax method at condition your browser supports this technology, this permits to get results from server without need to reload the page in a similar fashion of client-side code. Some procedure must be followed to achieve that so read the explanation at the bottom of the page. |
| Object Id: | Using the Ajax request you will get in return the desired output from a interrogated server page in background which must be positioned somewhere in the page therefore a reference is required. The reference is represented by an object id, so give an id to the object which will contain the requested output and refer it in this text field. You may give an id to almost of the html objects, table, row, cell, div, span, etc. |
| Link only if no child: | Links can be added only if the item has no submenu, actually last of that chain, if this box is checked, otherwise links will be added to all items in the level. |
Options As mentioned above the package include few picture pairs, you may use these or any other you like. You may use or not images to your menu. You can apply 2 pictures, the first represents the node opener, for example a (+) sign as we have seen many times, the second is just a decoration to the text, for example a small folder icon, also this we have seen many times. The rest is up to your fantasy. Some other useful feature is included in this section. |
|
| Menu Type: | Simply choose the type of menu you want to create. |
| Width: | You may optionally assign a width to the menu and/or edit later via the CSS window. For pop-up menus applying a white-space: nowrap in text container the menu will resize automatically. |
| Anchor: | This applies only to Pop-up, no matter if with or without launcher. When you anchor to the left, as is most natural, children will show at the right side, if you want to anchor at the right, that is, you place the menu at the right side of the page you can have the children at the left side. |
| Menu Display: | If you selected a Pop-up menu you can choose to display it vertical or horizontal, if horizontal the launcher text will be disabled. |
| Launcher Text: | You may want to have an item launcher for an hidden menu as is usually done for pop-up menus, fill this field with an appropriate test or you can even insert an html tag to call an image (ie: <img src="images/mymenuimage.jpg">), you may also include attributes. You can achieve that for both vertical type of menus, assume this as an alternative to the direct horizontal pop-up bar, note that outlining menus are only vertical so you can arrange a horizontal navigation bar with hidden accordion menus. Just have a look at the samples. When this field is filled the menu will be automatically hidden. Note that in any case the outlining menu it will work onclick and the pop-up menu onmouseover. |
| Menu Position: | This feature is enabled only for Pop-up menu with a launcher item. You may want to place a navigation bar at the bottom of the page therefore if you choose "up" the menu will open upwards. |
| Opener Img: | Optionally you may use a small icon as opener for outlining (ie: a plus button), remind what was mentioned at the beginning of this document. Or you may want to use the child notifier in pop-up menu. Note: the Preload Images behavior will apply for the image with the "_open" suffix. |
| Decoration: | This box is a switch to quickly allow or not the decoration image. |
| Fixed Icon: | If the Decoration box is checked you have to define a decoration image (ie: a folder icon) which can be dynamic if the Dynamic box is checked otherwise uncheck the Decoration box. |
| Dynamic: | If you check this box you can have dynamic image for each item. A related column reporting the image url is required in the database table which you can choose from the Icon Column list. |
| Icon Column: | Select here the column for the dynamic decoration image. Note: the same column name must be on each of the tables are involved. Usually a menu can be achieved from a table but there may be cases when more tables are queried therefore each table must have the same icon column with the same name. |
| Compact Text: | In case you want to have long name items which will be wrapped, check this box to compact the text, that is, any wrapped text will be indented as the first line and it will never lay below the opener image. It will not be possible to center text if you choose to check this box. Note that this will not work always using templates, some of them may have a background image suitable for only one row therefore this option will be skipped if this is the case. Templates created by user it will always ignore this option because it will display always as the template was saved. |
| Levels Indent: | In this list are few indent sizes (only outlining). You may edit this later via the CSS window level by level. |
| Re-open: | Sometime you may want not to use a tree menu on framed pages, this would mean that if you have a replication of the same menu, on the page you linked this will load imploded. If you have this need check this box and when next page with the same menu will load the menu will re-open the node where the clicked link is. |
| Event Mode: | The opening node event can be done in three ways. The "On Opener Img" means that the node will open only when clicking the opener image as it can be a plus sign. The "On Text" means that the node will open when clicking the text if you don't use a opener, and "On Item" which means the entire row object, most suitable for accordion style. |
| Link on Text: | When the Pop-up menu type is chosen you may choose to have the link when clicking only the text checking this box otherwise the link will be applied to the entire item block. |
| Pop-up Appearance: | Here are 5 color picks to give a basic look to the pop-up, in many cases can be enough but if you want to go more freaky move to the CSS window and edit the created styles and add background images, borders and what else satisfy you. Have a look at the browser during editing. These will be disabled when chosing a template except for the Simple one. |
Effects
You can add
some effect to outlining menu only to make it a bit more appealing.
Actually is only the Slide effect momentary but combined with the other parameters
(positioning and implosion) is able to create many animation effects.
| Presets: | Few presets are in this list just to get an idea but note that sizes of these presets are adapted to the demo, so you may want to modify Punch Out and Shift after selection to adapt it to your menu size. As soon as possible it will be added the way to save custom sets. |
| Implode All: | That means that if checked when a node is clicked to open it the prior open node will implode. |
| Punch Out: | Define here a size for the inside node to move side away or leave 0 if you don't want it. When combined with the Slide effect it will produce a slide drawer effect. If no effect is used this may represents an extra indent. |
| Shift: | Define here a size for the inside node to move up or down or leave 0 if you don't want it. When combined with the Slide effect it will produce a slide lift effect. Not recommended to use with more than two levels. |
| Effects: | Select the effect you want to apply from this list or none. Note that the Slide effect with its parameters combined with Punch Out and Shift results in many different effects. |
| Slide
Stack: (Effect parameter) |
When an effect is selected define here the size of stack used for the effect. That is the size in pixels the node implode or explode at any interval governed by the speed. Average value of use is between 4 and 20, but you may exceed at your pleasure. |
| Slide
Timing: (Effect parameter) |
When an effect is selected define here the timing (or speed) in milliseconds used for the effect. That means any stack will happen after the given time, the lower is the timing the higher is the speed. Average value of use is between 10 and 50, but you may exceed at your pleasure. |
| Reverse onmouseout: | When an effect is selected you may choose here to have or not the reverse effect when moving out. |
| Floating Menu: | Define here if you want to have a floating menu. The floating menu will float always in the same position where you apply it on the page. To have an idea of the difference between types of float try it both. The float feature will create a floating container, to embellish it add a css style in your stylesheet considering the id of the container with the same name of the menu, therefore if the menu name is "MainMenu" the css will be #MainMenu {selectors} where you can add background, padding and what else can satisfy you. |
| Close onClickOut: | When this box is checked the outlining menu will implode with a click out. |
| Template: | Here you can optionally chose a template if you don't want to implement the stylesheet by your self. In any case you are not restricted since templates are based on simple stylesheets which can be modified in the Dreamweaver CSS window. After editing it is recommended you do a backup of the stylesheet because when you edit the behavior the stylesheet will reset to the chosen default. New templates will be released later. |
About dynamic values
The featured tools will
help you to insert the dynamic values in text fields in the right way but you
may want to insert them manually once you know how.
1) The value must be enclosed by the double quotes and the concatenation sign
used for that language.
2) Value sources from nested
recordsets have a little different format than the normal DW's recordset sources.
3) Nested recordset names are made by the Menu Name plus the Level, so if the
menu name is "mymenu" the recordset name of the first level will be
"mymenuLevel1".
Examples:
PHP_MySQL : " . $rw_rsName['colName'] . "
PHP_ADODB : " .
$rsName->Fields('colName') . "
(this is the only one that remain as it is)
ASP : " + rsName("colName") + "
About styles and effects
In effect this behavior
can achieve more than what you can think at first approach. Your imagination
and fantasy may produce unexpected nice results. Nevertheless few recommendations are required.
When the behavior is applied a StyleSheet related to the menu name will be created using a template or without which will contain few classes with basic styles giving a basic look of black on white for the outlining menu (no way to know how many levels are you going to have). A basic coloring can be achieved soon for pop-up menus if no template was selected.
Implement the created styles, if not satisied, to give the menu the look you want.
Avoid to have a generic DIV selector in your StyleSheets or whatch out to do appropriate corrections.
One thing is very recommended, if you don't want to have bad results, you must not modify the applied position, display and clear. You can re-arrange any other thing as you like. After editing styles you may create your own template (recommended) selecting Make User Template from Server Behaviors > FX Dynamic Menus, otherwise It is suggested you make a backup copy after editing the stylesheet, because if you want to edit the behavior later the stylesheet will reset to default. The backup will be useless if you change the menu type since they have different structure.
Note: when you edit the pop-up stylesheet you need to repeat the background over state of the tr:hover to the td:hover which is an accommodation for Opera browser not working very smooth sometimes.
You can build as many menus you wish on a page and they are all independent
from each other. Each menu on the page will have its own stylesheet even they may have the same appearance, another strong suggestion is to just leave it unless you are really in the mood to waste your time.
The effects are only for the outlining menu, you may achieve the accordion effect and some other animation with the help of your fantasy.
"AJAX" Support
The behavior will allow
to send a request in background, if enabled, using the Ajax technology. If the
browser doesn't support that an alert will pop up advising the user. The interrogated
page will send back a response in background which can be converted in output.
This will make that the output is achieved without reloading the current page.
To achieve that it is required that exists the page to interrogate so if with
a normal server page procedure we will build the html code and the relative
server code in the same page using the Ajax method we will have to build a server
page to return only that desired output. You will do as usually when creating
a server page then at the end remove all the non wanted html code as <html>,
<head>, <body>, etc and leave only the necessary code as for example
a table or a paragraph or what else.
Now that we have the page to interrogate in the current page we need only a
place holder where the response will be outputted, this is represented by an
id given to a desired html object as a table, a div or what please you, so decide
the position of the output and add an id to the object container. Still we need
to do another thing, when creating the link with url parameters in the menu
level this must be addressed to the page to interrogate. Of course you will
enable the Ajax support and reference in the field the id of the object container.
A demonstration of this is the second page demo (Menu 2), I suggest to have
a look at it. A note is required. Almost the same thing would be achieved interrogating
the "products" page instead the "xproducts" page was added
for the purpose because its response is cleaner when the other would contain
all the other elements we have already in the current page as <html> <head>
etc. We don't want a heavy or dirty output despite the fact that you will never
see the html code of this output and this is a very good use, why we would need
new technologies if not to make things more efficient and not to create just
modern trash.
Copy and Paste
You may copy and paste the server behavior from a page to another as you do with a recordset. Note that when images in css stylesheet are from templates they are retrieved regularly, no matter the new location, but when the images are not the same as assigned in templates (for instance if you create your own template) and the new location is different of the of the source page, you will need to open the css file in DW and correct the path to the images or copy the images in the new location.
by FELIXONE