CSS Dropdown menu for the header- With Categories!

Hi there and thanks for a fantastic mod! I've modified the menu quite heavily, but found no way of creating a "tree". What I basically want to do is...

Menu header 1
  |_ Submenu A
     |_ Item A
     |_ Item B
     |_ Item C
  |_Submenu B
  |_Submenu C
  |_Submenu D
     |_ Item A
     |_ Item B
     |_ Item C

How do I create the tree branches for Item A-B-C? This has nothing to do with categories, as I've already removed them, but with ordinary menu items. Categories seems to rely on ul_generator, I want to go way more simple and hard code it in there.

scrap:

Hi there and thanks for a fantastic mod! I've modified the menu quite heavily, but found no way of creating a "tree". What I basically want to do is...

Menu header 1
|_ Submenu A
|_ Item A
|_ Item B
|_ Item C
|Submenu B
|Submenu C
|Submenu D
| Item A
| Item B
| Item C

> 
> How do I create the tree branches for Item A-B-C? This has nothing to do with categories, as I've already removed them, but with ordinary menu items. Categories seems to rely on ul_generator, I want to go way more simple and hard code it in there.

Bump. Noone?

Hi,

I need some help getting my styling right with this mod.

Biggest issue is with the sub-cats. When they show up, the borders are not long enough on either sides and the name of the cats are not centered at all - they favor the top portion of the space. Also when they come up, they are about halfway up the 'block' of the main cats.

The main cats are ok, but I would like them to be more centered in their blocks, they favor the top. Also for 'Gift Catalog, when you hover the mouse over it, the bottom border disappears!

I guess the best thing I can do is to give a link to my site, so that you can see what I'm saying: http://www.a u t o m o t i v e a c e.com. The site is currently down for maint' don't worry about that.

Also here is the css, I have made some changes (in an attempt to custom style it!) which have comments by them:

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*blue*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #005599/*ffffff*/!important;background:#eeeeee/*005599 6C99D9 116eb9*/;text-decoration:underline/*added*/;}

/*red 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/ 

/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
	
#dropMenuWrapper {
	width:100%;
	height:42px;/*25px*/
	margin:0;
	font-size:9px;/*11px*/
	/*background-color: #eeeeee;/*added*/
	}
	
div#dropMenu { /*width of top level categories across the top*/
  	width:100%;/*750px*/
  	margin:0 auto;
    text-align:;/*center*/
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
	margin:0;
	padding:0;
	}
	
div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0;
	float: left; 
	line-height:1em;/*1em adjusts the height of the menu items*/
	width:10%;/*added*/
	*width:9.8%;/*added*/
	}
	
div#dropMenu ul.level1 {
	width:100%;/*750px*/
	margin:0 auto; 
	text-align:center;/*center*/
	background:#eeeeee;/*4f4f4f 005599*/
	height:38px;/*25px adjusts the height of the color*/
	z-index:1000;
	border-top:2px solid #00008b;/*added 005599*/
	border-bottom:2px solid #00008b;/*added 005599*/
	}
	
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 5px/*25px*/;text-decoration: none; text-transform:uppercase; color:#005599/*ffffff*/; text-align:center/*center*/; border-right:1px solid #005599/*ffffff*/; border-left:1px solid #005599/*added ffffff*/; border-bottom: 0px solid #005599/*added*/;height:26px/*added*/;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #116eb9/*ccc*/; width:13em/*13*/;padding:4px 0/*added*/;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#eeeeee/*4f4f4f 005599*/;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#eeeeee/*4f4f4f 005599*/;}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color:#005599/*white ffffff*/; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f/*005599*/;}

Any help is greatly appreciated!

my dropdown menu isn't working on ie !!! I mean submenus don't show up!!!
my website is alepia.ch

http://www.purelypoultry.com/

I only want one layer of categories to show in the Dropdown box.

Right now if you hover to Products-> books it will show several sub categories of books. I would like the Dropdown menu to only show books and then you can click on books and go to the books page and select the subcategories.

This would eliminate 20 links from every page and if they are subcategories they do not need to be linked from every page.

I am trying to lower the number of links from each page to less than 100 because google says they want less than 100 links on each page.

Can we get some help here?

Hi,

I just uploaded all the files, but I can't see the menu. I think I must have turned something off ages ago when I set the site up. Can you tell me what I've turned off?

https://www.imaginart.com.au

Thanks!

Kind Regards,

Brian

I have just been told to turn on the Categories-Tabs Menu. This has done something...but not sure if it is what I'm after??? It certainly turned something on, but it is above the header (I thought it would be under) and it isn't a drop down type menu. So, there is either a different menu I need to turn on, or that is it and I now have a problem with the mod itself re positioning and not being a drop down.

Brian Flanagan:

Hi,

I just uploaded all the files, but I can't see the menu. I think I must have turned something off ages ago when I set the site up. Can you tell me what I've turned off?

https://www.imaginart.com.au

Thanks!

Kind Regards,

Brian

I don't think jettrue has been around lately, unfortunately.

As well as uploading all the files, did you insert the lines of code into the header file?

Sorry I can't be more specific at the moment but I'm doing this from memory and it's been quite a while since I installed this mod. I'm sure all the instructions are in the readme.

Craig

Thanks. Turns out I was putting the header info too high up in the file. I moved it down and it fixed the issue.

