Support for CSS Flyout Menu

[Get Em Fast]

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.

[shanesoine]

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.

[1kell]

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?

[Get Em Fast]

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.

[Get Em Fast]

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.

[shanesoine]

Many thanks will give it a try with the drop down

[lina0962]

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

I have a bilingual bookstore website (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!!

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

Hope this helps.

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

[lina0962]

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.

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!

[Get Em Fast]

Lina, as the 'normal' Categories Menu generates the Categories in the same manor, I think you're going to find the same problem with it.

My suggestion would be to use the Categories Dressing Menu. It doesn't have the 'flyout', but I believe you can get the desired image results from it, as it uses Category ID's to style each category.


Now, IF you still wanted to keep and use the Flyout Menu, AND you know for sure what your future changes will be, then you could do as described above, making all your necessary background images that you know you will need. Then, create a separate stylesheet for each different background that you will be using. You could then put them in your css folder with names like French_stylesheet_categories_menu.txt. With them being a txt file, they would not be loaded. Then when you need to chagne, all you would have to do is rename the old on to something like English_stylesheet_categories_menu.txt, and the French one to stylesheet_categories_menu.css.
Just a though...........................

Hope this helps.