Pure CSS Mega Menu

psvialli:

How would I add a EZpage link into customer service Drop down ?

You can edit the includes/templates/override/common/tpl_mega_menu.php file.

Thanks,

Anne

Can the menu items be centered easily? I can move them around with margins in the appropriate line of css, but would like to have them automatically center so that if/when I add other items I don't have to go back and change the margin settings.

Thanks, JT

jt3c:

Can the menu items be centered easily? I can move them around with margins in the appropriate line of css, but would like to have them automatically center so that if/when I add other items I don't have to go back and change the margin settings.

Thanks, JT

If you post a link to your site, I can take a look.

Thanks,

Anne

Well, I have it only on a local server at this point. Was just coming back to post that I spoke too soon and can't seem to center the menu items with margin or padding.
Here's a screen shot if it'll help:

Not sure that that came through.

Anyway, in the css the "float: left;" in the following line is causing all links to justify to the left side of the menu bar.

.mega-menu li {float:left;text-align:center;position:relative;margin:6px 20px 0px 0;border:none;}

I want to center them. Can't float:center, so is there a way to do it some other way? As mentioned above I've messed with margins and padding in a variety of places but can't get the items to center on the bar with the same relative margins/padding amongst themselves. This would basically end up with roughly 300px to the left and right of the whole group of links and whatever is the default in relation to each other.

Any help is greatly appreciated as I'm obviously still a relative noob.
JT

PS. REALLY love the menu, thanks ever so!!! JT

jt3c:

Well, I have it only on a local server at this point. Was just coming back to post that I spoke too soon and can't seem to center the menu items with margin or padding.
Here's a screen shot if it'll help:

Not sure that that came through.

Anyway, in the css the "float: left;" in the following line is causing all links to justify to the left side of the menu bar.

.mega-menu li {float:left;text-align:center;position:relative;margin:6px 20px 0px 0;border:none;}

I want to center them. Can't float:center, so is there a way to do it some other way? As mentioned above I've messed with margins and padding in a variety of places but can't get the items to center on the bar with the same relative margins/padding amongst themselves. This would basically end up with roughly 300px to the left and right of the whole group of links and whatever is the default in relation to each other.

Any help is greatly appreciated as I'm obviously still a relative noob.
JT

I am sorry, but if I can see the site on a live server I can use firebug to help you. I can't do this on your local server ;-)

Thanks,

Anne

Great module and the template 14916 I purchased last night is great! How do you adjust the number of letters that appear in the dropdowns - mainly the "Brands" Single column? I know it is in the stylesheet_mega_menu but what and where do I put in to stretch the number of characters/pixels of text that are shown? I'd really appreciate a pointer on this as I usually can figure these things out...?

beco1979:

Great module and the template 14916 I purchased last night is great! How do you adjust the number of letters that appear in the dropdowns - mainly the "Brands" Single column? I know it is in the stylesheet_mega_menu but what and where do I put in to stretch the number of characters/pixels of text that are shown? I'd really appreciate a pointer on this as I usually can figure these things out...?

Do you want to show more characters of the manufacturers names, or do you just want to increase the width of the drop down to show the names on one line?

Thanks,

Anne

Hi Anne,
Thanks for your reply, I want to increase the number of characters shown in the brand/manufacturers menu.
At the moment it shows"amazing brandna.." But I would like it to be the full word " amazing brand name". Can this be easily done?
Thanks again,
Beco

beco1979:

Hi Anne,
Thanks for your reply, I want to increase the number of characters shown in the brand/manufacturers menu.
At the moment it shows"amazing brandna.." But I would like it to be the full word " amazing brand name". Can this be easily done?
Thanks again,
Beco

Try this:

http://www.zen-cart.com/showthread.php?71338-Character-limit-on-manufacturer-names&p=408123#post408123

Thanks,

Anne

Thanks so much. Never thought of the obvious - Admin..... silly me.

beco1979:

Thanks so much. Never thought of the obvious - Admin..... silly me.

No problem ;-)

Thanks,

Anne

Well I hate to come back and ask for help on this again, but I and stumped and I need some help resolving this once and for all.. I made the recommended changes to change my categories dropdown into a two column display. This works fine.. The categories are displayed in two columns..

However, when you hover over the column on the left, the column on the right "jumps" over to the left. I've run out of ideas to fix this.. Hoping that someone in the comunnity can help me sort out what it is I am missing to fix this once and for all.. (PRETTY PLEASE)

