Ecommerce Templates > General Help > Dynamic CSS Menus

Dynamic CSS Menus

In version 5.9 we included three new css menus for you to add to your store. These menus are dynamically populated by the categories added through the online control panel so once set up they require no further maintenance. As they are css based you have total control over their appearance. They are also very search engine friendly.

Setting the category root

The first thing you will probably want to do before setting up any of the css menus is to define the hierarchy of categories and products so the system can differentiate between those pages and regular store pages you might add to the menu like the cart or search pages.

Go into the categories admin page and set up a new category as in the example below, checking the box for (Optional) Check to make this category the product catalog root.

category root

On saving the page and viewing the category listing, you should see the entry like this Categories (24) - this indicates the product catalog root.

Next you will want to move all your main categories (not sub-categories) so they hang-off the new category root you have just defined. On those main categories, change Sub Category Of...from Home Category to Categories.

Category drop down

The hierarchy for the sub-categories will be updated automatically so they will look something like this

Category hierarchy

This set up allows you to differentiate between category / product pages and the general stores pages in the menu like cart and search. It also means you can decide how you would like to display the category links in your menu. If you want to show all the root categories at the same level in the menu set the following

in vsadmin/includes.asp

menucategoriesatroot=TRUE

or in vsadmin/includes.php

$menucategoriesatroot=TRUE;

If you want all the category pages to be linked off one category link in the menu, set that to FALSE.

Back to top

CSS drop down menu

The drop down menu is a horizontal menu which displays the home categories horizontally with the sub menus appearing on mouse over as in the image below.

css drop down menu

To enable the horizontal menu, add the following where you want it to appear...

ASP Version

<% menustyle="horizontalmenu1" %>
<!--#include file="vsadmin/inc/incmenu.asp"-->

PHP Version

<?php $menustyle='horizontalmenu1'; ?>
<?php include "vsadmin/inc/incmenu.php"?>

... making sure that those lines come somewhere after the 4 main ASP / PHP include lines.

You will now want to change the appearance of the menu so it fits into your existing design. The menu above uses the following css that can be added to your main css file, in most templates this is called style.css.

ul.ectmenu1 {
list-style: none;
border:0px solid;
color:#ffffff;font:bold 14px Arial, Helvetica, sans-serif;
padding:0px;
}
li.ectmenu1 {
border:1px solid;
padding:4px;
background-color: #e69d01;
text-align:left;
}
li.ectmenu1 a{
color: #fff;
padding:4px;
}
li.ectmenu1 a:hover{
color: #333;
padding:4px;
}

The classes explained

ul.ectmenu1 - The properties of the horizontal home categories
li.ectmenu1 - The properties of the drop down choices
li.ectmenu1 a - The link properties
li.ectmenu1 a:hover - The mouse over properties
li.ectsub1 - The sub menus
li.ectsubhorizontalmenu1 - Items with a sub-menu

 

Back to top

CSS pop out menu

The pop out menu is a vertical menu which displays the home categories vertically with the sub menus appearing on mouse over as in the image below.

css pop out menu

To enable the pop out menu, add the following where you want it to appear...

ASP Version

<% menustyle="verticalmenu3" %>
<!--#include file="vsadmin/inc/incmenu.asp"-->

PHP Version

<?php $menustyle='verticalmenu3' ?>
<?php include "vsadmin/inc/incmenu.php"?>

... making sure that those lines come somewhere after the 4 main ASP / PHP include lines.

You will now want to change the appearance of the menu so it fits into your existing design. The menu above uses the following css that can be added to your main css file, in most templates this is called style.css.

ul.ectmenu1 {
list-style: none;
border:0px solid;
font-size:10px;
padding:0px;
background-color: #fdedc9;
}
li.ectmenu1 {
border: 1px dotted #e69d01;
padding:0px;
background-color:#fdedc9;
}
li.ectsubverticalmenu3 a{
display:block;
padding:4px;
background-image:url(images/arrow.gif);
}
li.ectsubverticalmenu3 a:hover{
display:block;
padding:4px;
background-image:url(images/arrowov.gif);
background-color: #e69d01;
color: #fff;
}
li.ectmenu1 a{
display:block;
padding:4px;
}
li.ectmenu1 a:hover{
background-color: #e69d01;
color: #fff;
}

