When looking to distinguish different menu sections one way is to use css to style the new section.

View the page source in your browser window you will see the generated menu which will look something like the following, where ect0_1234 is the identifing menu item that we are looking for.

<li class="ectmenu1" id="ect0_1234" onclick="if .......>Category Name </a></li>

In the style sheet you can do something like:

li#ect0_1234.ectmenu1 a{background: url('images/ImageName.jpg'); background-repeat:no-repeat; background-attachment:scroll; width:205px;}

The above is just a example change the attributes to whatever you like use background color vs image or set a different font color / family. Play with it and have fun making your menus pop with style.

This works with multiple menus on the pages using the class ectmenu2

Winners never quit, quitters never win
User Manual for Ecommerce Templates

Update - taking that tip a step futher to the sub menu items just view the page source and grab the menu id that you want to change. Then setup the id and attributes in the style sheet.



Winners never quit, quitters never win
User Manual for Ecommerce Templates

Do you have any examples of putting this styling into practice?

Are there ways to make really nice user friendly and good looking dynamic css menus with ecommertemplates to achieve something like the drop down menus on www.backcountry.com?

Version: Ecommerce Plus PHP v6.2.8

Hi Crystal, Sinbad's suggestion is related to the css menu options built into the code.
You can find info on that here.
https://www.ecommercetemplates.com/help/css-menus.asp

In particular, Sinbad's tip has to do with altering the look of just a portion of the menu. I actually used this tip myself to hide a portion of my menu for smaller responsive views.

I think you are just asking about the menu itself and that link should get you going in the right direction.

If you have trouble you should make a post in the php technical or design questions forums

David

**Top Drop down Menu in columns*** This tip works well when the menu items are all top level - Not tested for menus with sub-drop downs.

To set the menu item into columns you will need to the following class to the megastyle.css or whatever style sheet you are using for the menu. adjust the height / count / gap/ width as needed.

#ecttop0_0 {
height: 150px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
align-self: auto;
column-gap: 40px;
width: 600px;
}

Then go to the mobile settings for your menu and add the class adjusting the height to auto change the count to 1
#ecttop0_0 {
height: auto;
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}


Here is the result for the above.


Mobile






Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates