kezan98:

Love the mod, it goes a long way to doing what I'm trying to do. I'm trying to mimic the image with the main top categories showing along the bar and when someone hovers it show subcategories as individual headings with the next level of categories down showing directly under the heading.

Any ideas?

Looks like you're looking for a horizontal dropdown. This is a vertical flyout menu. Try THIS ONE (

CSS Horizontal Dropdown Menu With jquery

). It should be a real good start for you.

Hope this helps.

Thanks - I'm installing it now.

Get Em Fast:
CSS Flyout Menu is great, thanks.
I wonder if there is a way to make CSS Flyout Menu and Classic Menu compatible with each other, specifically,
i. show product count next to category
ii. Always show Categories and SubCategories when selected
These two functions are disabled under CSS Flyout Menu.
http://angelcorp.net/california-baby/index.php?main_page=product_info&cPath=1_4&products_id=7
Again, thanks for contribution. That benefit many users.

I'm still trying to figure out a way to show count next to category. A new problem came out which I thought wouldn't be hard at the beginning. I'd like to let the font bold (and stay bold) when selected, just like the Classic Menu.
http://angelcorp.net/zencartscottou/index.php?main_page=product_info&cPath=1_4&products_id=7
I noticed that
SPAN.category-subs-parent {
font-weight: bold; }
SPAN.category-subs-selected {
font-weight: bold; }
are used with Classic Menu, but I cannot successfully apply that to this CSS Flyout Menu after many tries.
Can someone help me? Thanks.

I found answer to show count next to category:
http://www.zen-cart.com/showthread.php?35992-Css-Flyout-Categories-Menu-troubles/page9
Get Em Fast, next time when you update, you may add in this function since it's always nice for users to have option. BTW, many thanks to you and DrByte for the contribution.

Still I haven't found solution to make font bold when selected. Please help. Thanks.

lat9:

What a great plugin! I'm glad someone posted here; I've been looking for this functionality for a while.

Hi mate

I am pretty new to web design, zen cart and same with CSS but so far I've done alright, but I've come unhinged.

I've created the graphics and got the hover over effect I want on the first set of tabs (category's) but for the life of me I cannot get the same effect on the sub category bars... The image just doesn't seem to small properly, I can get the Mage to show on mouse over but it's just to small any help would be great, if you got Firefox web developer tools just edit CSS on the Xbox page u an see the full style sheet, I've been messing with the bit at the bottom..

I've tried setting image width to 147px which is its die and same setting for first set of tabs with a width of 100% I've tried anything I could find within the document and nothing's working pulling my hair out :(

Any help would be great

https://Www.consolecodeslab.com

PeazzAndycresswell:

Hi mate

I am pretty new to web design, zen cart and same with CSS but so far I've done alright, but I've come unhinged.

I've created the graphics and got the hover over effect I want on the first set of tabs (category's) but for the life of me I cannot get the same effect on the sub category bars... The image just doesn't seem to small properly, I can get the Mage to show on mouse over but it's just to small any help would be great, if you got Firefox web developer tools just edit CSS on the Xbox page u an see the full style sheet, I've been messing with the bit at the bottom..

I've tried setting image width to 147px which is its die and same setting for first set of tabs with a width of 100% I've tried anything I could find within the document and nothing's working pulling my hair out :(

Any help would be great

https://Www.consolecodeslab.com

#dhtmlgoodies_menu{
	font-family:segoe ui;	/* Font for main menu items */
