Support for CSS Flyout Menu

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:

https://www.SalonRoyalty.com

SalonRoyalty:

Have I set this thing up wrong or what?
That's the way it's supposed to work.
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?

SalonRoyalty:

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

e81ny:

Please have a look at this page: http://s266460223.onlinehome.us/shop
I did have a look with Firefox and was unable to reproduce the issue you mention.
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/showpost.php?p=447333&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.

ckosloff:

I did have a look with Firefox and was unable to reproduce the issue you mention.
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.

Hi,

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.

e81ny:

Hi,

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

e81ny:

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..
Still cannot reproduce (with IE), please show a screenshot.
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.

Reading through the files, tpl_categories_css.php has the following comment:

// 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

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 statement
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:

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?

marksu:

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

ckosloff:

You have posted this question before, it is a CSS issue.
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.

marksu:

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

Try giving your #nav-cat ul ul a negative left margin. Mine is is like this:

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

Caralyn:

...any ideas?
Link to your site, please.

Caralyn:

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?

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.

Get Em Fast:

Hope this helps.
I can't believe you are back. Is it really you?