Ok thx i will try that:blush:Quote:
Originally Posted by ckosloff
Printable View
Ok thx i will try that:blush:Quote:
Originally Posted by ckosloff
Hi,
The flyout is brillant addon! Thanks.
I just need a bit of help. I would like the fount color on the sub menu to be white. If you go to www.bestpriceaccessories.com/shop you'll see what I mean.
Thanks
Sorry to be a bit of a hi jack... But i noticed on your site (best price accessories) in my account dropdown you have a tab called order status, can you please tell me how i can get this on my site?
Yep. Itshttp://www.zen-cart.com/wiki/index.php/Contribution:Integrated_Checkout_Without_Account download it from there. You can add order status without the Checkout without an account I think.
Yikes! This question has been answered in previous page, you just change the value for the color: attribute.Quote:
Originally Posted by Best Price Accessori
http://www.zen-cart.com/forum/showpo...&postcount=195
Hello everyone, thank you for this mod. We've installed it in my site www.manuelavalenti.com/store and is working perfectly after a few changes in the CSS file.
One thing, originally in the admin area we can set up a separator between categories and subcategories (admin>configuration>layout settings) which I have previously set up before installing this mod, how can this be shown as originally intended using the css flyout?
Thanks in advance for your help.
Hola,Quote:
Originally Posted by mvstudio
http://www.zen-cart.com/forum/showpo...8&postcount=21
Start reading from there down, the separator is simply an <hr /> that you can customize with style.
I used to have it but deleted it later, I might put it back when the menu becomes more complex.
Ciao.
Hola y Gracias!
I'm going to check that out.
Happy New Year! :smile:
G'day,
For ages on my web site at http://www.scubadoctor.com.au/diveshop/ I've been having a problem with the breadcrumbs. More often than not, all of the categories in the path to a product aren't displayed in the breadcrumbs.
I've tracked the problem down to CSS Flyout Menus. It seems this module only ever puts one Category in the cPath part of the links it generates. This in turn causes the breadcrumbs to be displayed incorrectly.
Does anyone have a fix for this issue?
Best Regards, Lloyd Borrett.
I've found a suggested fix for this issue at http://www.zen-cart.com/forum/showpo...&postcount=165
It seems to be working.
This fix should be included in an updated version of the module.
Not yet, there is a bug in that file.Quote:
Originally Posted by lloyd_borrett
If you click on any parent category of the breadcrumbs menu you will see all items duplicated.
I'm not seeing that behavour. Maybe it's only a problem with more recent versions of Zen Cart.
On your test site, build say 5 cats deep, then click on the 3rd. cat.Quote:
Originally Posted by lloyd_borrett
You will see what I mean, the sub cats links are duplicated, one on top of the other.
Hi, Ckosloff,Quote:
Originally Posted by ckosloff
Can you please help me to check my CSS menu at www.topalways.com?
My problem is, when hover in IE6, the sub-category won't appear at all. but works fine in IE7 & FF3.
Many appreciated!:smile:
Understand that IE6 uses .htc.Quote:
Originally Posted by Jerry5763837
FF and IE7 don't need it.
First, you need to make sure that it finds .htc.
There is an error in the menu distribution, correct path is:
behavior: url(includes/csshover.htc);
/* WinIE behavior call */}
Of course, csshover has to be in folder "includes".
Try using latest version of csshover, here:
http://www.xs4all.nl/~peterned/htc/csshover3.htc
Hi, ckosloff,Quote:
Originally Posted by ckosloff
Anyhow, many thanks for your reply.
But unluky, seems unworkable.
Also, searched the thread and tried csshover2,or csshover3 under folder Includes, all unworkable.
Any furhter suggestion? thanks again.:cool:
hi, ckosloff,
Worked on it for hours, finally located where the problem is, not because of the file "csshover.htc"
but the value of "position: absolute; top:-10000000px;"
here is the css code in "stylesheet_categories_menu.css"
but do not know how to change, since FF3 & IE6 parse the value of "position:ablolute" differently;HTML Code:div#nav-cat UL UL {
BACKGROUND: url(../images/menu_arrow_bg.gif) no-repeat 0px 100%; LEFT: 148px; PADDING-BOTTOM:4px; WIDTH: 162px; POSITION: absolute;TOP: -10000000px; HEIGHT: auto;
}
can you please check for so many confused guys how to correct,
many appreciated.
I cannot imagine why you would need such a huge value in a negative margin, 10 M pixels!Quote:
Originally Posted by Jerry5763837
That will break your site for sure.
Also, try position: relative, that would be relative to the container.
I will repeat what I have said in previous posts, you need 3 things:
1) A test site.
2) A style editor. I use Top Style Pro, just a suggestion.
3) The Web Developer toolbar, which is a free FF extension, that will tell you which element is causing grief.
I've been able to install mod but I have a problem with left vertical sub menus displaying behind right content, I've been going at it for days now and I can not figure out where I went wrong, could you guys please take a look at my site? maybe a second set of eyes will catch my error. I've tried 2 version of this mod!!! :)
I've checked z-index on navColumnOne (z-index: 10) and centerColumn (z-index: 0)
Thanks in advance for all your help.
Here's the link to site hxxp://www.imagetech.us/shop/
I'm willing to pay some one to get this fixed!
Thanks
Where are you checking z-index?Quote:
Originally Posted by issy
You have to look in stylesheet_categories_menu.css
div#nav-cat li {
background-image: url(../images/b1.gif);
background-repeat: no-repeat;
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0;
/* this overrides the margin-top in the declaration above */
}
Once this is fixed I'll invoice you with the details of my bank account. :yuck:
Yes, I'm looking on both style sheets ( stylesheet.css & stylesheet_categories_menu.css ) I just wanted to make sure the that nothing else was conflicting with the menu that's why I pointed out the the navColumnOne and centerColumn.Quote:
Originally Posted by ckosloff
I have taken the code above without success.
Here's my stylesheet_categories_menu.css
body { behavior: url(includes/csshover.htc);} /* WinIE behavior call */
div#nav-cat {
width: 230px;
background-color: #fff;
font-weight:normal;
margin-top: 2px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
padding: 0px;
border: 0px dotted #FF0000;
}
div#nav-cat ul {
margin: 0px;
padding: 0;
width: 230px;
z-index: 500;
/* border: 1px solid #AAA;*/}
div#nav-cat ul.level2 {background-color: #e8effe;}
div#nav-cat ul.level3 {background-color: #e8effe;}
div#nav-cat ul.level4 {background-color: #e8effe;}
div#nav-cat ul.level5 {background-color: #e8effe;}
div#nav-cat ul.level6 {background-color: #e8effe;}
div#nav-cat li {
z-index: 500;
position: relative;
list-style: none;
margin: 0;
margin-top: 2px; /* <---this line may help or hinder IE menu shifting issues */
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCC;
height: 20px;
}
div#nav-cat li li {
margin: 0px; /* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {
background-color: #e8effe;
}
div#nav-cat li.submenu {}
div#nav-cat li.submenu:hover {background-color: #e8effe;}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0em;
text-decoration: none; width: 230px; color: #000;}
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
div#nav-cat>ul a {width: auto;color:#000000}
div#nav-cat ul ul {position: absolute; top: 0; left: 230px; display: none; z-index: 500;}
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 {
position: absolute;
display:block;
background-color: #e8effe;
margin: 0px;
z-index: 500;
border: 0px dotted #FF0000;
padding-top: 0.25em;
padding-right: 0;
padding-bottom: 0.25em;
padding-left: 0em;
}
div#nav-cat ul.level2 {
padding: 0;
width: 150px;
border: none;
}
I can't even focus on my screen anymore, need to rest... :)
Thanks
I've resolved this issue, the problem was that I had overflow: hidden; in the 2 following divs, I just removed that and it all work as it should:)Quote:
Originally Posted by issy
#navColumnOne {
overflow: hidden;
}
.columnLeft {
margin-right: 15px;
margin-left: 2em;
border: 0px dotted #FF0000;
overflow: hidden;
}
Thank you
Thanks for posting the error and the fix.Quote:
Originally Posted by issy
Hi,
Does anyone know how to change the fonts on the main title bar from ALL CAPS to Lowercase?
Probably simple but been hunting for the code for ages and can't seem to find anything for it at all :frusty:
What do you mean by title bar?Quote:
Originally Posted by limelites
If you mean the catalog font it is in lowercase already.
The rest is a matter of style.
h3 #categoriescssHeading {text-transform:lowercase;}
or uppercase, because it is in lower already.
Hi, yes it's in lowercase now, figured it out before you had a chance to respond :-)
Love this mod, only one tiny thing I'd like to customise now would be a time lag. Is there any way to programme a delay into the flyout menu so that it takes a split second before flying out?
That way, when someone moves their mouse across the screen past the menu, it wouldn't fly out straight away?
That's a philosophical question.Quote:
Originally Posted by limelites
It's not impossible in principle, however you would need custom programming for that, which is not the scope of this support thread.
Does anyone know if it's possible to add the little (4) product count numbers at the end of the drop down category items as in the nav menu at the side?
One more question about this mod.... Is it possible to remove the "Categories" menu button and replace it completely with the "Search" sub menu item which is by default under the home button?
I don't see the point in having a categories menu at the top when we already have a nav menu to the side. Moreover, I really like the advanced search page that, "Search" goes to!
I am assuming it's something to do with tpl_drop_menu.php but does anyone know exactly how to do this?
Yes, it was... figured it out now, so no need to all rush and reply :bigups::D:smartalec:
Final question on this mod..... How on earth do you set the drop down menu width to the same as the parent menu??? I don't like the left aligned drop down, would much prefer them to be the same width as the top level menu buttons.
Can anyone help?
@limelites,
Please don't flood this support thread.
Dropdown menus have nothing to do with it.
Hello zenners I have a question that I would like to see if I can get some help on. I wouldn't think it is something that someone in here won't be able to help with. By the way I have the latest zen cart 1.38a and have had it installed for quite a while and everything is working great. I just need to make a little modification.
I have the CSS Fly out menu and I have many links on there for example About Us, History and so forth. They all work great. However I am needing to add a "submenu". NOT a subcategory. I want to be able to have a link called say fundraiser and when I hover over that link it has a submenu showing different fundraisers.
The code that I have for tpl_categories_css.php is
What I would like to do if you go and look at the site that i post at the end of this message you will see how when the user hovers over Products it breaks out and shows the subcategories. I would like similar things to happen with an actual link. Is this possible? Is there any way to make this possible?Code:
$content = "";
$content .= '<div id="nav-cat">';
$content .= '<a href="/~stxmill/">' . ' Home' . ' </a> ' ;
$content .= '<div id="test">';
$content .= '<a href="index.php?main_page=history">' . ' History' . ' </a> ' ;
$content .= '<div id="test">';
$content .= $menulist; // see the modules/sideboxes/YOURTEMPLATE/categories_css.php for this
$content .= '<a href="index.php?main_page=fund_raising">' . ' Stone Ground Fund-raiser' . '</a>' ;
$content .= '<div id="test">';
$content .= '<a href="index.php?main_page=fund_raising_2">' . ' Grandmas Kitchen Fund-raiser' . '</a>' ;
$content .= '<div id="test">';
$content .= '<a href="index.php?main_page=about_us">' . ' About Us' . '</a>';
$content .= '<div id="test">';
$content .= '<a href="index.php?main_page=store_locator">' . ' Store Locator' . '</a>' ;
$content .= '<div id="test">';
$content .= '<a href="index.php?main_page=recipes">' . ' Recipes' . '</a>' ;
$content .= '<div id="test">';
$content .= '<a href="index.php?main_page=faqs_all">' . ' FAQ' . '</a>' ;
$content .= '<div id="test">';
$content .= '<a href="index.php?main_page=contact_us">' . ' Contact Us' . '</a>' ;
The site is...
stx milling . com
Take out the spaces for the link.
well, im not sure what your looking for? i looked at your page, and from what i saw it looks fine. as far as adding "submenu" items, thats something you would add as an additional page or menu option.Quote:
Originally Posted by welchyboy
i guess what im trying to say is add a sub catagory under your fundraiser option and it should show up.
does this help?
I'm sorry maybe I didn't explain well enough. I am looking for links to go to different pages but not having to do with products or anything like that. I want it to be a plain page like the Fund Raiser page I have now. If you click on the fund raiser page it will take you a page I created for the fund raiser. However now we have two fund raisers going on. I don't want this
About Us
History
Fund Raiser 1
Fund Raiser 2
What I would like is a link that says Fund Raiser and when I hover over it a submenu comes out and shows the Fund raiser 1 and Fund raiser 2. This has nothing to do with categories, products, or items. This is just a regular page that I created for information.
Does that clarify what I am looking for. The way the menu is setup right now is great and works perfect. I am just looking to make some modifications and add a submenu which has nothing to do with categories or products.
ok i understand what your looking for now. As far as i have learned, the easiest way to make that work right would be for you to make a whole, seperate sidebox titled fundraiser. then under ezpages, add all your items there.
under this option, i have only been able to add items for sale and sub cat for them.
since your not selling anything in the fundraising section, then adding more catagories would not work. on my page, i have tons of subs. but all of them include products.
hope this helps. my wife does all the products, she answered your question. i just work on the coding side.
Very confusing.Quote:
Originally Posted by welchyboy
About us comes out of the box with Zen Cart, in the Information pages, you don't need to do anything there.
The fly-out menu IS for categories and sub-categories of your catalog, not for anything else.
The max. you can do with it is to add links in the description box of a subcat, but not recommended, there is other stuff for that like EZ pages.
Well darn I guess I don't really see the point of not being able to have subcategories for regular links if it can be done with categories but I will just have to tell the customers that it can't be done. Thanks for the help...Much appreciated for the quick replies by everyone.
You can put links in the subcat description box, customize them with HTML, CSS, etc.Quote:
Originally Posted by welchyboy
Ok, I'm not sure I have this setup right. Here's the deal...the catagories you see in the left navigation were all created in the catagories/products page in admin. Now I'm looking to make it a little more organized and remove the header navigation. Here's how I want it:
Home
Products
Services
My Account
Contact Us
Company
There will be sub catagories as there are now but the problem is, I can't create a Home link via catagories/products. If I try to use EZ Pages and enable it for sidebox it doesn't show up. Have I set this thing up wrong or what? :unsure:
www.SalonRoyalty.com
That's the way it's supposed to work.Quote:
Originally Posted by SalonRoyalty
I still cannot understand why users want to input extraneous links in a categories menu.
What's wrong with the Home link that comes stock in Zen Cart?
You can also put it in the footer of your page.
Because it makes things more organized in one location plus, it's a matter of personal preference. So, is there no way to make this happen?
This is a categories menu, your question is not relevant to a support thread.Quote:
Originally Posted by SalonRoyalty
Zen Cart is open source, you can customize it the way you want, so feel free to hack the code.
There are also other menu options out there, which might better suit your personal preferences.
Hello,
Please have a look at this page: http://s266460223.onlinehome.us/shop
It is very strange: if you move your cursor to "lighting" and go to sub-categories, then go to the next category "Furniture" and go to its' sub-categories. Now, when you go back again and move your cursor to Lighting's second sub-categorie "Floor Lamp", it jumps to Furniture's sub-categories.
I know it is "z-index"problem. But I couldn't seem to fix it. Can anybody help?
Thank you in advance.
I did have a look with Firefox and was unable to reproduce the issue you mention.Quote:
Originally Posted by e81ny
When you click on a subcat it correctly displays the items, until you click on another subcat.
That is the way it is supposed to work.
I didn't see any z-index problem.
Still don't understand what your problem is.
http://www.zen-cart.com/forum/showpo...&postcount=165
While I still don't understand your problem, I think this can help.
Make sure you make images for each cat and subcat too, if you want the mod to work optimally.
Hi,Quote:
Originally Posted by ckosloff
Thanks for the reply.
I don't know if it has the same problem with Firefox or other browsers, but it happens with IE.. I've checked using several PCs and all have the same problem.
Can you have a look using IE?
Thanks again.
Sorry I forgot to mention that the problem only happens when your cursor is where the category (red area) and sub-categories (yellow) overlap.. That's why I'm quite sure it is z-index problem..Quote:
Originally Posted by e81ny
Still cannot reproduce (with IE), please show a screenshot.Quote:
Originally Posted by e81ny
However I do see that your navigation breadcrumb menu still doesn't show the intermediate category.
You can correct that with the script I posted.
I installed the categories flyout module. I modified the buttons to better suit my site and functionality works just fine.
However on the aesthetics side, I have these rather ugly yellowish lines surrounding my categories.
http://sonja.tx0.org/categories.jpg
Reading through the files, tpl_categories_css.php has the following comment:
I'm assuming this is telling me how to fix the issue, but I have no clue where to start looking for the $content strings. The statementQuote:
// May want to add ............onfocus="this.blur()"...... to each A HREF to get rid of the dotted-box around links when they're clicked.
// just parse the $content string and insert it into each A HREF tag
really isn't that clear. (Keep in mind I gave up html back when Netscape 2.0 was brand new and in beta and CSS is alien to me. I'm a firefighter not a programmer. :huh: )
Any clues, hints, answers, something?
The next issue, how can I left justify the text on the buttons. The centering isn't that pleasing to me.
I'd really love to have a menu like this one:
http://sonja.tx0.org/asgi_cats.jpg
Though in the light grey of course. But that's wishful thinking and as long as I get rid of the yellow lines I'm happy with the look so far.
Bleh, I hate replying to myself, but there is no edit post function on my above post. (Weird)
After staring at the css file for an hour or so I figured out what was going on. My original confusion with justifying the text stemmed from the fact I was editing the local file and not the remote file on the server, thus no reflection of my changes on the server. DOH!
While realizing that I caught the section that controlled those ugly yellow lines, well solid-tan according to the css. They're gone too!
This is about I started getting the hang of that particular css file and things started to shape up the way I wanted them. Still not 100% perfect, but it's much better than it started. :clap:
Now on to the next tweak. (And here I thought I was done adding/changing functionality 2 days ago! :frusty:)
My template is designed to widen to hole screen width.
Problem is on wide screen monitors.
When clicking on the menu to get sub menu visible the sub menu has too large gap to the root menu.
Problem comes when user moves cursor to the cap to reach the sub menu, the sub menu dissapears.
This is cause menu thinks user is hoovering out of the menu.
Any ideas how to make the gap fixed to small value?
You have posted this question before, it is a CSS issue.Quote:
Originally Posted by marksu
In order to avoid this kind of problem you should set your CSS to work with no gaps at all.
You don't know if users will be looking at your site with a wide screen, so you cannot work for that scenario.
You will have to work on your stylesheet.
I suggest using a style editor that will show results in real time, without saving.
I use Top Style Pro, there may be others.
Try commenting out all paddings and margins.
See how it looks and then add them one at a time, until you get the look you want.
Thank you for your reply.
Yes I know it is css issue and was hoping somebody already had it solved as it is a bad feature effecting all users.
I will try to solve it on my own then and also taking in consideration your tips.
Thank you for your reply.
marksu
Quote:
Originally Posted by ckosloff
Try giving your #nav-cat ul ul a negative left margin. Mine is is like this:Quote:
Originally Posted by marksu
#nav-cat ul ul {
position:absolute;
top:5px;
left:149px;
display:none;
margin-left:-7px;
}
Hey my buttons are not "flying out"
Why is this?
I am pretty sure I put all the files where they were supposed to go. All I have are static buttons with the same blue/green but not any "movement" any ideas?
Link to your site, please.Quote:
Originally Posted by Caralyn
Quote:
Originally Posted by Caralyn
Yes, a link to your site would be very helpful. Double check all your files, to make sure that they all got put in the correct place. When we have a link to your site, I can fix the css, and give you a copy.
Hope this helps.
I can't believe you are back. Is it really you?Quote:
Originally Posted by Get Em Fast
Quote:
Originally Posted by ckosloff
:D Yep, it's me. Been a while, huh? Moved into a town with a bunch of family.............boy!, did that ever change my life style! :ohmy:
reply for css help....www.realridertack.org/version3
OK, this has been the tie-breaker.Quote:
Originally Posted by Caralyn
I want to re-write this mod, offering a CSS for non-image and another for image-driven.
At present, my menu is purely CSS, based on Get 'em Fast post.
We need to add the latest version of ccshover.htc (it's already at version 3) and update the navigation script too (suggested by lankeeyankee).
If Get 'em Fast is willing to review I will rewrite it and submit to the Zen Cart Olympus.
I hope this will solve many problems, as the one exposed in this last post.
What do you say, Get 'em Fast?
great mod! i have been working a bit from the code another user posted that had better commenting (i need all the help i can get) and have figured it out mostly except for one one small issue
how do I set the width of the submenu items without affecting the main level width. The problem is I have several items the go past the sub menu background but they dont seem to go over enough to make the word wrap to the next line.
this happened with both the first version of the css and the one with comments below as well.
any guidance would be appreciated. Cant send link since the site is live and just testing off and on.
here is my code
Code:body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}
/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {
width: 200px; /* Sets sidebox to 150px wide - Set width below for the CSS Flyout */
margin: 0; /* Sets sidebox to no margin - Set margin below for the CSS Flyout */
background-color: #FFFFFF; /* Sets sidebox background colour to WD BLue, Set colour below for the CSS Flyout */
font-weight: bold; /* Set sidebox to bold text - Applies throughout entire sidebox and CSS Flyout */
font-size: 1.2em;
}
/* Overall Settings for CSS Flyout Menu Area */
div#nav-cat ul {
line-height: 20px; /* Sets CSS Flyout List Area Lines to 20px high - Applies throughout menu system */
width: 200px; /* Sets CSS Flyout to 150px wide, matching the width of the entire sidebox which is set above */
margin: 0; /* Sets CSS Flyout List Area to no margin, - Applies throughout menu system */
padding: 0; /* Sets CSS Flyout List Area to no padding - Applies throughout menu system */
background-color: #FFFFFF; /* Sets CSS Flyout List Area background colour to WD BLue - Applies throughout menu system unless overridden */
}
/* Sets Backgrond Colour for further submenu blocks */
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6 {
background-color: #FFE295; /* Sets CSS Flyout List Area background colour to WD Blue - Applies to all levels apart from the first one */
border: none;
}
/* Sets Category Text Background Options */
div#nav-cat li {
position: relative; /* Sets the submenu to display inline with the previous menu - Applies throughout menu system */
list-style: none; /* Sets the list to display without any indentation or markers - Applies thorughout menu system */
margin: 0; /* Sets each line item to no margin - Applies throughout menu system */
z-index: 1; /* Ensures the menu displays on top of other items on the page - Applies throughout menu system - may need to alter this value */
border-bottom: 0px solid #1d4da1; /* Sets each line item to have a tiny border just on the bottom, required to get this thing to work in IE6 - Applies throughout menu system */
}
/* Sets Currently Hovered Category and it's parent category to orange background */
div#nav-cat li:hover {
/* background-color: #FF9900; Sets the background color of a line item which is being hovered over to WD Orange - Applies throughout menu system */
font-weight:bold;
}
/* Sets Category Text Background for categories with subcats */
div#nav-cat li.submenu {
/* background: url(../images/arrow.gif) 95% 50% no-repeat; */ /*Adds an image to the end of each line item containing a sub-menu - Applies throughout menu system */
}
/* Sets currently hovered parent category on the Main Menu to orange background */
div#nav-cat li.submenu:hover {
/* background-color: #FF9900; Sets the background color of a line item that contains a submenu which is being hovered over to WD Orange - Applies throughout themenu structure */
}
/* Settings for Category Text */
div#nav-cat li a {
display: block; /* Sets the whole of the line to be clickable, rather than just the text - Applies throughout menu system */
padding: 0.25em 0 0.25em 0.5em; /* Positions the text on each line item into a more central position - Applies throughout menu system */
text-decoration: none; /* Sets the text to display normally with no unwanted effects - Applies throughout menu system */
width: 200px; /* Sets the width of the text area to 140px wide - Applies throughout menu system */
/* color: ; Sets the text to be white - Applies throughout menu system */
}*/ /* This strange closing comment mark seems to be necessary to get this to work properly */
/* Settings for the display of submenu blocks */
div#nav-cat ul a{
width: auto; /* Sets the submenu block width to auto - If not present menu displays as huge list - Applies throughout menu system */
}
/* Settings for position of submenu blocks */
div#nav-cat ul ul {
position: absolute; /* Sets the submenu blocks to display alongside and below the parent menu - Applies throughout menu system */
top: 0; /* Sets the position of submenu blocks to line up against the parent menu at the top - Applies throughout menu system */
left: 205px; /* Sets the position of submenu blocks to line up against the parent menu on the side - Applies throughout menu system */
display: none; /* Sets the submenu blocks NOT to display - Seems strange but if this isn't included strange effects occur - Applies throughout menu system */
}
/* Settings for extra submenu blocks */
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; /* Sets submenu blocks TO display when they are being hovered over, overriding setting directly above - Applies throughout menu system */
}
That sounds like a winner. I have been meaning to re-write everything, myself, but I just haven't had the time.Quote:
Originally Posted by ckosloff
The images that I included in there had to have a lot of "tweeking" from the non-image version, and they was actuall just for my personal site at the time (I've also got one made for a parts store or something that has "moving" pistons!), but they have seemed to cause a lot of problems, and the code need a lot of housekeeping way back then, and again, I just didn't have time to clean it up.
I'm actually starting a new site (same old URL) that I'm planning on putting a non-image version on, and I'm gonna have to clean up the css, anyway, but please go ahead.....I might use yours, instead. :wink:
So, there ya' go, folks.......if anybody is having problems with the flyout menu, give it a day or two, and there will be at least one, maybe two menu's released.
I wasn't planning on doing it this soon, but what the hey, I need a new one too! Starting work tomorrow on a non-image release. Maybe update on the existing one to include images, but make them small 15x2px gradients, so no specific image size has to be defined.
But, sleep now, work tomorrow.
:lamo:
Cheers, everybody
OK, quick and dirty.Quote:
Originally Posted by Get Em Fast
This is exactly what I use on my site.
It works fine and cross-browser, and it has all the latest enhancements.
However, it is tailored to my use.
All the customizations I used are in the thread, so customization shouldn't be a problem.
Nevertheless, there is still a small glitch, and it comes from the navigation in categories_ul_generator.php (so I think).
It is the version I got from lankeeyankee, it fixes all the breadcrumbs navigation problems, but when you click on a master category, the sub-cats show duplicated: one for the text and the other one for the image you can input.
Inputting the image will not solve the problem, it still shows both.
Minor problem, though.
The image hovers if you have IH2 installed.
PS. Get 'em Fast: your review is welcome, feel free to use in upcoming version.
Forget the credit, I just want $$$ ;-)
You cheated......you got more free time than I did......:D
Looks good, though. I just installed on a local test site, and it seems to be working perfectly, but I don't have any other mods installed on the test site, yet, so I'll install IH2 on there, and see if I can duplicate the problem.
Found a type-o in the css.....line 51 reads:
and should read:Code:div#nav-cat>ul a
Just from a quick glance, that's the only probem I've seen with it. I'll let you know if I have any problems after while when adding mods and images.Code:div#nav-cat ul a
For now, try using the mod in post #266. Get it installed, and let me know what you need changing (background colors). If you need background images, let me know.Quote:
Originally Posted by Caralyn
I did cheat, precisely because I am hard-pressed.Quote:
Originally Posted by Get Em Fast
What I did is zip files from my test site, which replicates approximately what is online, there is no readme, changelog, etc.
Thanks for the correction on the CSS, already tuned it up.
The problem I mentioned is not really one, actually I like the way it works.
You can see it in action in the Estetica Designs part of the site, I didn't have time to upload images for the Revlon part yet, working on it.
Just click on a master cat, and, after the description, you will be able to hover on the images of the sub-cats.
Glad to that you liked it.
Your site "Live" so we can take a look at it?Quote:
Originally Posted by ethical
hey get em fast, well the site is live but I have the mod off since I don't want it live until I figure out the problem. pretty sure its something in the css, perhaps the main css? that is probably causing the issue. i guess its hard to tell what it might be from just looking at the css huh?
Hey thanks, I will try that- you have a "fund" right? =)
Hey, If I can get it to work, got a coffee fund? =)
Hi, Getm fast and www.ladywig , I think I have got it now =) the new version out of 266 was very easy to follow and made changes instantly from/on my server. Boy I did not know I would be leaning so much by the seat of my pants! But when you get the one that will reference images (buttons.gif) let me know, but this current form will work great. I will adjust the colors to make it "purty" and see what happens. Coffee funds? Can't wait to see it live on my "real store" I am now using www. realridertack.org /version4
Does anyone know if there is a mod for a pos/barcode system to use with a scanner? Would be great for those walkin customers...I may be able to pay someone for the mod
No offense meant, but please don't post irrelevant questions in this thread.Quote:
Originally Posted by Caralyn
Check the downloads area for the mod, if it aint there, well, it aint.
Quote:
Originally Posted by ethical
Nope. That IS when you find things.....while it's running on a live server. If we can't see it "live", then we can't tell you what the problem is. Almost everybody in this forum that's been here any time at all, has FF (FireFox) and the Web Developer add-on, which allows us to look, and edit your css "on the fly"...ie "live". When we get it fixed, we will then either tell you the small piece of information that's causing your problem, or will send you a whole new css (if there's several problems). That's why when you ask a question, everyone's first response is "Got a URL for us?"
Hope that clears things up a bit.
A fund?......:smile: Yea, in my signature.Quote:
Originally Posted by Caralyn
Quote:
Originally Posted by Caralyn
Actually, I think I WILL put out one with images, but that's what caused all the problems to begin with, due to having to specify an exact image size, and that to match the level to the image, to match the sidebox size, and that to match the column size.............get the picture? And if the site changes the left column at all, everything usually has to be re-configured. So I think it to be best to build them one at a time per request from the user needing them, and with the user supplying the images and background colors they want used. Otherwise, it'll be the same ole' problems all over.
That's the reason I haven't submitted a new one with images, yet, as I was planning on doing.
So, anybody that wants one custom built can just pm me with the details.
hey get em thanks. I decided to work with the new code that ckosloff posted and it works a lot better. I am just curious to know what code i need to add/edit to:
set a different hover and background colour for the submenu items then those that I have set for the top level menu items.
the menu is live at the moment http://mypumpkindoodle.com/store
thanks
John
Not sure I understand your question because I think I have addressed it in the CSS I posted.Quote:
Originally Posted by ethical
You will note that there are 3 background colors, they might not be your choice, so just change every instance of them to what you like.
A style editor would make this job in a breeze.
Make sure you correct line 50, as Get em Fast pointed out.
Check out the menu in my site (in the sig), and let me know what would you like to change.
thanks for your reply and your right, I did make that work now thanks. I still have 1 minor issue.
1) Any sub menu item that has a further submenu displays the background color that is the same as the top level background, (on your site its grey, on mine white)
my question here is how can I set a different color for any submenu item that has a further submenu?
also Do you have a suggestion on a style editor?
thanks so much!
Quote:
Originally Posted by ethical
Here is a menu that's designed right off your site, so everything but the colors are the same, except with the added scroll in your level 4 menu since it was soooooooooo long.
The colors have been "mapped" out. Each level's color is shown as a color (red, green, blue, etc) instead of being hex colors.
Anyone else who uses this for a reference to change background colors, KEEP IN MIND: This was NOT customized for your site!!! This is just a color "map" for you. In THIS css, the only level that will scroll is level 4, but if you need another level to scroll, leave everything the same except the 2 level numbers, and the desired height of your scrolling box. In other words, if you need level 3 to scroll, it would look like this:
[code]div#nav-cat ul.level2 li.submenu:hover ul.level3 { height: 200px;overflow: scroll;}[code]
This (above) tells your menu to scroll level 3 when you hover on level 2.
Any questions?
Hope this helps everyone "map" out their colors.Code:body {
behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
margin-top: 0em;
background-color: #ffffff;
width: 100%;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 1.3em;
}
div#nav-cat ul {
margin: 0em;
padding: 0em;
width: 100%;
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;} /*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;
}
div#nav-cat ul.level3 li.submenu:hover ul.level4 { height: 200px;overflow: scroll;}
And also resolve the life-long question of "How can I get my menu to scroll, because it's so long.".
Get em Fast, it's a blessing that you are back, because the issue of submenus overlapping has dogged many users, I could never articulate an answer within the menu with images (maybe there isn't any...).Quote:
Originally Posted by Get Em Fast
The comments in your CSS are what users need, I'm not much good at that because I just use the settings I find.
So, why don't you rewrite the mod, with comments et al.
I know, I know, when you have the time.
Quote:
Originally Posted by ckosloff
Yea, that was a quick edit. I've thought for a ling time that I should "map" out those pesky little colors so the average user could change them with a little more ease. And the scrolling thing was something that you AND I worked on a long time ago, but couldn't ever get it quite right. We tried to limit the actual number of items displayed before it started scrolling.....Ha!! All we had to do was set the damn height on the box!! Go figure.
Now, just wait until somebody actually uses levels 5-∞.....:huh:
Also, I haven't checked to see if another level beyond the one that scrolls will even show up......(today's to-do list).
Back with an up-date (to this post) in a little bit.
Update to Menu: When I think it's PERFECTLY self-explanatory.
Sorry, I missed that question (good thing I go back and re-read posts, huh?), although a little irrelevant to this thread (hint: should have pm'd that one). Ckosloff is my thread security.....he'll get you for that.....:DQuote:
Originally Posted by ethical
Everybody has their preference of editors, with some swearing by nothing but notepad to do ALL their coding. Myself, I like to see EVERYTHING in "action", so I use DevPHP for ALL of MY needs. When I go to somebody Else's site (like yours) to edit something (like your menu), then I use the Web Developer Add-on for FireFox, then save to a simple text file (with notepad or wordpad), then upload it to you or the forum.
You might also enjoy THIS THREAD.
I have already made my suggestion, more than once.
Here's an example:
http://www.zen-cart.com/forum/showpo...&postcount=254
It's what I use, but I don't like to suggest, because, yes, that might lead to off-topic discussions and then site security would kick in.
Your comment is of course right, I just wanted to add that if you set margin-left to anything but 0, IE6 will have unexpected behaviors.Code: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 */
}
That browser has caused lots of grief, until I finally got it workable, not perfectly right.
Quote:
Originally Posted by ckosloff
Absolutely correct. Some browsers do treat this differently. When you get to the right side of the menu, just about to touch the sub-menu, the sub-menu will disappear! Sometimes you actually NEED to set a negative number on this (-0.1em;) which will overlap just a hair, but keep sub-menu in view.
Good catch. Thanks. I will also put that in comment section of css.
thank you both for your help! great mod and great support. seems to be working well for me thanks again.
Anytime, ethical. That's what this place is all about. We got great software for FREE, so helping each other with it, is just the "ethical" thing to do.Quote:
Originally Posted by ethical
Yes...........the pun WAS intended :smartalec:
Oh........sorry for taking so long on the reply, but as you can see, I was working on something that answered several questions at once. And a new scroll feature that has NEVER been implemented into this script until now.
Enjoy, for now. Still working on it.
Quote:
Absolutely correct. Some browsers do treat this differently. When you get to the right side of the menu, just about to touch the sub-menu, the sub-menu will disappear! Sometimes you actually NEED to set a negative number on this (-0.1em;) which will overlap just a hair, but keep sub-menu in view.
Good catch. Thanks. I will also put that in comment section of css
Hey I am having the same problem, it does apear to be margin related...one of the catagories is working fine, the others all disapear when you mouse over to the right on the css menu. Would that be found on the main stylesheet.css or on the stylesheet_catagories_menu.css? Maybe find the code on both?
I am using the Easy Flyout menu, 1.3.8. I finally figured out how to change the colors =) on my version5 site, the version5 site is not having this problem though. Could it be conflicting with Ez checkout? my real store is at realridertack org
Please post your question in the appropriate thread.Quote:
Originally Posted by Caralyn
what is the apropriate thread for this? I though this was the support for css flyout menu
Thanks! Let me know
Can SOMEONE PLEASE HELP ME...
its very simple but i cant seem to figure it out myself...
All i need is the submenu beside the categories i dont need the 3rd and 4th and 5th and 6th level
How can i go about only having a second level?
Please help my deadline is in a week.:smile:
Let me know what is Easy Flyout 1.3.8 and version5, then maybe we will be able to help.Quote:
Originally Posted by Caralyn
Recommended I try this one instead...parts of conervsaton in posts 255? to 264?Quote:
Originally Posted by Get Em Fast
That sounds like a winner...
OK, quick and dirty.
This is exactly what I use on my site.
It works fine and cross-browser, and it has all the latest enhancements.
However, it is tailored to my use.
All the customizations I used are in the thread, so customization shouldn't be a problem.
Nevertheless, there is still a small glitch, and it comes from the navigation in categories_ul_generator.php (so I think).
It is the version I got from lankeeyankee, it fixes all the breadcrumbs navigation problems, but when you click on a master category, the sub-cats show duplicated: one for the text and the other one for the image you can input.
Inputting the image will not solve the problem, it still shows both.
Minor problem, though.
The image hovers if you have IH2 installed.
PS. Get 'em Fast: your review is welcome, feel free to use in upcoming version.
Forget the credit, I just want $$$ ;-)
Attached Files NewCSSFlyout.zip (9.6 KB, 10 views)
It is the NewCSSFlyout mentioned here.....
What controls the width of the column...I must have uncommented something.....
And thanks! realrider tack org
Don't you understand that this menu reads from the categories in the database?Quote:
Originally Posted by jfreak419
If you only have a subcat, then it will only read that one.
You don't have a problem, only you imagine you do.
What column?Quote:
Originally Posted by Caralyn
Admin --> Configuration --> Layout settings.
Has nothing to do with this mod.
There is a support forum for that: page layout.
Last time I answer an unrelated question posted by you.
no see the thing is... i do have 3rd level subcategories but i dont want them to appear i only want the second level of categories to fly out... not the 3rd 4th 5th or 6th level.... so how do i go about doing that?
First time I see a request like this because, what would be the purpose of having subcats if you don't want them to show in the menu?Quote:
Originally Posted by jfreak419
There are several solutions to this:
1) Don't do subcats, just do EZ pages and link to them from the cat description.
2) Hack the code of the menu, very difficult.
3) Try hacking the CSS like display: none, but then how would you access the subcats?
Looks more like a philosophical than a support question.