You can see what I mean here: http://clientlaserdiscvault(dot)overthehillweb(dot)com/ Hover over the "Our Products" link to see the two column category display.. Now hover over the categories in the left column and see how the categories in the right column "jump" to the left..

DivaVocals:

Well I hate to come back and ask for help on this again, but I and stumped and I need some help resolving this once and for all.. I made the recommended changes to change my categories dropdown into a two column display. This works fine.. The categories are displayed in two columns..

However, when you hover over the column on the left, the column on the right "jumps" over to the left. I've run out of ideas to fix this.. Hoping that someone in the comunnity can help me sort out what it is I am missing to fix this once and for all.. (PRETTY PLEASE)

You can see what I mean here: http://clientlaserdiscvault(dot)overthehillweb(dot)com/ Hover over the "Our Products" link to see the two column category display.. Now hover over the categories in the left column and see how the categories in the right column "jump" to the left..
You're losing 35px of right-margin on the hover. At line 80, you've got

.mega-menu .level2 li {
    margin-right: 35px;
}

and the styling on line 75 sets the margin to 0 on hover. Just set margin: 0 35px 0 0;

lat9:

You're losing 35px of right-margin on the hover. At line 80, you've got

.mega-menu .level2 li {
margin-right: 35px;
}

> and the styling on line 75 sets the margin to 0 on hover.  Just set margin: 0 35px 0 0;
Lat9!!! My hero!!! THANK YOU SOOOOO MUCH!!!!!:clap: I have been staring at this so long that it looks like I missed the obvious.. Though I didn't know what the answer was, my gut told me it was in my stylesheet and not in the categories_ul_generator.php (as it had been suggested me was the key to the solution).. So glad I decided to try one more time to ask for help.. :laugh:

nigelt74:

OK, ignore my post, as soon as i posted and went back i saw my error, i was editing the wrong file

All i had to do was change this function in my cloned categories_ul_generator.php which I had called categories_ul_generator_bb.php, by adding the line in red to limit it to only my selected category and its kids

function buildTree($submenu=false)
{$root_category_id = 113;
    return $this->buildBranch($this->root_category_id, '', $submenu);
}

This post caught my attention.. I want to limit the categories shown in the categories dropdown.. How would this code have to be structured if I wanted more than one category.. ie: a list of specific categories versus just a sing category or ALL categories... Would the categories_ul_generator.php require other changes as well??

Has anyone managed to get a sidebox into this CSS mega-menu?

I've been trying to add the advanced search box into a dropdown and if I can get that done, I'd also like to have the shopping cart sidebox in another dropdown.

Has anyone got any ideas?

Excellent script by the way, and highly recommended if you haven't tried it.

Currently in action at https://www.thefabulousdogcompany.com

Cheers

Kristian

DivaVocals:

Lat9!!! My hero!!! THANK YOU SOOOOO MUCH!!!!!:clap: I have been staring at this so long that it looks like I missed the obvious.. Though I didn't know what the answer was, my gut told me it was in my stylesheet and not in the categories_ul_generator.php (as it had been suggested me was the key to the solution).. So glad I decided to try one more time to ask for help.. :laugh:

I am happy that you figured it out ;-)

Thanks,

Anne

Has anyone managed to get a sidebox into this CSS mega-menu? Editable Centerboxes from Plugins allows standard sideboxes to be used in the center column, and the code that does it may be able to be adapted to work in the mega-menu environment.

In fact, it might be that you can just install Editable Centerboxes, not use any of the standard box locations, and move or add a simple function call to "middleboxes" in the mega-menu code. The readme for that mod has more info about this.

gjh42:

Editable Centerboxes from Plugins allows standard sideboxes to be used in the center column, and the code that does it may be able to be adapted to work in the mega-menu environment.

In fact, it might be that you can just install Editable Centerboxes, not use any of the standard box locations, and move or add a simple function call to "middleboxes" in the mega-menu code. The readme for that mod has more info about this.LOVE the Editable Centerboxes add-on!!

I love that it adds the same kind of "widgets anywhere" functionality to Zen Cart (similar to WordPress templates).. Opens up the possiblity for so many more flexible layout options in Zen Cart!!!

Kristian -- you can see the Editable Centerboxes add-on in action on the demo site I posted earlier..