Support for CSS Flyout Menu

Printable View

Show 100 post(s) from this thread on one page

17 Feb 2012, 07:25 PM
Serious

Re: Support for CSS Flyout Menu

ZC 1.39

I downloaded and installed on my local site yesterday and was happy with the results...really awesome add-on!

I was able to muddle through color and arrow changes fairly easily as well.

So now in the cold light of day I'd like to make a change that i can't seem to figure out. I currently have the categories background set to transparent but would like to add a background color for the cats when cursor passes over them (Hover).

I played around on my local site and can't seem to figure it out.

I do have it installed on my live site now as well.
seriousoffroadproducts.com
17 Feb 2012, 07:50 PM
gjh42

Re: Support for CSS Flyout Menu

In stylesheet_categories_menu.css, add the line in red to get

#nav-cat li a:hover {
color: #FFFFFF;
background-color: #ff3344;
}

Adjust to taste.
17 Feb 2012, 07:54 PM
Get Em Fast

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by Serious

ZC 1.39

I downloaded and installed on my local site yesterday and was happy with the results...really awesome add-on!

I was able to muddle through color and arrow changes fairly easily as well.

So now in the cold light of day I'd like to make a change that i can't seem to figure out. I currently have the categories background set to transparent but would like to add a background color for the cats when cursor passes over them (Hover).

I played around on my local site and can't seem to figure it out.

I do have it installed on my live site now as well.
seriousoffroadproducts.com

Find and edit the color in the block of code below..............

Code:

#nav-cat li a:hover { color: #FFFFFF; }

Hope this helps.
17 Feb 2012, 08:13 PM
Serious

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by Get Em Fast

Find and edit the color in the block of code below..............

Code:

#nav-cat li a:hover { color: #FFFFFF; }

Hope this helps.

Sort of....it turned the text black

Quote:

Originally Posted by gjh42

In stylesheet_categories_menu.css, add the line in red to get

#nav-cat li a:hover {
color: #FFFFFF;
background-color: #ff3344;
}

Adjust to taste.

That did it.
Take a look and tell me what you think
17 Feb 2012, 11:18 PM
gjh42

Re: Support for CSS Flyout Menu

Yep, looks good. I somehow didn't think you'd keep the flaming red:)
18 Feb 2012, 12:51 AM
Serious

Re: Support for CSS Flyout Menu

I tried it on my local site first.....good thing!;)
29 Feb 2012, 08:57 AM
Loter

Re: Support for CSS Flyout Menu

is it possible to hover level2 when level3 is hovered?
29 Feb 2012, 09:22 AM
Loter

Re: Support for CSS Flyout Menu

I mean to hover Dame on this image
http://www.image-share.com/upload/1318/108.jpg
3 Mar 2012, 12:07 AM
windsurfer

Re: Support for CSS Flyout Menu

I have this installed in V1.5 and works great, i was just wondering though if it is possible to change some settings so the flyout occurs a little smoother ?
Thank you
3 Mar 2012, 12:52 AM
gjh42

Re: Support for CSS Flyout Menu

windsurfer - Get Em Fast would have to advise on that, as it would probably involve the jQuery effects.

Loter - To get hover effects on the higher items in the tree, find in your stylesheet_categories_menu.css the rule like this

Code:

#nav-cat li a:hover { color: #FFFFFF; background-color: #000000; }

and add a rule above it to get this

Code:

#nav-cat li:hover>a { color: #FFFFFF; background-color: #a00000; } #nav-cat li a:hover { color: #FFFFFF; background-color: #000000; }

Adjust properties to fit your situation.
20 Mar 2012, 10:46 AM
kronemag

Re: Support for CSS Flyout Menu

I buyed a template from template monster, but after the changes we have made to this template we have a problem with hover menu. Now the menu must be on 2 rows as seen here:
http://kronemag.de/shop1/

Here you can find how it looked before:
http://www.templatemonster.com/zenca...tes/37597.html

The question is : Can we delay the drop down of the menu on mouse over?

This is how includes/templates/theme592/jscript/jscript_xdropdown_menu.js looks like:

