Pure CSS Mega Menu

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)
{[color=red]$root_category_id = 113;[color/]
    return $this->buildBranch($this->root_category_id, '', $submenu);
}

nigelt74:

I have the megamenu running nicely as part of one of your templates.

What I would like to do is keep the shop drop down menu as is

take one specific category (its a top level category) and place it on the menu bar by itself and have its child categories drop down from it as well, is this possble?

I have cloned the categories_ul_generator.php file, and tried editing the sql query but i just seem to break it.

any ideas or pointers, I realise this is probably out of the scope of this thread, but I thought I'd ask

I was wanting to add the captcha that appears in our contact box to the drop down menu's box. Is there a way to do so. I tried adding the information for the captcha but only got a blank space...lol needless to say i goofed somewhere.

I have for now just left the contact us link only to have the "children" with spam and loads of time on their hands to use that area.

The captcha is the one from here, Captcha Anti-Robot Registration

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)
{[color=red]$root_category_id = 113;[color/]
    return $this->buildBranch($this->root_category_id, '', $submenu);
}

This is great to know and would love to see it in action

on another note I am a curious kitty and went to Sweet Brucies link...Is the main page supposed to look like that or is it still a work in progress site?

DarkAngel:

This is great to know and would love to see it in action

on another note I am a curious kitty and went to Sweet Brucies link...Is the main page supposed to look like that or is it still a work in progress site?

Cheers,regarding sweet Brucies, client must have made a booboo, fixed now, PMed you a link to see the code above in action

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)
{[color=red]$root_category_id = 113;[color/]
    return $this->buildBranch($this->root_category_id, '', $submenu);
}

I am happy that you figured it out and posted your solution.

Thanks,

Anne

Thank you for the mod, Anne. Instructions were impeccable!

I've got it up and running on Xampp localhost and it looks great so far. One question I have is about reordering the content so that the categories list appears toward the bottom of the HTML source code. Google never gets deep enough and rates too many pages as similar when I have category content so high. I don't know how this was done in Apple Zen, which I've been using -- CSS or javascript? -- so I can turn to its files when I've the time if you are unsure on how to go about converting this mod. But if you have any ideas or urls to share on where I should start (Imma gonna be brain dead for a week or two), that'd be awesome. If not, c'est la vie. I've got the whole year to finish this! Wait, what? Only nine+ hours left in the year? Ruh-roh. :)

Happy New Year!

GumboStandards:

Thank you for the mod, Anne. Instructions were impeccable!

I've got it up and running on Xampp localhost and it looks great so far. One question I have is about reordering the content so that the categories list appears toward the bottom of the HTML source code. Google never gets deep enough and rates too many pages as similar when I have category content so high. I don't know how this was done in Apple Zen, which I've been using -- CSS or javascript? -- so I can turn to its files when I've the time if you are unsure on how to go about converting this mod. But if you have any ideas or urls to share on where I should start (Imma gonna be brain dead for a week or two), that'd be awesome. If not, c'est la vie. I've got the whole year to finish this! Wait, what? Only nine+ hours left in the year? Ruh-roh. :)

Happy New Year!

I am not exactly sure what you are asking. Do you want to to move the categories to the bottom of the tpl_mega_menu.php file?

Thanks,

Anne

picaflor-azul:

I am not exactly sure what you are asking. Do you want to to move the categories to the bottom of the tpl_mega_menu.php file?

Thanks,

Anne

Oh, light switch! While thinking about how I go about hacking Zen's php, I came up with what should have been obvious to me much earlier. If I transfer Apple Zen's menu's CSS naming convention to tpl_mega_menu.php, this might regain me my desired source code order. I'll report later.

After finishing typing out what is below, I came up with the idea above, so the rest of this is, well, I wrote it, so I'll just leave it.

No, it won't matter where categories appears in tpl_mega_menu.php unless I can figure out how to ensure where tpl_mega_menu.php's HTML output ends up when you view a page's source code. You know, right click a web page and select View Page Source (or the equivalent). For this, the source, is what googlebot scans. So it is crucial to SEO to ensure the unique content of a page appears toward the top rather than be obliterated by a list of hundreds of categories, which is what is now happening in my case from the switch of using jettrue's Apple Zen template menu.

FWIW, my understanding in rearranging the order of where content appears in the HTML source code is that it can be done through CSS or javascript, but I've no good idea how it is done. I read somewhere via Google search that the issue with using CSS is it doesn't always work well across all browsers, but I am not sure why that matters if the concern is with a bot, so long as the bot sees the order you desire. The issue with javascript is... actually, I don't know. Because for me is when I find the time to learn one iota of javascript is when I learn the whole shebang. It's a long overdue endeavour. As is CSS. But I can manage to cobble together enough on CSS to edit it or view another's css to figure out how to do something. Sometimes. I'm much better applying the same technique to PHP. Yet another language I should take the time to learn.

If this is not your bailiwick, I understand. I'll figure it out soon enough.

The following three steps should be enough of a start for anybody else trying to achieve source-ordered HTML code (or whatever this SEO-friendly source code content ordering method is called).

1. OPEN includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php
...INSTEAD OF opening: includes/templates/YOUR_TEMPLATE/common/tpl_header.php, see item 3 of "Step 1: Unzip and Prepare Package" in the mega menu readme file

