Zen Cart Logo
Forums / Addon Sideboxes / Support for CSS Flyout Menu

Support for CSS Flyout Menu

Views: 180,521

Results 561 to 580 of 755
10 Nov 2010, 11:35 AM
#561
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Support for CSS Flyout Menu

Hey, Flyout Menu users...........DO NOT download the new 1.3.9 version just yet. I forgot to add a file when I packed it up, so as of right now, that version is broken! I've uploaded another copy and I will let you know when the Dev Team has approved and switched it out with the latest copy.

Thanks,
Robert

10 Nov 2010, 11:52 AM
#562
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: Support for CSS Flyout Menu

Wow! Super fast work by the Dev Team. It's all good and can be downloaded now.

15 Nov 2010, 12:58 PM
#563
wefoundem avatar

wefoundem

New Zenner

Join Date:
Oct 2010
Posts:
93
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

Ok I know this mod was originally designed to be 150px wide, it was easy enough to change to 200 px. However it threw the alignment of the sub cat menus off a by....wait for it....50 px. I KNOW I have looked at the entry I need to change about 200 times last night, and I changed one by one all the margins I thought would do it (and then changed them back when they didnt) and even though I came up with some rather interesting effects (and some REALLY odd ones as well). All I want to do is move the sub cat and sub sub cat etc menus over to line up.

The only other thing I want to change is the categories header image to match the rest, is that in the stylesheet as well??

http://www.wefoundem.com/index.php

16 Nov 2010, 2:44 AM
#564
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: Support for CSS Flyout Menu

@ WeFoundEm..............Yea, looks like you got your copy right before I caught a couple of mistakes I made, and submitted a revised version.......1.3.9b.

Anyway, looks like you got the width down. Now, to make your second level hover above the rest of the menu. Add a z-index to this block of code making it look like:

#nav-cat ul {
   margin: 0px 0px 0px 0px; 
   padding: 0; 
   width: 200px; 
   background-color: #6495ed;
   z-index: 1000;
}

There........now 2nd level is above 1st level and is readable. Now, let's push it over a bit so it don't cover up so much of the 1st level. Change the margin to 200 in this section of code like this:

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

Now, that makes it flush with the right side of the 1st level. If you want it to overlap just a little, then change that to 190, 180, or something to your liking.

Now, you wanted to change the Heading, right? You can change this block of code to include your image that I assume you're going to make to match the rest of your sideboxes:

#categoriescssHeading.leftBoxHeading {
   background: #87ceeb; 
   border-bottom: 1px solid #0000ff; 
   margin-bottom: 1px;
}

to something like:

#categoriescssHeading.leftBoxHeading {
   background: url(../images/yourimage.gif); 
   margin-bottom: 1px;
}

Of course, you'll have to play with the margin and maybe add a padding to get your desired results.

If you need any more help with this, don't hesitate to ask.

17 Nov 2010, 3:38 PM
#565
wefoundem avatar

wefoundem

New Zenner

Join Date:
Oct 2010
Posts:
93
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

everything looks perfect except for the white text "categories".
Where can I delete that one, it is as persistent as my ex-wife lol.

Thanks again for all the help.

17 Nov 2010, 6:43 PM
#566
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: Support for CSS Flyout Menu

WeFoundEm:

everything looks perfect except for the white text "categories".
Where can I delete that one, it is as persistent as my ex-wife lol.

Thanks again for all the help.

Answered in pm, but posting here as well, so others may benefit from this answer, as well:

That is controlled by the defines in includes/languages/english/YOUR_TEMPLATE/english.php

If you have never modified the english.php file, then it would just be in includes/languages/english/english.php

You will be looking in that file for:

define('BOX_HEADING_CATEGORIES', 'Categories');

Just change that to:

define('BOX_HEADING_CATEGORIES', '');

and it will leave the Heading blank, so your image will show without the text showing.

17 Nov 2010, 6:55 PM
#567
wefoundem avatar

wefoundem

New Zenner

Join Date:
Oct 2010
Posts:
93
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

yep worked like a charm, thanks again.

20 Nov 2010, 12:18 AM
#568
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: Support for CSS Flyout Menu

Not a problem. Glad to help.

