Pure CSS Mega Menu

[nigelt74]

Yep Thats what i have been trying

http://grumpykiwi.com/index.php?main_page=index

On my test site, i have been trying to make the menu wide enough for the Category "Boris eugene Bunny the third->" to fit on one line, however no matter what i do the text stays the same width even if the body of the drop down is wider.

[picaflor-azul]

Yep Thats what i have been trying

http://grumpykiwi.com/index.php?main_page=index

On my test site, i have been trying to make the menu wide enough for the Category "Boris eugene Bunny the third->" to fit on one line, however no matter what i do the text stays the same width even if the body of the drop down is wider.

You can add this to the stylesheet_mega_menu.css file:

.mega-menu .levels li a{width:your new width;}

Thanks,

Anne

[gameoverbeyond]

Hi Ann,
Love the add on. I'm using this on a test site and would like to change the "Categories" tab to only include certain categories. I'll create a second tab to display the rest. I figured out how to show the second tab of categories, but I'm having difficulty getting the box to populate. I've searched the forums and I keep seeing to check the "categories_ul_generator.php". I checked this file but I have no idea what I'm looking at. How would I edit this to pull only certain categories? I'm assuming that I can copy this file and rename it to generate the contents of the second tab I'd like to create once modified. Any Help, guidance, or a link to figure out how to modify this files coding would be great.

[gameoverbeyond]

Hi Ann,
Love the add on. I'm using this on a test site and would like to change the "Categories" tab to only include certain categories. I'll create a second tab to display the rest. I figured out how to show the second tab of categories, but I'm having difficulty getting the box to populate. I've searched the forums and I keep seeing to check the "categories_ul_generator.php". I checked this file but I have no idea what I'm looking at. How would I edit this to pull only certain categories? I'm assuming that I can copy this file and rename it to generate the contents of the second tab I'd like to create once modified. Any Help, guidance, or a link to figure out how to modify this files coding would be great.

OK, I've made significant progress. I now have the next tab showing and it is populating with a parent category. I edited the headermenu.php to call up the next "tab" with its title, I linked this through the tpl_mega_menu.php by copying the the categories portion into another tab and linking it to a renamed copy of my categories_ul_generator. I did determine in order to have a second file, the "zen_categories_ul_generator" instances had to be renamed for each file you would want to add. However, I still can't figure out how to filter the files in the categories_ul_generator.php to show only wanted categories and sub. I'm close, just not quite there. Below is some of the coding I changed highlighted:

headermenu.php

/*bof categories definitions*/
define('HEADER_TITLE_CATEGORIES','Systems');

/*bof 3DO*/
define('HEADER_TITLE_3DO','3DO');

/*bof manufacturers definitions*/
define('HEADER_TITLE_MANUFACTURERS','Shop by Brand');


tpl_mega_menu.php
Line 68
</li><!-- eof categories -->

<li class="submenu 3do-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_3DO; ?></a><!-- bof 3DO -->

<div class="dropdown_1column">
<div class="col_1 firstcolumn">
<div class="levels">
<?php