The classes explained

ul.ectmenu1 - The properties of the vertical home categories
li.ectmenu1 - The properties of the categories without sub categories
li.ectmenu1 a - The link properties
li.ectmenu1 a:hover - The mouse over properties
li.ectsubverticalmenu3 a - The properties of the category links which spawn sub-categories
li.ectsubverticalmenu3 a:hover - The mouse over properties of the category links which spawn sub-categories
li.ectsub1 - Sub-menus

Arrow images

If you want a copy of the default arrow images used in the css example above, right click on the two below and save them to your main images folder

arrow.gif

arrowov.gif

Back to top

CSS accordion menu

The accordion menu is a vertical menu which displays the home categories vertically with the sub menus appearing below on mouse click as in the image below and the example on our demo store.

CSS acordion menu

To enable the accordion menu, add the following where you want it to appear...

ASP Version

<% menustyle="verticalmenu2" %>
<!--#include file="vsadmin/inc/incmenu.asp"-->

PHP Version

<?php $menustyle='verticalmenu2' ?>
<?php include "vsadmin/inc/incmenu.php"?>

... making sure that those lines come somewhere after the 4 main ASP / PHP include lines.

You will now want to change the appearance of the menu so it fits into your existing design. The menu above uses the following css that can be added to your main css file, in most templates this is called style.css.

ul.ectmenu1 {
list-style: none;
border:0px solid;
font-size:14px;
padding:0px;
width:254px;
}
.ectmenu1 li{
border: 1px solid #ddd;
padding:10px;
background-color:#fff;
margin-left:-20px;
}

li.ectsub a{
padding:10px;
}
li.ectsub a:hover{
color: #5A75AE;
padding:10px;
}

 

 

Back to top

Adding links to your css menus

You will probably want to add links to non-product and category pages to the menu such as a home page link or a link to your cart. To do this all you need to do is set up a category, and call it "Home" for example. In the field " Category URL (Optional)" enter the page name, typically in this case default.asp or index.php. Make sure you select "Home Category" when choosing from the drop down, Sub Category Of...

CSS admin

You can adjust where the new page appears on the menu by using the sort order drop down choices on the main category page. These non-product pages can also have their own drop-downs and pop-outs, just select "Sub Category Of..." when defining the new page.

Multiple CSS menus

You may want more than one menu on a page, for example a horizontal drop down menu in the top navigation bar and a vertical accordion menu in the left navigation.

ASP Version

Add the following where you want the horizontal menu to appear

<% menustyle="horizontalmenu1" %>
<!--#include file="vsadmin/inc/incmenu.asp"-->

and then where the accordion menu should appear

<% displayectmenu("verticalmenu2") %>

...or for the pop-out menu

<% displayectmenu("verticalmenu3") %>

PHP Version

Add the following where you want the horizontal menu to appear

<?php $menustyle='horizontalmenu1'; ?>
<?php include "vsadmin/inc/incmenu.php"?>

and then where the accordion menu should appear

<?php displayectmenu('verticalmenu2'); ?>

...or for the pop-out menu

<?php displayectmenu('verticalmenu3'); ?>

You will probably want to style each menu differently and that can be done by changing the number on each of the css classes.

For example the properties of the home categories for the horizontal menu would be

ul.ectmenu1

... for the accordion menu that would be

ul.ectmenu2

...and for the pop out menu that would be

ul.ectmenu3

You would change all the css classes accordingly.

Back to top

Troubleshooting the css menus

I have added the code but the menus are not appearing.

You will need a minimum store version of 5.9. You can check your version number in your control panel, and it should display on all pages. Also make sure you have uploaded all the files from the updater to the server. If you are using two vsadmin folders for security / ssl reasons, both will need updating.

I get an error like "Data source name not found and no default driver specified" or the content of the page doesn't appear.

It's important that the 4 main ASP or PHP lines come somewhere before the incmenu include line. You can move the 4 ASP / PHP include lines further up the code, just after the opening <body> tag for example.

The menu appears but with no design showing.

The css classes above should be added to your main css file, not the one in the vsadmin folder. Make sure the css file has been uploaded to the server and that the page has a line like this that calls that css file

<link rel="stylesheet" type="text/css" href="style.css" />

Back to top