20 Nov 2010, 6:26 AM
#569
ashely avatar

ashely

New Zenner

Join Date:
Apr 2010
Posts:
43
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

Hi,

Thanks for another great module!

It works out perfect except on IE6. When I move mouse to a root category, its subcategory does not appear. Seemingly the hover function doesn't work on IE6.
So is it possible to make a small change to the stylesheet_categories_menu.css file to make it also workable on IE6?

Thank you for your time and patience in advance!

Regards,
Ashely

20 Nov 2010, 7:19 AM
#570
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: Support for CSS Flyout Menu

Ashely, did you read the "Readme" file that was included? In the very first paragraph of that file it states:
support for IE6 HAS BEEN DROPPED...WooHoo! This version has the csshover.htc file taken out, as calling it with the stylesheet caused problems with css validation, and still didn't work with IE6, anyway. So all support for IE6 has been dropped and this versions' css validates with w3c Validation services.

Do yourself a favor............forget about IE6. It's old news and most of the world has dropped ALL support for it, including Facebook (the worlds leading website at this time), Gmail, Youtube, Digg, Twitter Google, and even Microsoft themselves have dropped support for IE6, so let it die in peace, remembering the "good ole days" when that's all the MS BS we had to deal with.:smile:

If you have any problems with any IE browser version 7 or newer, I'll do my very best to help you find the problem.

Sorry, but IE6 is dead.
Robert

3 Dec 2010, 8:29 AM
#571
shanesoine avatar

shanesoine

Zen Follower

Join Date:
May 2010
Posts:
125
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

Love this mod and it works perfectly, would it be possible to do one of the following?
Install 2 or more instances of the menu to split concepts? assume that if this is possible I could give each its own colour

If not could I create a new category with its own colour?

Now I sell books but we need to take on different ranges of products and be able to give them a separate identity.
Thanks Shane

3 Dec 2010, 11:21 AM
#572
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: Support for CSS Flyout Menu

Shane, I've never tried to install 2 separate instances of this menu, but with a lot of work, it just might could be accomplished. Interesting idea..............

If you don't really need the Flyout, then the Categories Dressing menu already does this on a per category basis.

3 Dec 2010, 12:03 PM
#573
shanesoine avatar

shanesoine

Zen Follower

Join Date:
May 2010
Posts:
125
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

I really do need the fly out it is great, maybe if I could just change the colour of specific menu buttons - i am not a coder but assume i would do this by creating specific ul and li for those menu items - would that work?

Can I use both your mod and the horizontal drop down menu on one site? that could offer an alternative solution.

If you have the time site is stripeyfrog . com I have created a category Picture Perfect Cakes and would like to make that button and it's children another colour.

In my ideal world would get to some thing like the amazon concept where i could define areas of the shop and have individual menus in those areas even if they where not flyout.

7 Dec 2010, 12:49 AM
#574
1kell avatar

1kell

Zen Follower

Join Date:
Jul 2008
Posts:
151
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

I don't know if I'm in the right thread but hope so...I installed a css drop down menu ages ago and in modifying my website would like to add images to the top line when that dropdown category is selected, plus set of images to form a box around the dropdown category (one top image, one bottom image, and an image separating each li item), lastly an arrow on the side of submenus to the next submenu.

I have the pics ready and its all working on another jpeg menu, but am trying to apply the same to my css menu. This is my currnt css code:

div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #eb2e83!important;background:#ffffff;}

#dropMenuWrapper {
	width:100%;
	height:25px;
	margin:0;
	font-size:12px;
	}
div#dropMenu {
  	width:100%;
  	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;
	}
div#dropMenu ul.level1 {
	width:75%; 
	margin:0 auto; 
	text-align:center;
	background:#ffffff;
	border-top:0px solid #ffffff;
	border-bottom: 0px solid #ffffff;
	height:25px;
	z-index:1000;
	}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; color:#400000; text-align:center; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {background-image:url('images/hr.gif');
  background-repeat: repeat-x;
  background-position: left bottom; width:13em;}
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:#ffffff;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#ffffff}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: #400000; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#eb2e83;}

