Pure CSS Mega Menu

[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 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

[DarkAngel]

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

[DarkAngel]

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?

[nigelt74]

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

[picaflor-azul]

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

[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!

[picaflor-azul]

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

[GumboStandards]

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.

[GumboStandards]

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.

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