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


Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site

 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Dynamic CSS Menu styling Tips
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Sinbad
Administrator

USA
65850 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

Sinbad
Administrator

65850 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

Crystal
Advanced Member

220 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 www.backcountry.com?

Version: Ecommerce Plus PHP v6.2.8

dbdave
ECT Moderator

USA
8804 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.
http://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

Sinbad
Administrator

65850 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.


Mobile






Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2020 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000