FIND

<!--eof- banner #6 display -->

INSERT AFTER

<!--bof-mega menu display--> 
<?php require($template->get_template_dir('tpl_mega_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_mega_menu.php');?> 
<!--eof-mega menu display-->
<div class="clearBoth"></div>

2. OPEN includes/templates/YOUR_TEMPLATE/common/tpl_mega-menu.php

FIND

<div id="mega-wrapper" style="margin-bottom:-1em"><!-- bof mega-wrapper -->

INSERT BEFORE

<div id="dropMenuWrapper">

FIND

</div><!-- eof mega-wrapper -->

INSERT AFTER

</div><!-- eof dropMenuWrapper-->

3. OPEN includes/templates/YOUR_TEMPLATE/css/stylesheet.css

FIND

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background-color: #e5edf5;
	}

INSERT AFTER*

#dropMenuWrapper {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	}

*Obviously, your stylesheet varies significantly from mine. I did test this with Zen Cart's default stylesheet, swapping it for my stylesheet but within my test site including all of its mods and hacks, and this works. The drop menu is placed at the top of my HTML page (but it shuffles other DIVs around undesirably but that's without all 14k of my edits to Zen Cart's default stylesheet.css). To move it into the position you desire, I imagine all you will need to do is find the CSS tags in your stylesheet.css that you want your mega menu appearing before and/or after. IOW YMMV.

Forgot to mention in the above instruction set that the HTML output of mega menu will now be placed at the bottom of the HTML source code of any page on your site using the mega menu. IOW, the mega menu will continue to appear at or toward the top of the page in your browser but to searchbots all content within the mega menu will be scanned (almost) last.

GumboStandards:

Forgot to mention in the above instruction set that the HTML output of mega menu will now be placed at the bottom of the HTML source code of any page on your site using the mega menu. IOW, the mega menu will continue to appear at or toward the top of the page in your browser but to searchbots all content within the mega menu will be scanned (almost) last.

Thank you for posting your solution. When your site is on a live server I would love it if you would post the link here.

Thanks,

Anne

Great looking menu.

I wonder about compatibility to touch devices. In my tests this one doesn't fair too well or I am missing something.

There is no hover.

The "logic" on touch is a bit different such that if you click/touch a thing with a submenu said submenu appears and you can click or touch the submenu item and until such action the submenu stays on the screen unless navigation goes elsewhere.

This seems an issue here and particularly on a screen/menu like "about us" link which has a hover based little blob there of text that will never be seen by a touch application without a forced click to view and double click to go to about us page.

How are folks handling this do folks just assume the click-through to the physical about us page for such things? Market penetration of touch is quite high so the menu format is even more complex.

And if I wanted to force such click through behavior is that something easily done?

JimmyV:

Great looking menu.

I wonder about compatibility to touch devices. In my tests this one doesn't fair too well or I am missing something.

There is no hover.

The "logic" on touch is a bit different such that if you click/touch a thing with a submenu said submenu appears and you can click or touch the submenu item and until such action the submenu stays on the screen unless navigation goes elsewhere.

This seems an issue here and particularly on a screen/menu like "about us" link which has a hover based little blob there of text that will never be seen by a touch application without a forced click to view and double click to go to about us page.

How are folks handling this do folks just assume the click-through to the physical about us page for such things? Market penetration of touch is quite high so the menu format is even more complex.

And if I wanted to force such click through behavior is that something easily done?

The code is not specially optimized for mobile devices. If you want to use the menu for this purpose, you will have to optimize the code.

Thanks,

Anne

Well e erything is touchscreen now unless u buy older technology. The days of non touchscreen computers and laptops is maybe 2 years away as devices die.

BTW you have wonderfhl informative site.

Hello
I have tried without luck to reduce the line widths in both the dropdown's " Customer Service" and "About Us", if I reduce the width of the dropdown's the lines and text carry outside the menu. I can change the line color, but not the width.
any help on this would be appreciated.

jogr:

Hello
I have tried without luck to reduce the line widths in both the dropdown's " Customer Service" and "About Us", if I reduce the width of the dropdown's the lines and text carry outside the menu. I can change the line color, but not the width.
any help on this would be appreciated.

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

Thanks,

Anne

JimmyV:

Well e erything is touchscreen now unless u buy older technology. The days of non touchscreen computers and laptops is maybe 2 years away as devices die.

BTW you have wonderfhl informative site.

Please feel free to optimize the menu code for touchscreen devices. You can post your code here, or send it to me and I will include it in a future package update.

Thanks,

Anne

I will monkey with it a bit. I was really hoping you would do it all for me :smile:

I am well past mice being the majority of users in fact the percentage really dropped after Christmas this year.

Ok, How do i double the width of the drop downs, I just can't seem to get that to work, I can make it wider but the text in the menus stays the same, as in a long category names wraps, even if there is room for it.

Any ideas?

nigelt74:

Ok, How do i double the width of the drop downs, I just can't seem to get that to work, I can make it wider but the text in the menus stays the same, as in a long category names wraps, even if there is room for it.

Any ideas?

If you post a link to the site I can take a look. You can change all widths and anything style related in the stylesheet_mega_menu.css file.

Thanks,

Anne