The image I would like to appear behind the top selected category is "item1.png",
The image I would like to appear at the top of the dropdown category box is "submenu-top.gif"
The image for the bottom of the dropdown category box is "submenu-bottom.gif"
The image to go in between submenu items is "hr.gif"
The arrow to go next to submenu items which have further subcategories is "arrow.gif"

How/where do I put those images in?

7 Dec 2010, 8:29 PM
#575
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: Support for CSS Flyout Menu

shanesoine, it's not quite that simple.........the products are dynamically generated as you add them to your database, so basically they ALL share the same characteristics as far as the ul and li goes, so picking just one Category to change is not really an option.

And yes, both menus' can reside on the same site with absolutely no problems.

7 Dec 2010, 8:35 PM
#576
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: Support for CSS Flyout Menu

1kell, No this is not the correct thread for that menu. You have the DROPDOWN menu...........this is the FLYOUT menu. You can find that thread HERE.

8 Dec 2010, 11:47 AM
#577
shanesoine avatar

shanesoine

Zen Follower

Join Date:
May 2010
Posts:
125
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

Many thanks will give it a try with the drop down

31 Dec 2010, 2:03 PM
#578
lina0962 avatar

lina0962

Zen Follower

Join Date:
Jun 2006
Posts:
403
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

My case is bit changeling...at least for me…

I have a bilingual bookstore website (https://www.best4future.com). Right now I am selling Chinese books. So you can see(The category is on the right side of the website.
), the pointer image is a Chinese flag before each category (e.g. learn Chinese, Chinese story books, Chinese multimedia). But I want to expand the bookstore to French, German, Spanish and Japanese.

And I want to use a French flag for all the categories relating to French language (e.g. learn French, French story books, French multimedia). The same, a German flag for all the categories relating to French language (e.g. learn Germany, Germany story books, Germany multimedia).

Is there any way to achieve that? Thank you so so much!!

1 Jan 2011, 4:46 AM
#579
get_em_fast avatar

get_em_fast

Totally Zenned

Join Date:
Dec 2006
Location:
Seligman, MO U.S.A.
Posts:
2,072
Plugin Contributions:
1

Re: Support for CSS Flyout Menu

Lina, the short answer........no.

The reason being is that your Categories are dynamically created by the categories_ul_generator.php file "on the fly", and are not individually separated into per-category links, but only into <ul>'s and <li>'s.

But..........there's always a way around problems like this.

The suggestion I have would be to create a background image for the WHOLE box containing your flags in the appropriate places.... in order to make sure that they ARE in the appropriate places, take a screen capture of your site. Then in PhotoShop or what ever you use, make your box, placing it on top of your screen capture. This way you know your flags will be in the correct place.

Then edit your 'stylesheet_categories_menu.css to include this background, and make all your links transparent.

And there ya' go..............one multi-flag menu. :clap:

Hope this helps.

If you have any problems with it, drop me a pm.

1 Jan 2011, 4:50 PM
#580
lina0962 avatar

lina0962

Zen Follower

Join Date:
Jun 2006
Posts:
403
Plugin Contributions:
0

Re: Support for CSS Flyout Menu

Get Em Fast:

Lina, the short answer........no.

The reason being is that your Categories are dynamically created by the categories_ul_generator.php file "on the fly", and are not individually separated into per-category links, but only into <ul>'s and <li>'s.

But..........there's always a way around problems like this.

The suggestion I have would be to create a background image for the WHOLE box containing your flags in the appropriate places.... in order to make sure that they ARE in the appropriate places, take a screen capture of your site. Then in PhotoShop or what ever you use, make your box, placing it on top of your screen capture. This way you know your flags will be in the correct place.

Then edit your 'stylesheet_categories_menu.css to include this background, and make all your links transparent.

And there ya' go..............one multi-flag menu. :clap:

Hope this helps.

If you have any problems with it, drop me a pm.

Thank you so much for such a quick reply!

Your suggestion sounds....painful. :-) Because other languages (French, Germany, Spanish, etc) are added periotically, it means every time when I have a new language added, I have to redo the whole background image and CSS and ... everything.

Maybe it is impossible for CSS Flyout Menu. How about default categories of zencart (The category is on the RIGHT side of the website. www.best4future.com)? Do you think that one may have some hope?

Again, thank you so much for valueble advice. Happy New Year!