Pure CSS Mega Menu

[nyrissa]

Hi, I just installed this on one of my sites and it seems to have gone in fine, but the old nav bar is still there. lol
I re-read the directions for installing it a few times, and it doesn't look like I missed anything. But I can't quite figure out what's up because I'm still rather new to zen-cart.
My site: http:// anyrissa bjd .x10 .bz/
I haven't adjusted it for width yet or anything, until I get the double-nav bar issue figured out.
I should also probably note that I am just trying it out on this site so I didn't break my other site. lol So it will not be staying on this one.

Thank you very much for this module! I built one of these for my old site with HTML and CSS, but I couldn't get it to work on this one. So this works just perfect. :)

[DarkAngel]

Hi, I just installed this on one of my sites and it seems to have gone in fine, but the old nav bar is still there. lol
I re-read the directions for installing it a few times, and it doesn't look like I missed anything. But I can't quite figure out what's up because I'm still rather new to zen-cart.
My site: http:// anyrissa bjd .x10 .bz/
I haven't adjusted it for width yet or anything, until I get the double-nav bar issue figured out.
I should also probably note that I am just trying it out on this site so I didn't break my other site. lol So it will not be staying on this one.

Thank you very much for this module! I built one of these for my old site with HTML and CSS, but I couldn't get it to work on this one. So this works just perfect. :)

Is your nav bar ez pages? turn the ones off for header in admin/tools

did you go to admin/layout settings/Categories-Tabs Menu ON/OFF -- and turn to off (0)

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

[JohnnyScience]

So there is a hovermenu over the "Info" tab & there are some things I'd like to edit out, even completely disable one of the two columns & maybe just combine one of the links from the left & put it in the single list.

Say I want to ghost out the entire General Info column, where/what would I put to do so?

Here is the code that I can't seem to ghost out:

<li class="information-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_INFORMATION; ?></a><!-- bof information -->
 
	    <div class="dropdown_info">
        
		<div class="col_1">
            	    <h3><?php echo TITLE_GENERAL; ?></h3>
                    <ul>
			<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo BOX_INFORMATION_ABOUT_US; ?></a></li>
                	<?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo BOX_INFORMATION_SITE_MAP; ?></a></li>
                	<?php } ?>
              		<?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_GV; ?></a></li>
                	<?php } ?>
                	<?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_DISCOUNT_COUPONS; ?></a></li>
                	<?php } ?>
               		<?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_UNSUBSCRIBE; ?></a></li>
                	<?php } ?>
                     </ul>   
                 </div>
    
		<div class="col_1">
                     <h3><?php echo TITLE_CUSTOMERS; ?></h3>
                     <ul>
			<?php if ($_SESSION['customer_id']) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
                	<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
                	<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo TITLE_NEWSLETTERS; ?></a></li>
                	<?php } else { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
                	<li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
                	<?php } ?>
                    	<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a></li>
                        <?php if (DEFINE_SHIPPINGINFO_STATUS <= 1) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo BOX_INFORMATION_SHIPPING; ?></a></li>
                        <?php } ?>
                        <?php if (DEFINE_PRIVACY_STATUS <= 1)  { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo BOX_INFORMATION_PRIVACY; ?></a></li>
                        <?php } ?>
                        <?php if (DEFINE_CONDITIONS_STATUS <= 1) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo BOX_INFORMATION_CONDITIONS; ?></a></li>
                        <?php } ?>
                     </ul>   
                 </div>

[DarkAngel]

I changed one to just one column without header name by changing this

<div class="dropdown_info">

<div class="col_1">
<h3><?php echo TITLE_GENERAL; ?></h3>



to this after I decided what I wanted to keep in that tab...then put the others into another tab and named it Account Info...lol


<div class="dropdown_1column">
<div class="col_1 firstcolumn">
<ul class="levels">

This way I split it into two tabs with general info in one and the account info in the other like:

<li class="information-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop">General Information</a><!-- bof information -->
 
 <div class="dropdown_1column">
                <div class="col_1 firstcolumn">
                   <ul class="levels">
                   <?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?>
                    <li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo BOX_INFORMATION_SITE_MAP; ?></a></li>
                    <?php } ?>
                      <?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?>
                    <li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_GV; ?></a></li>
                    <?php } ?>
                    <?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') { ?>
                    <li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_DISCOUNT_COUPONS; ?></a></li>
                    <?php } ?>
                       <?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
                    <li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_UNSUBSCRIBE; ?></a></li>
                    <?php } ?>
                     </ul>   
                 </div>
      </li><!-- eof information -->

That way I could delete what I did not want showing from the code of the mod. Note that I also removed the <?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?> parts

The account info one looks like this:

<li class="account-li"><a href="YOUR STORE LINK" class="drop">Account Info</a><!-- bof account -->
 
 <div class="dropdown_1column">
                <div class="col_1 firstcolumn">
                   <ul class="levels">
                   
                   
                    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
                    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
                    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo TITLE_NEWSLETTERS; ?></a></li>
                    
                    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
                    <li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
                
                        <li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a></li>
                        
                       
                     </ul>   
                 </div>

                

      </li><!-- account -->

[JohnnyScience]

Well I was able to put them into a single column by just changing the width of the column.

But what/where do I add <!-- --> or /**/

I tried both in multiple areas/configurations & I couldn't get any of the code to ghost out.

I've highlighted the specific parts of the code I'd like to ghost out so they don't show up on the drop down menu.

<li class="information-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_INFORMATION; ?></a><!-- bof information -->
 
	    <div class="dropdown_info">
        
		<div class="col_1">
            	    <h3><?php echo TITLE_GENERAL; ?></h3>
                    <ul>
			<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo BOX_INFORMATION_ABOUT_US; ?></a></li>
                	<?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo BOX_INFORMATION_SITE_MAP; ?></a></li>
                	<?php } ?>
              		<?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_GV; ?></a></li>
                	<?php } ?>
                	<?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_DISCOUNT_COUPONS; ?></a></li>
                	<?php } ?>
               		<?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_UNSUBSCRIBE; ?></a></li>
                	<?php } ?>
                     </ul>   
                 </div>
    
		<div class="col_1">
                     <h3><?php echo TITLE_CUSTOMERS; ?></h3>
                     <ul>
			<?php if ($_SESSION['customer_id']) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
                	<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
                	<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo TITLE_NEWSLETTERS; ?></a></li>
                	<?php } else { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
                	<li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
                	<?php } ?>
                    	<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a></li>
                        <?php if (DEFINE_SHIPPINGINFO_STATUS <= 1) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo BOX_INFORMATION_SHIPPING; ?></a></li>
                        <?php } ?>
                        <?php if (DEFINE_PRIVACY_STATUS <= 1)  { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo BOX_INFORMATION_PRIVACY; ?></a></li>
                        <?php } ?>
                        <?php if (DEFINE_CONDITIONS_STATUS <= 1) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo BOX_INFORMATION_CONDITIONS; ?></a></li>
                        <?php } ?>
                     </ul>   
                 </div>