// load the UL-generator class and produce the menu list dynamically from there
require_once (DIR_WS_CLASSES . 'categories_ul_generator_3do.php');
$zen_CategoriesUL = new zen_categories_ul_generator1;
$menulist = $zen_CategoriesUL->buildTree(true);
$menulist = str_replace('"level4"','"level5"',$menulist);
$menulist = str_replace('"level3"','"level4"',$menulist);
$menulist = str_replace('"level2"','"level3"',$menulist);
$menulist = str_replace('"level1"','"level2"',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
$menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
echo $menulist;
?>
</div>
</div>
</div>
</li><!-- eof 3DO -->

categories_ul_generator.php
Line 24
class zen_categories_ul_generator1 {
var $root_category_id = 87, <---THIS GETS ME THE PARENT CATEGORY WITH SUB-CAT
$max_level = 0,
$data = array(),
$parent_group_start_string = '<ul%s>',
$parent_group_end_string = '</ul>',
$child_start_string = '<li%s>',
$child_end_string = '</li>',
$spacer_string = '
',
$spacer_multiplier = 1;

var $document_types_list = ' (3) ';
// acceptable format example: ' (3, 4, 9, 22, 18) '

function zen_categories_ul_generator1($load_from_database = true)

[picaflor-azul]

Hi Ann,
Love the add on. I'm using this on a test site and would like to change the "Categories" tab to only include certain categories. I'll create a second tab to display the rest. I figured out how to show the second tab of categories, but I'm having difficulty getting the box to populate. I've searched the forums and I keep seeing to check the "categories_ul_generator.php". I checked this file but I have no idea what I'm looking at. How would I edit this to pull only certain categories? I'm assuming that I can copy this file and rename it to generate the contents of the second tab I'd like to create once modified. Any Help, guidance, or a link to figure out how to modify this files coding would be great.

This will take some custom programming. You can start by looking at the includes/templates/your_template/common/tpl_mega_menu.php file and the categories_ul_generator.php.

Thanks,

Anne

[gjh42]

My guess would be that it would be easier and less processing to just run categories_ul_generator once, and limit the portion of its results that is output for each tab. Find the base iterator (the variable that is incremented to step through the result) and stop it at a certain number for the first tab, then start it at the next number for the second tab. You may be able to determine the correct number by evaluating the current categories id in the result and comparing it to the id of the category where you want to start the second tab.

It might also work to do an array_split or something like that, dividing the result into two separate result sets at a desired breakpoint. A little PHP research may be in order here...

[gjh42]

It looks like array_chunk() or something based on it will be the way to accomplish the second method above.
http://us1.php.net/manual/en/function.array-chunk.php
If the second set of results is larger than the first, it will be cut up as well into pieces no larger than the first. So care will be required when using this. Also, the result might be an "iterable object" and not a "true array", in which case you would need to use a function described in the comments below it.

[jewelsnpearls]

Hi Anne,
In the mega-menu I have an annoying issue: when I select a subcategory the parent category stays selected (as I want it) and it takes the properties of the main menu when selected (in my case: white to azure, black text). But the text is moved to the left side, so it touches the edges.

Whatever I tried, I cannot get the text in the right position - any change I make that works on these parents, also works on the top level - and that big fat headline moving back and forth 3 px is totally annoying.

I've tried changing the output of the categories generator, but I simply don't know which class or div they are...
Please check the image. I also add the adjusted stylesheet. can you help me out? What I would really like is to make the parent link (but not the head) pink.
Can you help me out? Any help is appreciated!

Just in case the problem is not clear: the parents jump 3 px to the left side, they do not align with the non-selected (and also not with the hovering) text.

.

The stylesheet:

#mega-wrapper {width: 1048px;/*change this to the width of your site*/margin:0 auto;display:block;position: relative;z-index:9999;
margin-bottom:1em; top:-2em;}
#mega-wrapper .mega-menu {padding-left: 10px; width: 1012px;/*set this width to your site width minus 40px*/
background: White;

filter: progidXImageTransform.Microsoft.gradient(startColorstr='White', endColorstr='WhiteSmoke'); /* for IE */
background: -moz-linear-gradient(top, White, WhiteSmoke);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(WhiteSmoke));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

list-style:none;margin:30px auto 0px auto;height:30px;padding:0px 10px 0px 10px;}

.mega-menu li {float:left;text-align:center;position:relative;margin-right:10px;margin-top:2px;}
.mega-menu li.fullwidth {position: static !important;}
.mega-menu li:hover {background: azure; border:1px solid WhiteSmoke;margin-right:6px;}
.mega-menu li a {color: black /*was White*/;outline:0;padding: 5px 12px 3px 12px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}
.mega-menu li:hover a {color:#444;position:relative;z-index:11;padding: 4px 11px 3px 11px;}
.mega-menu li:hover div a {display:inline;}
.mega-menu li .drop {font-family:'Montserrat', Arial, Helvetica, sans-serif;padding-right:16px;}
.mega-menu li:hover .drop {padding-right:19px;}
.infoMenu :hover {background: green; color:white;}

/* bof right aligned menu item */
.mega-menu .right {float:right;right:0;margin-right:5px;}
.mega-menu li.right:hover {margin-right:5px;}

/* bof drop down styles */
.mega-menu .dropdown_1column, .mega-menu .dropdown_2columns, .mega-menu .dropdown_3columns, .mega-menu .dropdown_4columns, .mega-menu .dropdown_5columns, .mega-menu .dropdown_customer_service,
.mega-menu .dropdown_aboutus, .mega-menu .dropdown_info, .mega-menu .dropdown_fullwidth {
margin:4px auto;left:-999em;position:absolute;border:0px solid #494949;padding:10px;text-align:left;margin-top: 1px;background: pink;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, Azure, White);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(Pink));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

}
.mega-menu .dropdown_1column {width: 148px;}
.mega-menu .dropdown_2columns {width: 300px;}
.mega-menu .dropdown_customer_service {width: 605px;}
.mega-menu .dropdown_aboutus {width: 585px;}
.mega-menu .dropdown_info {width: 490px;}

/* bof drop down on mouse hover left aligned */
.mega-menu li:hover .dropdown_1column, .mega-menu li:hover .dropdown_2columns, .mega-menu li:hover .dropdown_customer_service, .mega-menu li:hover .dropdown_aboutus, .mega-menu li:hover .dropdown_info {left:-1px;top:25px;}

.mega-menu li:hover {
filter: progidXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, white, Azure);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(Azure));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;}