//script added by Get Em Fast Web Designs
var isAnimating = false;
var $toClose = null;

$(function () {
$('#dropMenu .level1 .submenu.submenu').hover(function() {
if (!isAnimating) {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).slideUp(500);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).slideDown(200);
isAnimating = true;
}
}, function() {
$toClose = $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li');
setTimeout(function(){if($toClose!=null){
$($toClose).stop(true, true).slideDown(500);
$($toClose).stop(true, true).slideUp(200);
$toClose = null;
isAnimating = false;
}}, 200);
});});

Can anyone help? Thank you.
20 Mar 2012, 02:15 PM
DivaVocals

Re: Support for CSS Flyout Menu

Wrong support thread for this menu.. Looks like the good folks at Template Monstrosity oops I mean Template Monster "borrowed" the code from the CSS dropdown menu.. (which I'm sure they fully disclosed.. yeah right..) You need to post question sin that support thread.. However, I'd suggest downloading the add-on and READING the readme which should provide some insight on how to manipulate the speed of the dropdown..

Quote:

Originally Posted by kronemag

I buyed a template from template monster, but after the changes we have made to this template we have a problem with hover menu. Now the menu must be on 2 rows as seen here:
http://kronemag.de/shop1/

Here you can find how it looked before:
http://www.templatemonster.com/zenca...tes/37597.html

The question is : Can we delay the drop down of the menu on mouse over?

This is how includes/templates/theme592/jscript/jscript_xdropdown_menu.js looks like:

//script added by Get Em Fast Web Designs
var isAnimating = false;
var $toClose = null;

$(function () {
$('#dropMenu .level1 .submenu.submenu').hover(function() {
if (!isAnimating) {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).slideUp(500);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).slideDown(200);
isAnimating = true;
}
}, function() {
$toClose = $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li');
setTimeout(function(){if($toClose!=null){
$($toClose).stop(true, true).slideDown(500);
$($toClose).stop(true, true).slideUp(200);
$toClose = null;
isAnimating = false;
}}, 200);
});});

Can anyone help? Thank you.
22 Mar 2012, 10:05 PM
Get Em Fast

Re: Support for CSS Flyout Menu

Just change the .slideUp and .slideDown numbers to a lower (faster) or higher (slower) number.

Hope this helps.
25 Mar 2012, 10:22 PM
gotyed

Re: Support for CSS Flyout Menu

Hello,

I successfully installed and modified the colors for this add on - I really appreciate your work.

Just one question though, is there any option to show the products count in each category? I had it in my old category sidebox.

And if I'm already asking, how do your remove the "..." after new products or all products etc?

Thank you!
26 Mar 2012, 02:23 AM
DivaVocals

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by gotyed

Hello,

I successfully installed and modified the colors for this add on - I really appreciate your work.

Just one question though, is there any option to show the products count in each category? I had it in my old category sidebox.

And if I'm already asking, how do your remove the "..." after new products or all products etc?

Thank you!

Your questions have NOTHING to do with the topic of this support thread which is "Support for CSS Flyout Menu"..

You need to create a NEW topic and ask your questions in your new post, not in the support thread for this menu..
26 Mar 2012, 10:16 AM
gotyed

Re: Support for CSS Flyout Menu

Hello,

I installed the CSS Flyout Menu, I had some questions because it was a little different from my old - non flyout menu.

I'm just not sure why isn't it related to this topic?

Thanks
26 Mar 2012, 12:25 PM
fonzie

Re: Support for CSS Flyout Menu

Hi,

first of all, thanks for a great module,

I'm also using the 'display specific categories' module, to hide certain categories to all but 1 customer,

these specific categories don't show in the categories sidebox, but still show in the flyout menu, because these categories are not excluded in the flyout menu,

any idea how I can exclude these categories in the flyout menu ? the 'display specific categories' module created a new table in the database called 'categories_customers',

thanks for any help,
26 Mar 2012, 01:48 PM
DivaVocals

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by gotyed

Hello,

I installed the CSS Flyout Menu, I had some questions because it was a little different from my old - non flyout menu.

