Support for CSS Flyout Menu

ckosloff:

Where are you checking z-index?
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.

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

issy:

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.

I have taken the code above without success.

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

#navColumnOne {
overflow: hidden;
}

.columnLeft {
margin-right: 15px;
margin-left: 2em;
border: 0px dotted #FF0000;
overflow: hidden;
}

Thank you

issy:

I've resolved this issue, the problem was that I had overflow: hidden; in the 2 following divs...
Thanks for posting the error and the fix.

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:

limelites:

Hi,
Does anyone know how to change the fonts on the main title bar from ALL CAPS to Lowercase?
What do you mean by title bar?
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?

limelites:

Is there any way to programme a delay into the flyout menu?
That's a philosophical question.
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

$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>' ;

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?

The site is...

stx milling . com

Take out the spaces for the link.

welchyboy:

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.

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?

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

welchyboy:

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

welchyboy:

Well darn I guess I don't really see the point of not being able to have subcategories for regular links
You can put links in the subcat description box, customize them with HTML, CSS, etc.