Dynamic menu
From Online Business Wiki
Click on + to expand the category
Contents |
Introduction
Even with the best possible design of any single page, your site will fail to attract visitors if not equipped with a neat, consistent, and intuitive navigational interface. Every web page of your website, must provide clear answers to the questions your Web Visitors will ask, "Where am I?" and "Where do I go from here?" The principal tools used for navigating a website is a set of buttons commonly grouped on each web page into a navigation bar or navigation panel.
Dynamic Menus allow you to create and maintain navigation menus for your website. You can place Dynamic Menus onto your web pages that are lightweight, standards-compliant, and accessible and work in all popular web browsers. You specify the menu names and structure within the easy to use interface and choose the dynamic menu styles and colors you prefer. Displayed below is an example of a Dynamic Menu in action.
The main advantage of the Dynamic Menu feature kicks in after you have launched your site. If you decide to edit your menu by adding or deleting new items or even change the look and feel, all this can be done centrally where the changes become instantly accessible on your website without doing any programming!
Creating a new Dynamic Menu
Dynamic Menus are created within the Administration area of the system, under Website -> Dynamic Menus. Dynamic Menus are first created, then added to your Web Pages or Templates. You can create as many menus as you like including horizontal and vertical menus. You can create menus consisting of text, images or both. You can even use your own CSS classes down to each menu item!
Start by clicking Create a new Dynamic Menu, and then enter a name for your new menu. You then have to choose which type of menu you wish to create. The menu types available in the dropdown are Default, CSS (Beta), CSS HTML Only.
The following instructions will guide you through the creation of a Default type. This is the easiest menu to create as it does not require any knowledge of CSS. If you wish to learn how to create a CSS menu please click HERE.
Click Save so we can start building the menu.
Here's a quick rundown of what some of the tabs allow you to do:
- The Add/Edit Menu Items link allows you to add, update, customize or delete Menu Items. If you use your own CSS classes for menu items then the Item Look tab plays no part for your menu.
- The Customize Menu Look link allows you to set the look and feel of the overall menu. You can set whether the Menu is Vertical or Horizontal, the relative position of the menu pop-outs, Border Colors, Styles and Widths.
- The Customize Item Look link allows you to set the look and feel of the menu items. This includes the ability to specify different effects when a user moves their mouse over the item. You can also set the Fonts, Borders and Padding attributes for your Menu Item.
Adding Menu Items
Every Dynamic Menu has Menu Items that control the navigation within a website. Menus have a Root Menu (top-level) and can also have sub-menus. Most websites have at least one level of sub-menus however you can have as many as you like.
Remember you can view the instant help on each input by hovering the mouse pointer over the input.
To add an item:
- Click' 'Add/Edit menu items
- If youd like to use an image for this item, check Use Image? And enter in an image as the default, the roll over image and the selected image.
- Enter the Item URL to indicate where the menu item should point to. Click the small squares next to the textbox to open the link manager.
- Set the Item Width and Item Height in pixels
- Set the Parent menu item. If this is top level menu item, leave this as Root. Otherwise, choose another menu item to allow the item to appear as a sub menu of another item.
- Click Save
- Preview your menu often to ensure it looks right!
For advanced users such as designers, you can actually set individual CSS classes on individual menu items. Click Show Advanced Options to access this feature and set CSS for the item and its rollover and selected states.
Note: You can customize the look of any menu item when it is selected. This can be achieved using a different image or CSS class for that menu item. This feature only works for top-level menu items. It cannot be used for sub-level menu items.
Setting Menu Look
Customize Menu Look controls the appearance of a menu which is a collection of items on the same-level. It is important to understand the difference between the root menu and sub-menus. A menu only has one root menu but can have many sub-menus that appear underneath the root.
For instance your menu may have top level items which are: Home, Products and Company. This is the root-level menu (has 3 items). Your Products menu item may have a sub-menu with menu items: Product 1, Product 2 and Product 3. This is a sub-menu.
We highly recommend you use the Preview tab after each action to see how any customization changes impact the appearance of your menu. This approach will ensure you learn the ins and outs of the Dynamic Menus quickly.
The Customize Menu Look link allows you to set properties for the menu group, such as whether the menu should be horizontal or vertical, and border colors and widths
Setting Item Look
The Customize Item look link allows you to customize the appearance of the actual menu items.
- You can customize menu items on the root-level differently to all sub-menu items.
- You cannot customize two sub-menu items differently.
- You can customize mouse-over behaviors.
- Menus designed using Dynamic Menus can look as simple or sophisticated as you like.
You can set Font attributes for menu items, menu item Borders and Padding to control how much space is preserved around each menu item. Furthermore, you can do this for item mouse-overs, and for set separate styles for root items and sub menu items.
CSS Menus
To create a dynamic menu you have to go to Website -> Dynamic Menus and click Create a new Dynamic Menu.
To create a CSS menu you have to select either CSS (Beta) or CSS (HTML Only) menu type from the dropdown during the menu creation. In this tutorial we will deal will traditional "HTML Only" menu type.
Once you give you menu a name and select the type you need to click Save.
You then need to add your menu items. Here are the steps you need to take to add your items:
- Click Add/Edit menu items
- Enter the Item URL to indicate where the menu item should point to. Click the small squares next to the textbox to open the link manager.
- Set the Parent menu item. If this is top level menu item, leave this as Root. Otherwise, choose another menu item to allow the item to appear as a sub menu of another item.
Please note that you can move items around by click and drag. You can also right click on an item to move it up or down.
Once you have created your menu and inserted its module into the site-wide template or a web page, the browser will render the following code when that page is accessed:
<div id="cat_210297_divs">
<ul id="nav_210297">
<li><a href="/htmlonly">item one</a></li>
<li><a href="/htmlonly2">item two</a></li>
<li><a href="/htmlonly3">item three</a></li>
</ul>
</div>
The IDs in the above code will be different in your menu and you can find out what these are rather easily by either viewing the source code or examining the menu with a tool such as Firebug.
The selected item will have a class called "selected" added to it like this:
<li class="selected"><a href="/aboutus.htm">About Us</a></li>
Finally, if you wish to add an ID to your menu items you can do that by placing the ID text into the appropriate field.
The code rendered will look like this:
<li id="aboutus"><a href="/aboutus.htm">About Us</a></li>
All you have to do now is apply some CSS code to style your menu. The place to go for further information, code examples and everything else is sukerfish.
However, here are the basic guidelines for the CSS code:
First code you need to apply to your menu is the following:
#nav_210297, #nav_210297 ul {
padding: 0;
margin: 0;
list-style: none;
}
Because the browser by default applies margin and padding to the list, you need to get rid of them by specifying padding: 0; and margin: 0;. The browser will also apply the bullet points to the list by default so you need to get rid of the bullet points by applying list-style: none; to the list.
The next peace of code is this:
#nav_210297 a {
display: block;
width: 100px;
height:30px;
}
By default a is a inline element. To be able apply dimensions to it, you need to use display: block; on it and then you will be able to give it some dimensions. In this case I have made a clickable area around a to be have width: 100px; and height:30px;.
Finally, if you wish to make the menu a horizontal menu you need to use the following code:
#nav_210297 li {
float: left;
width: 10em;
}
The above code will float all the LIs to the left stacking them next to each other from the right making the menu a horizontal menu.
The code examples used here are from sukerfish.
Inserting a Dynamic Menu (Browser admin interface)
Inserting a Dynamic Menu can be done via Add menu to a web page link.
Alternatively it can be added to a web page or template using the Module Manager.
Once you insert your Dynamic Menu on to your website, you don't need to re-insert again even if you make further changes to it. All your changes become instantly published on your website when you make any change to your menu.
Inserting a Dynamic Menu (Triangle)
- In Triangle, click on the Modules tab and navigate to Dynamic menus.
- Highlight the place where you want to place the menu.
- Select the menu you just created, and click to insert.
Creating sub-menus
Let’s suppose you wish to create the menu like the one below. Item called "Products" has a sub-menu that appears with mouse-over, which contains "menu 1.2", which then contains menu "1.2.1". I will assume that you have created item "Products" already.
To achieve this, go to Website -> Dynamic Menus, and create a menu. Click on the Add/Edit menu items, and then create a menu item "menu 1.2". To make it a sub-menu of the item Products, you need to select products as a parent item.
You simply repeat the process for the menu item "menu 1.2.1" except this time you select "menu 1.2" to be its parent.
Assigning CSS class to a dynamic menu
Firstly, you need to assign a class to your menu item for when it's selected. If you want to assign a class to your menu items when they're in other positions, you will need to choose a different name for each one. So, in Website -> Dynamic Menu, select the menu you want to edit and then click on the item on the left. Now, select "Assign your own CSS to menu item?" and put a class name into "Item Selected CSS" field. For this example I have used class name "buttonPressed".
Once you have done that, you need to go to File Manager and find the stylesheet you have linked to your template where this menu will reside. Click on the stylesheet and click edit. CSS editor window will open and this is where you will be able to write your CSS class.
Here is the example of what that CSS class may look like:
.pressedButton {
border: black;
color:#000000;
font-family:Arial,Verdana;
font-size:9pt;
padding:0px;
text-align:center;
text-decoration:none;
}
You may want to check out a site like http://www.w3schools.com/css/ if you're not sure what those attributes in the above class are.
Linking the menu directly to product catalogue
Here are the steps you need to take to link the menu item directly to the catalogue so that when it's clicked the customer is taken directly to that catalogue.
Firstly, you need to go to Website -> Dynamic Menus -> click on your menu -> click "Add/Edit menu items" -> click on the item you want to link and click on the link box under "Item URL" text box.
In the little pop-up window you then need to click on Catalogues - > click on the arrow below the text box and select the catalogue you want to link your menu item to.
In the final step you click Select. You will now see the path to the catalogue in Item URL field. You simply then slick Save Item and you're done! :)
Related Videos
Related Articles
How do I stop Flash objects overlapping my dynamic menu in Mozilla Firefox?