I'm just not sure why isn't it related to this topic?

Thanks

Your question looked like you were asking abut your categories sidebox..

Looking at this site: http://kronemag.de/shop1/ it doesn't look like you do not have the CSS Flyout Menu installed.. It looks as if you have the CSS Dropdown menu installed. IF your question is related to that menu, you need to post it in the correct support thread.. 'Tis all..:smile:
26 Mar 2012, 01:59 PM
gotyed

Re: Support for CSS Flyout Menu

Hi,

I didn't really understand what you meant in your example, I don't have the dropdown menu, but the CSS Flyout Menu installed.
I used it to replace my categories sidebox, so I asked the questions. Sorry for the misunderstanding .

BTW, I resolved the thing with the points, it was stupid not to look around, but concerning the product count I couldn't find the answer.

Thank you!
26 Mar 2012, 02:17 PM
DivaVocals

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by gotyed

Hi,

I didn't really understand what you meant in your example, I don't have the dropdown menu, but the CSS Flyout Menu installed.
I used it to replace my categories sidebox, so I asked the questions. Sorry for the misunderstanding .

BTW, I resolved the thing with the points, it was stupid not to look around, but concerning the product count I couldn't find the answer.

Thank you!

Sorry.. I mixed your posts up with someone else's :laugh::laugh::laugh: I need to READ before I post..:smile:
28 Mar 2012, 04:58 AM
Get Em Fast

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by DivaVocals

