Quote:
Originally Posted by DBB1
You just DID contact the contributor.......Note taken. I have also stated in a few posts back that I'm planning on releasing a new version. In that version, I will include all this in the Doc.
Thanks for the input.
Printable View
Quote:
Originally Posted by DBB1
You just DID contact the contributor.......Note taken. I have also stated in a few posts back that I'm planning on releasing a new version. In that version, I will include all this in the Doc.
Thanks for the input.
someone helped me and fixed it; they said they fixed it by doing thisQuote:
Originally Posted by vandiermen
in categories_ul_generator.php between line 45 and 47 i add this:
and c.categories_id NOT IN(33)
it says select all items with the category id from the categories table
except id 33
in the future, to take out more categories (any, not just document, add another number after a comma, like this
and c.categories_id NOT IN(33, 34)
Hello,
I love this plug in. Thank you, Get Em Fast!
Two questions:
1. How can I insert some space right before each menu item? My current menue looks like head-to-head.... www.best4future.com (scroll down the page, it is in the bottom)
2. How can I insert an image right before each menu item? In my case, I want to insert a Chinese flag in front of the item "Learn Chinese". www.best4future.com
Thank you for any advice!!
1)Quote:
Originally Posted by lina0962
div#dropMenu li.submenu ul.level2 li a {
text-align: left;
padding-left: 20px;
z-index: 1000;
}
2)
div#dropMenu li.submenu ul.level2 li:hover {
background-image: url(../images/YOUR_IMAGE.gif);
background-position: left center;
background-repeat: no-repeat;
z-index: 1000;
}
After tinkering for hours i discovered how to have a fully expanded category tree on the drop down. All css, no category generator(s).Quote:
Originally Posted by annnika
Now you can hover over the level 1, the drop down......err, drops down and you now have a category menu with all of the categories, sub categories and their sub categories expanded.
I'll provide a link to a test site of mine with this working for anyone interested, please remember i have'nt started to style this yet but i will update when i have.
www.gearsofwargear.com
Thank you so much, Fasttrading!! Your guidance makes my life easiler!:clap:Quote:
Originally Posted by first trading
Glad to help.
Hi I have installed this great module and everything is working great. It may seem strange but I would like to only have first level items showing as all the drop down boxes cover what is underneath. I have enabled the drop down items in my sidebox categories etc. The only one I am having difficulty locating is the login/create account .. not in layout controller.
Also for some reason the shopping cart tab is a pixel higher top and bottom than the rest of the tabs.
Site is:http://www.rosedakinjewellery.com.au...ain_page=index
The login box at the end is styled slightly different.
Look for:
div#dropMenu li a.noLine {border:none;}
And style accordingly, it looks like you need to put a border around it to make it look like the rest.
If you want the drop down's removed you can find the code in here:
includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php
Always back up your files first.
Personally i'd keep it like it is and just change the background of your drop down to something like white.
Or try this first:
Replace:
div#dropMenu li a.noLine {border:none;}
With:
div#dropMenu li a.noLine {}
Thank you very much .. end tab fixed. Dont know how putting a white background would fix the fact that the drop down covers whats underneath.:huh:
It would'nt, but there's not a problem with drop downs doing that, just my opinion. I suggested a lighter background for contrast.
You can take those links out though if you wanted.
Thanks for your support.:D Waiting for client to decide
I just installed the CSS Flyout Menu and it doesn't seem to be working. I will have lots and lots of subcategories for each state, so I really need something like this. Are there any detailed instructions besides the read me page? www.southerngenealogybooks.com
Hi,I 'm a new guy about zencart,Now I haove the same problem about my Css flyout categories,can you tell me how to resolve it ?In your post,you suggest change the top line ,what is that?Quote:
Originally Posted by cmwoods
have you enabled it in the admin 'Layout Boxes Controller'Quote:
Originally Posted by mary4c
and changed the name of YOUR_TEMPLATE in 2 or 3 places to your template
ALso sometimes the css needs to be remade, I would search this forum for similar questions
Hello
I'm French, so excuse my bad English.
I can not find help on the helpdesk zen cart French, I can therefore vousb ask for help here.
I tried "css flyout menu" and I have a concern with the arrow that starts before any tabs in zen cart home.
The arrow also goes in my pack or stands' css menu flyout But she stood above the class instead of putting his left.
I want:
> Name
But right now I:
>
Name
I just can not color the css script, I'm really sorry :frusty:
Code:
body {
behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
margin-top: 0em;
background-color: #ffffff;
width: 236px;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 1.3em; width:200px;
}
div#nav-cat ul {
margin: 0em;
padding: 0em;
width: 236px;
z-index: 1000;
line-height: 14px;
border: none;
}
div#nav-cat ul.level2 {background-color: #ffffff;}
div#nav-cat ul.level3 {background-color: #ffffff;}
div#nav-cat ul.level4 {background-color: #ffffff;}
div#nav-cat ul.level5 {background-color: #ffffff;}
div#nav-cat ul.level6 {background-color: #ffffff;}
div#nav-cat li {
z-index: 1;
position: relative;
list-style: none;
margin: 0;
margin-top: 0; /* change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid black; /* <---this line may help or hinder IE menu shifting issues. */
background-color: pink; /*Sets background of Menu items that DOES NOT have sub-menu's SYSTEM WIDE!!! */
}
div#nav-cat li li {
margin-left: 0em;/* This puts space between menu and sub-menu, reccomend to leave at 0 unless you have over-lapping problems. */
background-color: salmon; /* sets the background of submenu ,WITHOUT submenus, when menu is HOVERED */
}
div#nav-cat li:hover {background-color: green;} /* sets the HOVER background of any MENU item that DOES NOT have submenu items */
div#nav-cat li.submenu {background-color: blue;} /* sets the background of any menu item that DOES have submenu items */
div#nav-cat li.submenu:hover {background-color: red; width:236px; text-align: width:200px;} /*sets the HOVER background of any menu item that DOES have submenu items */
div#nav-cat li a {background-color: transparent; /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! */
display: block;
padding: 0.25em 0 0.3em 0em;
text-decoration: none;
width: 100%;
color: white; /* sets the font color of the menu, SYSTEM WIDE!! In order to over-ride the font colors for the menu, and have different
colors for each level, such as font color changing when you hover, you need to remove any MENU colors referred to in your
stylesheet.css, as they over-ride this stylesheet! (includes/templates/YOUR_TEMPLATE/css/stylesheet.css) */
}
div#nav-cat ul ul {
position: absolute; top: 0; left: 100%;
display: none; z-index: 1000;
}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;width:236px;position:absolute;
}
div#nav-cat ul.level3 li.submenu:hover ul.level4 { height: 200px;overflow: scroll;}
Could you help me please?
Here is my css file stylesheet_categories_menu.css
Thank You! Once I changed it in Layout Boxes Controller it worked. I am still working on the color scheme. Many Thanks!Quote:
Originally Posted by vandiermen
Hi all,
i've been working on this quality mod, and am fairly happy with the result, except i've somehow managed to get the submenus to stop acting like block displays in IE. The main menu works when the pointer goes over any part of the blocks, but the submenus are almost impossible to navigate and will frustrate users.
I'm not sure how i've caused this. Works fine in Chrome and Firefox.
If anyone could take a look here
http://www.testuksi.co.uk/catalog/
and let me know how badly i've messed things up it would be greatly appreciated.
Best regards, bod
Hi all,
i figured it out, had to add the last 'li' that i'd not realised i'd need in this. And bingo.
There's still one small glitch though. When the third depth of 'ul' has a submenu too, on mouse over it shows a 2px gap between itself and the next menu item below it. Any idea why? All margins are set to 0px.Code:div#nav-cat ul ul ul li {
display:block;
width: 161px;
}
Cheers, bod
How can I change the color from "grey" to an actual 6 digit hex code? When I change it to a code, it turns everything white.
Thanks!
dont forget to add the # before the hex codeQuote:
Originally Posted by mary4c
background-color: green;
background-color: #101010;
should post css here
Thank You! Thank You! I guess I had forgotten it.
If you have any ideas on why the word "blank" shows up multiple times in my EZ pages bar let me know.
www.southerngenealogybooks.com.
search includes\templates\YOUR_TEMPLATE\common\tpl_header.php for the word blankQuote:
Originally Posted by mary4c
downlaod contents of server files on computer and search through them with http://www.baremetalsoft.com/baregrep/Quote:
Originally Posted by mary4c
search ' "blank"
The csshover.htc file that the flyout menu calls for IE6 compatibility doesn't seem to work at all in zencart 1.39x. In fact, you may as well delete the call to csshover.htc at the top of stylesheet_categories_menu.css, so at least the css will validate. I think the horizontal drop-down menu has the same incompatibility with IE6, since it uses csshover.htc also.Quote:
Originally Posted by peachblossomhouse
Everything is working great, but why do I have Specials and Featured Products showing up in the CSS flyout menu and then below as well? How do I delete them in the CSS flyout menu?
You can turn them both off from the Admin panel. Go to Configuration > Layout Settings. Set the 8th and 11th entries, Categories Box - Show Specials Link and Categories Box - Show Featured Products Link, to "false".Quote:
Originally Posted by mary4c
Thank You! I am still figuring all this out!Quote:
You can turn them both off from the Admin panel. Go to Configuration > Layout Settings. Set the 8th and 11th entries, Categories Box - Show Specials Link and Categories Box - Show Featured Products Link, to "false".
Is there any way to only show the category and sub category? I don't want the sub sub category and the sub sub sub category showing. I hope that makes sense. Georgia has 96 counties and I am afraid it will look too busy. Thanks!
Hey there,
I've spent the last couple of days trying to get this menu working as I want. I've read through this thread pretty much completely and I know there's issues with IE6 and some have given up and just accepted the fact that IE6 is sh1te and will probably continue to plague us for years to come.
But... all I want is to have the category text link to have a little 10px margin. If I put a 10px padding-left into into div#nav-cat li a, then that works fine on everything else but not ie6 which increases the horizontal size of the sidebox and means that the pop up menu disappears as you approach it with the mouse.
All I want is to not have the text hugging the left margin...
Is there absolutely no way to just make that happen? After that all I want to do is to insert images as the backgrounds and I'm good to go. I'm fairly sure that's easy enough.
Try adding this to your stylesheet_categories_menu.css:Quote:
Originally Posted by mary4c
Anything after level 2 should not display.Code:#nav-cat ul.level3 li {
display: none;
}
Hope this helps.
@zub...........try adding your margin to:
div#nav-cat li
like this:
margin: 0 0 0 10px;
That should do the trick.
Hope this helps.
any way to disable categories without product so they are not clickable
To disable a Category you must do that in Admin>Categories/Products. By the Category you want disabled, you'll see a little green box. Click on that box, then click update on the next screen. Your product will then be disabled, and that little green box will now be red.Quote:
Originally Posted by rbarbour
But, if you're just asking about making the link in the menu still show up in the menu and NOT be able to be clickable.........NO, you cannot do that. A link is a link, is a link....... and ALL links ARE clickable.
Hey there, thanks for the response. That did move things over to the right 10px but it seems to have moved everything which doesn't solve my problem.Quote:
Originally Posted by Get Em Fast
basically in:
div#nav-cat li:hover
div#nav-cat li.submenu
etc etc... instead of having background-color: I want to have a background-image. However if I replace those commands with images there is no margin on the left. Anything I do to put a margin there might work in FF but causes the flyout sub-cats to break in IE, in that when you mouse towards them, as you get within a few pixels the pop up menu disappears.
I really appreciate your help in this, I don't suppose you could outline for me what I need to change to achieve this?
I've attached a pic for more clarity.
zub, you have a link to this site?
Hi, Get Em Fast. I don't have a link unfortunately as I'm testing on my local machine. I have however figured out what I'm supposed to do, or at least I've fiddled with it enough that I've done something that works for me.
For anyone who's interested, put your background images in:
div#nav-cat li
div#nav-cat li:hover
div#nav-cat li.submenu
div#nav-cat li.submenu:hover
then to push the text over a bit from the margin put the appropriate amount of padding in div#nav-cat li a
also in div#nav-cat li a, you need to change the width so that when you mouse over from left to right the pop-up menu doesn't disappear in IE. As default it's set to width:auto. My sidebox width is 200px, I put 10px of padding-left into that div so I set my width:190px and that worked for me.
hope that helps someone.
I wanted to add this mod to my Document Categories box but don't have the necessary coding skills. After a couple of hours of trying to figure out how to re-code, I finally had an epiphany - instead of changing the coding, I would duplicate the mod and just restrict it to my document categories using the fix below which was so kindly posted by vandiermen.
To duplicate this mod for your Document Categories Sidebox, open up each file in your editor and:Quote:
Originally Posted by vandiermen
1. Rename all three files.
change categories_ul_generator.php to document_categories_ul_generator.php
change categories_css.php to document_categories_css.php
change tpl_categories_css.php to tpl_document_categories_css.php
2. Within the files, change all instances of categories_ul_generator.php to document_categories_ul generator.php
change all instances of categories_css.php to document_categories_css.php
and
change all instances of tpl_categories_css.php to tpl_document_categories_css.php
3. Use the fix posted by vandiermen. Go into document_categories_ul_generator.php and add
and c.categories_id NOT IN(33)
after this line (I added my exceptions on line 50 in the 1.3.8a version of this mod)
where c.categories_id = cd.categories_id
If you want to exclude more than one category, use
and c.categories_id NOT IN(33,1,2)
etc.
Load everything back up to your server and in your admin => Tools => Layout Boxes Controller turn on your document_categories_css.php box and make sure that your document_categories.php box is turned off.
I wanted my document categories box to be identical to my categories box so I didn't make a different stylesheet but if you want to style the document categories box separately from the categories box, I've seen fixes in this thread that may help.
BTW, I'm running Zen Cart v.1.3.9f and css fly out menu v.1.3.8a.
If you want a visual, www. theburningbutterfly.com/store. (You'll need to remove the space from the web address.)
Sorry. I forgot that in document_categories_css.php, you need to change
$title = BOX_HEADING_CATEGORIES;
to
$title = BOX_HEADING_DOCUMENT_CATEGORIES;
so you can change the title of the box.
:thumbsup:
:clap:Quote:
Originally Posted by DBB1
I totally agree. Thankfully I finally found this message. With out this thread I was totally lost. I did not know if I installed this correctly because I did not know where to look to check it out.
Mark
Point taken.........notes, too. :smile: Better, and clearer instructions will be included in the next releases' "readme" file. Hopefully, that will be in a couple of weeks.
Thank you for your feedback.
The readers of this thread could, if they would, start giving me a "wishlist" (if you will) of what they would like to see in the next release.
Such as, do you, as the users of this menu, want:
Full background images?
Just little arrows on items with sub-items?
Or no images at all?
Would you like it to be multi-colored (color-mapped) the way it is now, or would you like it to just be nice-looking "out of the box"?
I know the biggest thing that has haunted this menu is it's lack of support in IE6. But as people are finally starting to catch up and the number of IE6 users are dropping more every day, that's not going to happen. Even FaceBook and Google has dropped IE 6 support. So internet users are soon to have NO choice to upgrade, whether they want to or not.
What WILL happen is the css_hover.htc file will be taken out, and the call to it in the stylesheet will be taken out so this thing will validate.
Everyone take a vote and let me know what you'd like to see.
Thanks for reading,
Robert
Hi GetEmFast,
first tnx for this great mod)
i have a litle problem with new Chrome. In older version everythink looked good but now when ... sorry hard to discribe this problem but if u look at my site and hover above cathegories you'll see that flyout comes under my slideshow description.
How/where can i set so flyout will be always on frontend and not behind other things?
thanks in advance
Quote:
Originally Posted by rapro
make sure your menu has a z-index higher than your slideshow and it should work.
http://www.w3schools.com/css/pr_pos_z-index.asp
limousin is correct. Right now in:
you have a z-index: 1; Set that to z-index: 1000; and you'll be good.Code:div#nav-cat li
just to add, if 1000 doesn't do the trick, make it higher as 1000 didn't work for me.Quote:
Originally Posted by Get Em Fast
Yep it was z index, thanks guys.
Yea, it just depends on what the z-index is on other things on your site. As rapro's highest z-index setting with his image slider was 999, then 1000 with the menu will work fine. I also, tested this out on rapros' site before I posted, so I would know just what setting he would need.Quote:
Originally Posted by limousin
I'm not sure if this is heright area to post but I'm trying to get the CSS drop down (dynamic) to only link to those categories that actually have products in them. I was looking at a way to do it by doing a query on the product_to_categories table using a count greater than 0 to tell it to have no link. My php isn't very good (newbie) and I'm sure it isn't too complicated. I did find the area in the code creating the link just not sure how to do this. Any ideas?
PHP Code:if ($level == 0) {
$result .= $this->root_start_string;
}
$result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level) . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
$result .= $category['name'];
$result .= '</a>';
Paul.........nope.......wrong menu for this thread, but if you don't have products in those categories, you can just disable the Categories and the links will be hidden.
Go to Admin>Catelog>Categories/Products and the first page you see there will be Categories/Products - Top. Now, see the little green boxes on the right?........click on one of those that you don't have products in, then on the next page it brings up, click the "Update" button. That will bring you back to the Categories/Prodcuts - Top, but now you will see your box is red, and that category is gone from your menu.
Hope this helps.
Oh.....paul.......I should mention, I guess, that this totally disables the category or any products in that category from showing in your store, so once you get products in the categories that you've disabled, you'll need to enable them again........the same way......just click on the red box, then update. Now, your box will be green again, and your products will show in your menu and site.
Hi There,
I have uploaded this script into the folders which it has asked me but the menu isn't coming up i.e. the fly outs.
Do i need to turn it on from somewhere. Please help!
Yes, go to Admin>Tools>Layout Boxes Controller. Look for it in there. It will show up as "categories_css.php".Quote:
Originally Posted by dyno123
I am curious as to why when you have sub-categories that it creates a scroll box when you only have one sub-category? Here is a image to show what I am referring to.
http://www.metal-fab.net/images/css_flyout.jpg
Tmod
tmod, it's because it's set to do that. If you don't want the scroll, just delete the last line in the stylesheet_categories_menu.css:
Hope this helps.Code:div#nav-cat ul.level3 li.submenu:hover ul.level4 { height: 200px;overflow: scroll;}
Yep that did the trick, Thanks for that!!Quote:
Originally Posted by Get Em Fast
Tmod
Not a problem, tmod........that's what I'm here for.
For those of you who may be interested, I finally got around to making an updated version of this menu.
It has been uploaded to the downloads section and is awaiting approval from the dev-team.
But, it anybody would like a "fresh-off-the-press" copy, just pm me with your email addy, drop me a line, or something, and I'll email you a copy.
Thanks for using the CSS Flyout Menu!
The Dev-Team has approved the new Menu and it is now available in the downloads section
CSS Flyout Menu 1.3.9 with rollover arrows. Includes an image folder filled with 70 arrows and the arrow .psd file for your styling needs!
New readme file with clear installation and usage instructions, as asked for in some previous posts.
Enjoy!
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
Wow! Super fast work by the Dev Team. It's all good and can be downloaded now.
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
@ 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:
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:Code:#nav-cat ul {
margin: 0px 0px 0px 0px;
padding: 0;
width: 200px;
background-color: #6495ed;
z-index: 1000;
}
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.Code:#nav-cat ul ul }
position: absolute;
top: 0;
left: 200px;
display: none;
}
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:
to something like:Code:#categoriescssHeading.leftBoxHeading {
background: #87ceeb;
border-bottom: 1px solid #0000ff;
margin-bottom: 1px;
}
Of course, you'll have to play with the margin and maybe add a padding to get your desired results.Code:#categoriescssHeading.leftBoxHeading {
background: url(../images/yourimage.gif);
margin-bottom: 1px;
}
If you need any more help with this, don't hesitate to ask.
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:Quote:
Originally Posted by WeFoundEm
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:
Just change that to:Code:define('BOX_HEADING_CATEGORIES', 'Categories');
and it will leave the Heading blank, so your image will show without the text showing.Code:define('BOX_HEADING_CATEGORIES', '');
yep worked like a charm, thanks again.
Not a problem. Glad to help.
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
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
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
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.
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.
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:
The image I would like to appear behind the top selected category is "item1.png",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 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?
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.
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.
Many thanks will give it a try with the drop down
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!!
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!Quote:
Originally Posted by Get Em Fast
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!
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.
I am sure this has been answered, but I have yet to be able to find the fix. I simply want to change the font color of the categories. I am able to change the hover color and the color of the header but not the categories itself. I know it is tied to my regular style sheet but I haven't been able to find the correct part. I saw on the first page of this thread to change
a:link, #navEZPagesTOC ul li a {
color: #3300ff;
text-decoration: none;
}
This just changed the color of all my links on the page but did not change the color of my fly out categories font color.
disregard previous post. Thought it was in the default style sheet not the one included with the mod. I was mistaken.
So, you got it worked out?Quote:
Originally Posted by atl2rva
I did thank you. It kinda threw me off because I had used the search feature in notepad++ to look for "ffffff" to find what was making my text white, but did not realize it was only using the short version "fff". Thank You for your response.
It appears I may have put my questions regarding the disappearance of my headerWrapper and logoWrapper after installing CSS Flyout menu in the wrong thread. How can I get those back so that my images will show up in the header?
zc 1.3.7
http://www.monumentsplus.com
Thanks in advance.
No, you had it in the right thread before..........wrong thread this time. This is for the CSS Flyout Menu.........not dropdown. It's a vertical Sidebox Menu.Quote:
Originally Posted by GraniteMan44
But...............I do see your problem. In your includes/templates/CM_2/common/tpl_header.php find this section of code:
and change that section to:Code:<!--<div id="logoWrapper">
<div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>-->
Notice the <!-- and the --> is what's 'killing' you. You cannot have your php code inside those.Code:<div id="logoWrapper">
<div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>
Hope this helps.
Quote:
No, you had it in the right thread before..........wrong thread this time. This is for the CSS Flyout Menu.........not dropdown. It's a vertical Sidebox Menu.
But...............I do see your problem. In your includes/templates/CM_2/common/tpl_header.php find this section of code:
Code:
<!--<div id="logoWrapper">
<div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>-->
and change that section to:
Code:
<div id="logoWrapper">
<div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>
Notice the <!-- and the --> is what's 'killing' you. You cannot have your php code inside those.
Hope this helps.
I couldn't find that code in my /includes/templates/CM_2/common/tpl_header.php file. Here is what my tpl.header.php file contains:
Quote:
<?php
/**
* Common Template - tpl_header.php
*
* this file can be copied to /templates/your_template_dir/pagename<br />
* example: to override the privacy page<br />
* make a directory /templates/my_template/privacy<br />
* copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
* to override the global settings and turn off the footer un-comment the following line:<br />
* <br />
* $flag_disable_header = true;<br />
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
*/
?>
<?php
// Display all header alerts via messageStack:
if ($messageStack->size('header') > 0) {
echo $messageStack->output('header');
}
if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
echo htmlspecialchars(urldecode($_GET['error_message']));
}
if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
echo htmlspecialchars($_GET['info_message']);
} else {
}
?>
<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<ul class="back">
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
} else {
if (STORE_STATUS == '0') {
?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->
<!--bof-branding display-->
<!--<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>-->
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
<div id="taglineWrapper">
<?php
if (HEADER_SALES_TEXT != '') {
?>
<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
}
?>
<?php
if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
}
}
?>
</div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->
<!--eof-header logo and navigation display-->
<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->
<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
<?php } ?>
I haven't read this thread in some time, and see that there are several requests for individualized category treatments of various kinds, and suggestions that Categories Dressing can do them at the cost of losing flyouts.
It's true that flyout styling is not built into CD, but I believe that it could be applied (using the chcategories option). CD has a correct ul/li structure underneath the individualized tags.
<!--bof-branding display-->
<!--<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>-->
These are the HTML comment tags that are causing your problem.
Just tested some flyout code on Categories Dressing, and it does work without impeding any other mod styling or function.
Something like this (adjusted to #chcategories):We now return you to your regularly scheduled mod... :)Code:#categories ul ul {display: none;}
#categories li:hover {position: relative;}
#categories li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:100; width:140px;}
#categories ul ul ul {display: none;}
#categories li li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:200; width:140px;}
#categories ul ul ul ul {display: none;}
#categories li li li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:300; width:140px;}
Just missed the edit window... it can be simplified to
Code:#categories ul ul {display: none;}
#categories li:hover {position: relative;}
#categories li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:100; width:140px;}
Ya' know, Glen, I've been meaning for quite some time to see if maybe these two could be merged. That would make an absolute great menu..............add a couple lines of jquery to go with it (I've actually got the Horizontal CSS Dropdown Menu working very nicely with jquery, and am about to add a jquery version of it AND this one)........hmmmm........
But, oh...........I've just been sooooooo busy, lately. Not that I'm complaining, or anything...............
I was pleasantly surprised to see how simple it was to get the flyout functionality on Cat Dressing. I haven't looked at all of the CSS Flyout Menu code, but I think they have fundamentally different base coding to arrive at some of the same output. I'm not sure how much difference there is in the styling that makes the flyout action, though... probably not much. How much does jquery need to be woven into the PHP to work on something like this? Any at all? Or does it just modify the output once it gets to the user's screen? I may try some CSS3 transitions or something to see if I can get slick effects for modern browsers without adding jquery to the mix.
Yea, I kind of wish I had a little more time right now to mess with it, but as of the moment, I'm pretty swamped.
You know, I haven't even tried the jquery with this menu, yet, but almost everything about this menu and the CSS Dropdown Menu is the same except for the css, so I'm almost sure it would just be a simple matter of dropping the javascript in the tpl_header.php.
Well, actually.............I just very quickly took a minute to do a test run with it, and it worked just fine. All you have to do is add jquery to your jscript folder, rename it to jscript_jquery.js then drop this in the tpl_header.php:
You can change it to FadIn and FadeOut also, but I think the hide and show looks better.Code:<script type="text/javascript">
//script copyright Get Em Fast Web Designs
$(function () {
$('#nav-cat .level1 .submenu.submenu').hover(function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
}, function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
});});
</script>
i'm new to the zen cart store, and would appreicate it if anyone would share how to remove Important Links Sidebox, iv'e tried to remove it from Admin/tools/Layoutboxescontroler but it doesn't show up there.
My site is here: BudgetA/C online store
This question has nothing to do with the thread topic, and you should post new questions in a new thread (go to the appropriate forum and click "new thread").
The Important Links sidebox is named ez-pages in the layout controller.
How can I hide this sidebox during the checkout phase?
JUST this one, or all of them on left and/or right columns, during checkout (which is what I'm assuming, as that would seem more feasible)?Quote:
Originally Posted by mretzloff
I already got all of the left column to hide during checkout by adding a conditional statement to column_left.php, but this sideboxes keeps showing up. Is there something I missed?Quote:
Originally Posted by Get Em Fast
Thank you!
Well, without seeing the site, I really can't say. Do you have an address for us to visit this site?
Did you disable the left column as described in the Tutorials/FAQ's?..............something like:
In includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php
Code:if (in_array($current_page_base,explode(",",'checkout_shipping,checkout_payment,checkout_confirmation,checkout_success')) ) {
$flag_disable_left = true;
}