Could someone please help clarify where this code mode is placed? File? Approximate line? Thanks!

marksu:

Well never mind.

I made the changes my self it was mutch simpler than I thought.

Not sure if anyone care as not mutch communication hre but if somebody need solution here it is.

It is based on my earlier design which enables to add ezpaged filtering which groups they belong.

It would be even better code if it could outomatically check if multi languge expages module is installed instead of using comments character. Wen I dont know how to do it so this will do.

// --------------------

If ($chapNumber != ""){

// USE THIS IS MULTI-LANGUGE EZPAGES MODULE NOT INSTALLED
// $page_query = $db->Execute("select * from " . TABLE_EZPAGES . " where toc_chapter = " . $chapNumber . " and status_header = 1 order by header_sort_order, pages_title");

// USE THIS IS MULTI-LANGUGE EZPAGES MODULE IS INSTALLED
// query modified for multi-language support
$page_query = $db->Execute("select e.pages_id, e.page_open_new_window, e.page_is_ssl, e.alt_url, e.alt_url_external, et.pages_title
from " . TABLE_EZPAGES . " e, " . TABLE_EZPAGES_TEXT . " et
where toc_chapter = " . $chapNumber . " and e.pages_id = et.pages_id
and et.languages_id = '" . (int)$_SESSION['languages_id'] . "'
and status_header = 1
and header_sort_order > 0
order by header_sort_order, pages_title");
// end of modification

} else

{
// USE THIS IS MULTI-LANGUGE EZPAGES MODULE NOT INSTALLED
$page_query = $db->Execute("select * from " . TABLE_EZPAGES . " where status_header = 1 order by header_sort_order, pages_title");

// USE THIS IS MULTI-LANGUGE EZPAGES MODULE IS INSTALLED
// query modified for multi-language support
$page_query = $db->Execute("select e.pages_id, e.page_open_new_window, e.page_is_ssl, e.alt_url, e.alt_url_external, et.pages_title
from " . TABLE_EZPAGES . " e, " . TABLE_EZPAGES_TEXT . " et
where e.pages_id = et.pages_id
and et.languages_id = '" . (int)$_SESSION['languages_id'] . "'
and status_header = 1
and header_sort_order > 0
order by header_sort_order, pages_title");
// end of modification
}
// --------------------

marksu

I am having a problem where EZPage titles will not appear on the CSS Drop Down menu. I am using the Spanish language pack with the most current version of ZenCart and this CSS Dropdown menu. The above code appears that it may correct the problem, but does not list how or where to implement it. Also, strangely, the default EZPage links (I've left the external link to ZenCart on the menu) work OK, but any pages added do not show up on the Header Menu. They show up and translate just fine on the sidebox and footer menus. I have searched for hours to no avail. Any suggestions? The site I am referring to is: http://www.altaonemedical.com/index.php Thanks

Seems to me as if the links are there but no words are showing in the dropdown.

Have you got all the page titles entered? Not sure how it works with multi languages, I only ever work with english.

Sorry I cannot help more.

You need to change your admin directory too. See here:
http://www.zen-cart.com/wiki/index.php/Important_Site_Security_Recommendations

Craig

CES:

Seems to me as if the links are there but no words are showing in the dropdown.

Have you got all the page titles entered? Not sure how it works with multi languages, I only ever work with english.

Sorry I cannot help more.

You need to change your admin directory too. See here:
http://www.zen-cart.com/wiki/index.php/Important_Site_Security_Recommendations

Craig

The titles are all entered. Thanks for the security suggestion, I will be doing that and other measures. Still not done with the site yet. Thanks

Hi,

I seem to be having spacing issues which is forcing my menu onto 2 lines.

Does anyone know how I need to edit the css file to fix this issue? I have tried many variations of the css code already but nothing seems to work.

Since I can't have it on a live website at the moment here is a screenshot of what I mean:

Any suggestions would be most welcome please.

Cheers
Claire :mellow:

Hi, I am a newbie to zen cart. I have installed the css flyout menu and it all works well but when I adjust the website template width to auto, the menu width got auto adjusted but the sub menu is not. How can I adjust that? My website http://www.bruneipartyshop.com

jettrue:

This add-on will allow you to have a horizontal css based flyout menu for your zen cart header. It also display your categories dynamically, along with other useful links for your customers. information. This mod was built upon a previous version built for earlier versions of zen cart.

You can see this mod in action at http://www.applezen.sagefish.com/

It is also integrated into the Apple Zen template found here:
http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_53&products_id=449

Submitted to the download section.

Yeah....:clap:
this is just what I need....
Thank you :clap:

How do I get the dropdown menu to not do subcategories? It is saying I have too many links on each page so I do not want it to do a dropdown for the different subcategories of chickens http://www.purelypoultry.com/

I doubt that Google's prescription of less than 100 links from a page is applicable to internal navigation; lots of sites have flyout-type menus that would run into that. Navigation logic should be your first concern.
A word from one of the experts like mprough would be in order here.

Hi,

Thank you very much for your wonderful work. I am new to zen cart and have installed the CSS flyout header.

However, my logo now turns out to be very small in the top corner with the 'Home' and 'Login/Register' still there. How should I edit my tpl_header?

I would appreciate it very much if you could help me with this. By the way, you can see what I meant from here:

https://www.fabulous-spree.com

Thanks a million :)