Looks like the good folks at Template Monstrosity oops I mean Template Monster "borrowed" the code from the CSS dropdown menu.. (which I'm sure they fully disclosed.. yeah right..)

Sorry to be OT here, but couldn't help but giggle at Diva's comment.................

Uh-hu...........just like they're sharing the profit. :no:

That's okay, though. I know who put in the sweat and tears, AND I know something they apparently DON'T................that's the fact that this menu was "quick and dirty", but served the purpose for the time being.

AND the fact that I'm currently working (what little time I have to work on it) on a brand new, TOTALLY KICK-:censored: version(s) of BOTH the dropdown AND flyout menu's that I'm taking my time on, doing it all right, and will be cleaner, smoother, and overall more efficient for the shop-owners' customers, and will be less "weight" for overall operation of the shop-owners' site(s).

But..............since I'm now working a 8 - 5 "real" job these days (instead of design work), the new release(s) will be A WHILE away..............2 - 3 months at least.
28 Mar 2012, 05:16 AM
DivaVocals

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by Get Em Fast

Sorry to be OT here, but couldn't help but giggle at Diva's comment.................

Uh-hu...........just like they're sharing the profit. :no: .

As my friend's grandma use to say, "Tell the truth, shame the devil!!" **LOL**

Quote:

Originally Posted by Get Em Fast

But..............since I'm now working a 8 - 5 "real" job these days (instead of design work), the new release(s) will be A WHILE away..............2 - 3 months at least.

and I will be PATIENTLY waiting..:yes:
30 Mar 2012, 03:18 PM
bravo14

Re: Support for CSS Flyout Menu

Hi

I have just installed the CSS FLyout header, and it has stopped the remained of the page from showing

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> <head> <title>The Flower Stall, Flowers for all Occasions</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="Weddings Sympathy Anniversaries Just to say.... Mothers Day Nappy Cakes Corporate Gift Vouchers Weddings, Anniversaries, valentine, anniversary, sorry, birthday, gift, flowers, present " /> <meta name="description" content="The Flower Stall : - Weddings Sympathy Anniversaries Just to say.... Mothers Day Nappy Cakes Corporate Gift Vouchers Weddings, Anniversaries, valentine, anniversary, sorry, birthday, gift, flowers, present" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="author" content="The Zen Cart™ Team and others" /> <meta name="generator" content="shopping cart program by Zen Cart™, http://www.zen-cart.com eCommerce" /> <base href="http://www.the-flower-stall.co.uk/" /> <link rel="canonical" href="http://www.the-flower-stall.co.uk/" /> <link rel="stylesheet" type="text/css" href="includes/templates/the-flower-stall/css/stylesheet.css" /> <link rel="stylesheet" type="text/css" href="includes/templates/the-flower-stall/css/stylesheet_css_buttons.css" /> <link rel="stylesheet" type="text/css" href="includes/templates/the-flower-stall/css/stylesheet_header_menu.css" /> <link rel="stylesheet" type="text/css" media="print" href="includes/templates/the-flower-stall/css/print_stylesheet.css" /> </head> <body id="indexHomeBody"> <div id="mainWrapper">  <div id="headerWrapper">  <div id="navMainWrapper"> <div id="navMain"> <div id="navMainLinks"> <ul class="back"> <li><a href="http://www.the-flower-stall.co.uk/">Home</a></li> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=login&zenid=n49ig91352h7svbn03jfb8ell5">Log In</a></li> </ul> </div> <div id="navMainSearch"> </div> </div> </div> <div class="clearBoth"></div>   <div id="logoWrapperOuter"> <div id="logoWrapper"> <div id="logo"><a href="http://www.the-flower-stall.co.uk/"><img src="includes/templates/template_default/images/logo.jpg" alt="The Flower Stall" title=" The Flower Stall " width="700px" height="111px" /></a></div> </div> </div> </div> <div class="clearBoth"></div>      <div id="navCatTabsWrapper"> <div id="navCatTabs"> <ul> <li><a class="category-top" href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=4&zenid=n49ig91352h7svbn03jfb8ell5">Anniversaries</a> </li> <li><a class="category-top" href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=9&zenid=n49ig91352h7svbn03jfb8ell5">Corporate</a> </li> <li><a class="category-top" href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=6&zenid=n49ig91352h7svbn03jfb8ell5">Just to say....</a> </li> <li><a class="category-top" href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=7&zenid=n49ig91352h7svbn03jfb8ell5">Mothers Day</a> </li> <li><a class="category-top" href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=8&zenid=n49ig91352h7svbn03jfb8ell5">Nappy Cakes</a> </li> <li><a class="category-top" href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=3&zenid=n49ig91352h7svbn03jfb8ell5">Sympathy</a> </li> <li><a class="category-top" href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=1&zenid=n49ig91352h7svbn03jfb8ell5">Weddings</a> </li> <li><a class="category-top" href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=10&zenid=n49ig91352h7svbn03jfb8ell5">Gift Vouchers</a> </li> </ul> </div> </div>    <div id="dropMenuWrapper"> <div id="dropMenuWrapperb"> <div id="dropMenuWrapperc"> <div id="dropMenuWrapperd"> <div id="dropMenu"> <ul class="level1"> <li class="submenu"><a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&zenid=n49ig91352h7svbn03jfb8ell5">Home</a> <ul class="level2"> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=products_new&zenid=n49ig91352h7svbn03jfb8ell5">New Products</a></li> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=products_all&zenid=n49ig91352h7svbn03jfb8ell5">All Products</a></li> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=specials&zenid=n49ig91352h7svbn03jfb8ell5">Specials</a></li> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=advanced_search&zenid=n49ig91352h7svbn03jfb8ell5">Search</a></li> </ul> </li> <li class="submenu"><a href="http://www.the-flower-stall.co.uk/index.php?main_page=site_map&zenid=n49ig91352h7svbn03jfb8ell5">Categories</a> <ul class="level2"><li> <a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=4&zenid=n49ig91352h7svbn03jfb8ell5">Anniversaries</a></li><li> <a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=9&zenid=n49ig91352h7svbn03jfb8ell5">Corporate</a></li><li> <a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=6&zenid=n49ig91352h7svbn03jfb8ell5">Just to say....</a></li><li> <a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=7&zenid=n49ig91352h7svbn03jfb8ell5">Mothers Day</a></li><li> <a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=8&zenid=n49ig91352h7svbn03jfb8ell5">Nappy Cakes</a></li><li> <a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=3&zenid=n49ig91352h7svbn03jfb8ell5">Sympathy</a></li><li> <a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=1&zenid=n49ig91352h7svbn03jfb8ell5">Weddings</a></li><li> <a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&cPath=10&zenid=n49ig91352h7svbn03jfb8ell5">Gift Vouchers</a></li></ul> </li> <li class="submenu"><a href="http://www.the-flower-stall.co.uk/index.php?main_page=index&zenid=n49ig91352h7svbn03jfb8ell5">Information</a> <ul class="level2"> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=shippinginfo&zenid=n49ig91352h7svbn03jfb8ell5">Shipping Info</a></li> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=privacy&zenid=n49ig91352h7svbn03jfb8ell5">Privacy Policy</a></li> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=conditions&zenid=n49ig91352h7svbn03jfb8ell5">Conditions of Use</a></li>  <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=site_map&zenid=n49ig91352h7svbn03jfb8ell5">Site Map</a></li> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=gv_faq&zenid=n49ig91352h7svbn03jfb8ell5">Gift Certificate FAQ</a></li> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=discount_coupon&zenid=n49ig91352h7svbn03jfb8ell5">Discount Coupons</a></li> <li><a href="http://www.the-flower-stall.co.uk/index.php?main_page=unsubscribe&zenid=n49ig91352h7svbn03jfb8ell5">Newsletter Unsubscribe</a></li>

It doesn't appear to have completed the <ul> tag but I am not sure why

It also has started using a logo image from the template_default folder instead of the template I have put together.
30 Mar 2012, 03:31 PM
gjh42

Re: Support for CSS Flyout Menu

This thread is for the flyout *sidebox* menu, not the dropdown header menu. It would be better to post there to keep information in the relevant place.

Did you alter the file that makes the Information submenu? If so, you might have introduced a PHP error, which is what would stop it from executing like that. Are there supposed to be any more items in that submenu, or is </ul> supposed to be the next thing?

Answer these questions when you repost in the correct thread.
16 May 2012, 11:36 PM
bridge32

Re: Support for CSS Flyout Menu

Sorry to bring up an old thread, but i ahve this installed and i have spent time trying to figure out the small issue i have.
The issue is that when you have your mouse over the top category, the second level category flies out, but when you go to move your mouse to the 2nd level category it disappears.
The only way of getting it to work is if you move your mouse quickly onto the boxes.
Does anyone know how to overcome this problem, like speed or delay setting?
I am running version 1.39h and the site is www.cakekraft.co.uk if you are able to have a look and see what i mean.
Thank you
Nic.
17 May 2012, 01:42 AM
Get Em Fast

Re: Support for CSS Flyout Menu

Find this block of code in your stylesheet_categories_menu.css:

Code:

#nav-cat ul ul { position: absolute; top: 0; left: 200px; display: none; }

and change the 200 to something like 190, making that block look like:

Code:

#nav-cat ul ul { position: absolute; top: 0; left: 190px; display: none; }

That will move the "flyout's" closer in toward the current level, closing the gap in between the two...............it's that little tiny gap that your mouse is hitting, letting the menu "go away" before you get to the next level.

But, as you can see......................it's an easy fix. :smile:

Hope this helps.
17 May 2012, 12:50 PM
bridge32

Re: Support for CSS Flyout Menu

Thank you for the quick response, where can i find this file to edit.
Nic
17 May 2012, 12:52 PM
bridge32

Re: Support for CSS Flyout Menu

its ok found it!
And fixed it.
Many thanks
Nic
17 May 2012, 05:39 PM
DivaVocals

Re: Support for CSS Flyout Menu

**deleted**
19 May 2012, 07:51 PM
lat9

Re: Support for CSS Flyout Menu

What a great plugin! I'm glad someone posted here; I've been looking for this functionality for a while.
10 Jun 2012, 03:38 PM
Thannaree

Re: Support for CSS Flyout Menu

Hi Get Em Fast,

I've installed this module and it works great! However, I have a slideshow on the homepage, which also uses jquery (namely 2 scripts: jscript_jquery.cycle.all.min and jscript_jquery-1.4.2.min) and the slideshow broke. I have removed the jscript_jquery that comes with this module and all works perfectly now. Is it okay to use it this way?

The site uses zencart 1.5 : http://goo.gl/wydFf
10 Jun 2012, 05:04 PM
Get Em Fast

Re: Support for CSS Flyout Menu

Yep, you can use it without jquery, and the menu will function just fine as pure css. BUT......................if you use Nivo-Slider as your image slider, they will work together just fine together.
10 Jun 2012, 05:14 PM
Thannaree

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by Get Em Fast

Yep, you can use it without jquery, and the menu will function just fine as pure css. BUT......................if you use Nivo-Slider as your image slider, they will work together just fine together.

Okay...and thanks!!
10 Jun 2012, 05:33 PM
Get Em Fast

Re: Support for CSS Flyout Menu

Not a problem. But, it looks like you've got both of them working together now. Looks good.
13 Jun 2012, 06:01 PM
soso838

Re: Support for CSS Flyout Menu

1.how to remove the word of "Categories" and take out :color:87ceeb area for CSS Flyout Menu 1.3.9 ,
I just want the flyout menu begin with the category item from "hardware, software.........
2.can I change the color between "the New Products...",and"Geatured Products..."
13 Jun 2012, 06:09 PM
soso838

1 Attachment(s)

Re: Support for CSS Flyout Menu

sorry I did not attached the picture
Attachment 10630
14 Jun 2012, 12:01 AM
Get Em Fast

Re: Support for CSS Flyout Menu

Is this a "live" site? You got a URL for us?
6 Jul 2012, 12:14 PM
kezan98

1 Attachment(s)

Re: Support for CSS Flyout Menu

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.Attachment 10747

Any ideas?
6 Jul 2012, 03:55 PM
picandnix

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by 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.Attachment 10747

Any ideas?

Try this http://www.zen-cart.com/downloads.php?do=file&id=323 if you haven't already?
6 Jul 2012, 04:11 PM
Get Em Fast

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by 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.Attachment 10747

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.
6 Jul 2012, 04:59 PM
kezan98

Re: Support for CSS Flyout Menu

Thanks - I'm installing it now.
16 Jul 2012, 05:22 AM
scott_ease

Re: Support for CSS Flyout Menu

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...&products_id=7
Again, thanks for contribution. That benefit many users.
18 Jul 2012, 04:43 AM
scott_ease

Re: Support for CSS Flyout Menu show count

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/...&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.
20 Jul 2012, 02:14 AM
scott_ease

Re: Support for CSS Flyout Menu make font bold when selected

I found answer to show count next to category:
http://www.zen-cart.com/showthread.p...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.
24 Jul 2012, 06:13 AM
PeazzAndycresswell

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by 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

Www.consolecodeslab.com
24 Jul 2012, 11:34 AM
PeazzAndycresswell

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by 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

Www.consolecodeslab.com

Code:

#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;

}
24 Jul 2012, 03:53 PM
PeazzAndycresswell

Re: Support for CSS Flyout Menu

still not figured this one out :'(
28 Jul 2012, 11:11 PM
scott_ease

Re: Support for CSS Flyout Menu make font bold when selected

My problem solved. See
http://www.zen-cart.com/showthread.p...gory&p=1141055
26 Oct 2012, 02:21 AM
hubert

Re: Support for CSS Flyout Menu make font bold when selected

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
26 Oct 2012, 02:54 AM
gjh42

Re: Support for CSS Flyout Menu make font bold when selected

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.
23 Sep 2013, 08:50 PM
danielosko

Re: Support for CSS Flyout Menu

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
24 Sep 2013, 09:17 AM
tonibarcelona

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by 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');
}
24 Sep 2013, 04:01 PM
danielosko

Re: Support for CSS Flyout Menu

Quote:

Originally Posted by 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:
<div class="leftBoxContainer" id="categoriescss" style="width: 150px">
<h3 class="leftBoxHeading" id="categoriescssHeading">Categories</h3>

Thanks anyway,
Danny
24 Sep 2013, 04:54 PM
danielosko

Re: Support for CSS Flyout Menu

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

Show 100 post(s) from this thread on one page