Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
 All Forums
 Tips and Tricks - HALL OF FAME
 Dynamic CSS Menu styling Tips
Author « Topic »  

ECT Moderator

65936 Posts

Posted - 08/09/2013 :  21:51:55  
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

ECT Moderator

65936 Posts

Posted - 08/09/2013 :  21:53:39  
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

Advanced Member

222 Posts

Pre-sales questions only
(More Details...)

Posted - 09/01/2013 :  12:28:25  
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

Version: Ecommerce Plus PHP v6.2.8

ECT Moderator

10267 Posts

Posted - 09/01/2013 :  13:10:18  
Hi Crystal, Sinbad's suggestion is related to the css menu options built into the code.
You can find info on that here.

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


ECT Moderator

65936 Posts

Posted - 06/05/2020 :  10:42:01  
**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.


Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates
  « Topic »  
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022
This page was generated in 0.03 seconds. Snitz Forums 2000