/* bof drop down on mouse hover right aligned */
.mega-menu li .align_right {/*-moz-border-radius: 20px 0px 20px 20px;-webkit-border-radius: 20px 0px 20px 20px;border-radius: 20px 0px 20px 20px;*/}
.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}



/* bof column sizes */
.mega-menu .col_1, .mega-menu .col_2 {display:inline;float: left;position: relative;margin-left: 10px;}
.mega-menu .col_1 {width:148px;}
.mega-menu .col_2 {width:300px;}
.mega-menu .col_cs {width:605px;}
.mega-menu .col_aboutus {width:585px;}
.mega-menu .col_3 {width:485px;}
.mega-menu .col_4 {width:610px;}
.mega-menu .col_5 {width:765px;}
.mega-menu .col_6 {width:920px;}

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown */
.mega-menu .firstcolumn {margin-left: 0; /* Clearing margin & left */clear: left;}

/*bof content*/
.mega-menu p, .mega-menu ul, .mega-menu li, .mega-menu h2, .mega-menu h3 {font-size:18px;line-height:21px;text-align:left;color:#d85d60;}
.mega-menu p {font-size:14px; font-family:'Rambla';line-height:18px;margin:0;margin-bottom:10px;color:#444;}
.mega-menu h2, .mega-menu h3 {border-bottom:1px solid black;margin-top:7px;color:#444;}
.mega-menu h2 {font-size:24px;margin-bottom:18px;padding-bottom:11px;font-weight:normal;}
.mega-menu h3 {font-size:16px;margin-bottom:14px;padding-bottom:7px;font-weight:normal;}
.mega-menu li:hover div a {text-decoration:none;border:none;padding:0;}

/* bof images */
.mega-menu .imgshadow_light {padding:4px;border:0px solid black;margin-top:5px;margin-left:20px;}

/* bof standard lists styles */
.mega-menu li ul {list-style:none;padding:0;margin:0 0 12px 0;}
.mega-menu li ul li {font-size:15px;font-family:'Rambla', Arial, Helvetica, sans-serif;line-height:24px;position:relative;padding-left:3px;margin:0;float:left;text-align:left;width:145px;}
.mega-menu li ul li a {padding:0;font-weight:normal;text-transform:none;color:#444;}
.mega-menu li ul li:hover {/*background:none;*/border:none;padding:0;margin:0;}

/* bof 2 levels drop down */
.mega-menu .levels, .mega-menu .levels ul {/* all lists */padding: 0;margin: 0;list-style: none;}
.mega-menu li:hover .levels a {display:block;}
.mega-menu .levels a {display: block;width: 10em;font-weight:normal;}
.mega-menu .levels a.parent, .mega-menu .levels a.parent:hover {}
.mega-menu .levels li {float: left;width:150px;}
.mega-menu .levels li ul {/* second-level lists*/ position: absolute;border:0px solid #444;background: #efefef;
filter: progidXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, Azure, white);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(white));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;top:-21px;margin:15px 0px 0px 4px;padding:6px;left: -999em;
}

.mega-menu .levels li ul ul {top:-21px;}
.mega-menu .levels li:hover ul ul, .mega-menu .levels li:hover ul ul ul {left: -999em;}
.mega-menu .levels li:hover ul, .mega-menu .levels li li:hover ul, .mega-menu .levels li li li:hover ul {left: 147px;}

/*bof menu colors*/
.menu_red {background: White;height:45px;}
.menu_red li:hover div a {color:#444;}
.menu_red li:hover div a:hover {background-color:#990000;text-decoration:none;background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}

/*.menu_red li ul li a:hover, .menu_red li selected a {background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}*/

/*bof customer service*/
.mega-payments{float:left;}
.mega-confidence{float:right;width:60%;}
.mega-about{float:left;width:70%;}
.mega-right{float:right;position: relative;margin-left: 10px;width:145px;}

.down2 {position:relative; top: 3px; padding-right:10px;}

[philip937]

Good day!
recently saw The required information is scattered across very different sources, and we have to spend half the evening for the transition to reference the necessary sites. And here all the instructions you need on a single resource . Try it!
I found hereEveryone has different tastes, but I really liked the site !
Do not waste your precious time , try it now!
Good luck!

how is it that someone that has only posted once can spam the forum with anchor links! Pi55 off loosers

[picaflor-azul]

It looks like array_chunk() or something based on it will be the way to accomplish the second method above.
http://us1.php.net/manual/en/function.array-chunk.php
If the second set of results is larger than the first, it will be cut up as well into pieces no larger than the first. So care will be required when using this. Also, the result might be an "iterable object" and not a "true array", in which case you would need to use a function described in the comments below it.

Thank you for posting. This is a great help :-)

Thanks,

Anne