Home > 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.
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.
The hierarchy for the sub-categories will be updated automatically
so they will look something like this
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 do be linked off one category
link in the menu, set that to FALSE.
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 and the example on our demo
store.
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
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 and the example on our demo
store.
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.ectmenuhassub1 a{
display:block;
padding:4px;
background-image:url(images/arrow.gif);
}
li.ectmenuhassub1 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.ectmenuhassub1 a - The properties of the category links which spawn sub-categories
li.ectmenuhassub1 a:hover - The mouse over properties of the category links
which spawn sub-categories
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.
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:10px;
padding:0px;
background-color: #fdedc9;
}
li.ectmenu1 {
border: 1px dotted #e69d01;
padding:0px;
background-color:#fdedc9;
}
li.ectmenuhassub1 a{
display:block;
padding:4px;
background-image:url(images/arrow2.gif);
}
li.ectmenuhassub1 a:hover{
display:block;
padding:4px;
background-image:url(images/arrow2ov.gif);
background-color: #e69d01;
color: #fff;
}
li.ectmenu1 a{
display:block;
padding:4px;
}
li.ectmenu1 a:hover{
background-color: #e69d01;
color: #fff;
}
li.ectsubmenu1{
background-color: #efefef;
border-bottom:0px;
}
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.ectmenuhassub1 a - The properties of the category links which spawn sub-categories
li.ectmenuhassub1 a:hover - The mouse over properties of the category links
which spawn sub-categories
li.ectsubmenu1 - The properties of the category which contains products
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...
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.
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" />
|