background-image: url(/images/mback.png) ;	  
list-style: none;
          width: 147px;
         
}
#dhtmlgoodies_menu	li{	/* Main menu <li> */
	list-style-type:none;	/* No bullets */
	margin:0px;	/* No margin - needed for Opera */
}
#dhtmlgoodies_menu ul{
	margin:0px;	/* No <ul> air */
	padding:0px;	/* No <ul> air */
}
#dhtmlgoodies_menu ul li ul{	/* Styling for those who doesn't have javascript enabled */
	padding-left:10px;
}
#dhtmlgoodies_menu	li a{	/* Main menu links */
	text-decoration:none;	/* No underline */
	color:#fff;	/* Blue text color */

	height:27px;	/* 20 pixel height */
	line-height:30px;	/* 20 pixel height */
	vertical-align:middle;	/* Align text in the middle */
	margin:1px;	/* A little bit of air */
	padding:1px;	/* Air between border and text inside */
        text-align:center;


	display:block;
}
#dhtmlgoodies_menu	li a:hover,#dhtmlgoodies_menu .activeMainMenuItem{
	background-image: url(/images/mback1.png) ;
        text-align:center;
        text-decoration:underline;
}
.dhtmlgoodies_subMenu{
	visibility:hidden;
	position:absolute;
	overflow:hidden;
	background-image: url(/images/mback.png) ;
        width: 145px;
	font-family:arial;
	text-align:center;

}
.dhtmlgoodies_subMenu ul{
	margin:0px;
	padding:3px;
}
.dhtmlgoodies_subMenu ul li{
	list-style-type:none;
	margin:0px;
	padding:6px;	/* 1px of air between submenu border and sub menu item - (the "white" space you see on mouse over )*/
}
.dhtmlgoodies_subMenu ul li a{	/* Sub menu items */
	white-space:nowrap;	/* No line break */
	text-decoration:none;	/* No underline */
	color:#fff;	/* Black text color */

	height:11px;	/* 16 pixels height */
	line-height:16px;	/* 16 pixels height */
	padding:1px;	/* 1px of "air" inside */

	display:block;	/* Display as block - you shouldn't change this */
}
.dhtmlgoodies_subMenu ul li a:hover{	/* Sub menu items - mouse over effects */
	background-image: url(/images/mback1.png) ;
	color:#bcdc65;	/* White text */
        vertical-align: middle;
        font-family:segoe ui;

}

still not figured this one out :'(

My problem solved. See
http://www.zen-cart.com/showthread.php?198375-Flyout-Menu-highlight-current-category&p=1141055

Hello,

I've installed this mod on ZC 1.5 and it works, I only have one problem, I would like categories which have subcategories to not be linked to pages.
|Pizzas
|---Regular
|-----14"
|-----16"
|---Calzone
I don't want the user to be able to get a page if he clicks on Pizzas nor on Regular but only if the submenu item is the latest child, only for 14", 16" and Calzone.

Thanks for your help
Regards
Hubert

This would require some custom code in a file to skip the <a> tag creation unless the category has products. Get Em Fast would be the best one to tell you what file and location to use, and the variable that will indicate product/not.
It might be possible to use some styling (z-index?) that would transparently cover the unwanted links rendering them unclickable, but I would be concerned that search engines might see that as "black hat" and penalize you.

Hello,

I am using ZenCart 1.5.0 and The latest release of the CSS Flyout Menu.

How do I change the standard "Categories" text in the stylesheet_categories_menu.css under the heading of #categoriescssHeading.leftBoxHeading to a category header image using BOXHEADING's?

This way my websites "view code" will not look like this:

It will instead look like this:

Any assistance would be greatly appreciated.

Thanks,
Danny

danielosko:

Hello,

I am using ZenCart 1.5.0 and The latest release of the CSS Flyout Menu.

How do I change the standard "Categories" text in the stylesheet_categories_menu.css under the heading of #categoriescssHeading.leftBoxHeading to a category header image using BOXHEADING's?

This way my websites "view code" will not look like this:

<div class="leftBoxContainer" id="categoriescss" style="width: 150px"> <h3 class="leftBoxHeading" id="categoriescssHeading">Categories</h3>

It will instead look like this:

<div class="leftBoxContainer" id="categories" style="width: 150px"> <h3 class="leftBoxHeading" id="categoriesHeading"><img src="includes/templates/classic/buttons/english/boxhead-categories.gif" alt="Categories" title=" Categories " width="150" height="40" /></h3>

Any assistance would be greatly appreciated.

Thanks,
Danny

#categoriescssHeading.leftBoxHeading {
background-image: url('includes/templates/classic/buttons/english/boxhead-categories.gif');
}

tonibarcelona:

#categoriescssHeading.leftBoxHeading {
background-image: url('includes/templates/classic/buttons/english/boxhead-categories.gif');
}

Thank you, But that STILL gives the resultant website "source code" of:

Thanks anyway,
Danny

Ok, I figured it out.

Since I am using the "images_for_titles_2-1" plugin..., I only needed to change my picture in the includes/templates/YOUR_TEMPLATE/buttons/English/ file from boxhead-categories.gif to boxhead-categoriescss.gif and then modify the stylesheet_categories_menu.css to reflect:

#categoriescss.leftBoxContainer {
background: #d########3;
border: 0px solid #0000ff;
width: 160px;
padding-bottom: 0px;
}

#categoriescssHeading.leftBoxHeading {
background: #3C8AFF;
border: none;
width: 160px;
margin: 0 0 0 0px;
height: 46px;
padding-top: 0.5em;
}

Hope this helps someone!
dANNY