-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Woodymon
As previously reported the settings offered by Jade did appear to not help.
Woody
Hi Woody,
Changing each menu item to a percentage will get rid of the space, and I think it will be a better way to go about it than you have. Here's the exact post with instructions on doing so (you can always find it by searching for "percentage" in this thread):
http://www.zen-cart.com/forum/showthread.php?p=390897
Sorry, I can't follow css without looking at its' visual expression, so I can't offer advice on your method. I'd reload the original stylesheet, and follow the instructions above.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
CES
Do you want to have a look at my shop and see if that is what you want?
www.NicheLocks.com. If you want I can post my css to show what I did. (I can't remember if or what alterations I did make - lol.)
Hi Craig-
I like what you did with "dropmenu.gif". That is what I was looking for or something similar.
So is that a mod option or something custom?
For the site I'm working on I probably would want to create the gif to match background color so then the menu bar does not appear to go all the way across.
I just took a snapshot of your CSS but still not sure how you did it.
Yes it would be great if you could post any code and/or CSS changes used to customize your menu bar.
Thanks,
Woody.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
Changing each menu item to a percentage will get rid of the space, and I think it will be a better way to go about it than you have.
Here's the exact post with instructions on doing so (you can always find it by searching for "percentage" in this thread):
http://www.zen-cart.com/forum/showthread.php?p=390897
Oops. I missed that one. Yes I like your way better than mine ;-)
I was previously understanding your "percentage" recommend was just to control the menu resizing and not anything to do with the centering. but now I think I understand.
I'll wait to see CES/Craig's updated code.
I like his idea of creating a gif file and adding to
#dropMenuWrapper
Code:
background:transparent url(../images/dropmenu.gif) repeat-x scroll 100%;
That fits in very well with how the Future Zen Template works.
Thanks again,
Woody
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Woodymon
if you could post any code and/or CSS changes used to customize your menu bar..
I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?
I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template. :wink2:
Woody
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Woodymon
I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?
I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template. :wink2:
Woody
Hi Woody,
I think I'm still trying to visualize your issue. As I mentioned, I'm a very visual person, and I always have a hard time working with offline sites. If I see it, I can usually figure it out quickly.
If I understand correctly, you want a menu that is centered. :-) Now, do you want the drop down items to start all the way to the left, and end all the way to the right, so that there is no empty menu space? Or do you want it centered with space between the menu and the edges of the site?
I also understand that you want the menu to match the background color of your site. Is it a solid color? If so, instead of using a gif, you can just give dropMenuWrapper a background color that matches your sites color.
I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site. So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
Or do you want it centered with space between the menu and the edges of the site?
Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.
Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.
Quote:
I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site.
It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).
Quote:
So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.
Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.
Thanks again for the advice. Most appreciated.
Woody
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Woodymon
Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.
Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.
It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).
Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.
Thanks again for the advice. Most appreciated.
Woody
you might want to take a look at our menu. Ours runs 'side to side' (aka 100%) of the window, but you could easily change the percentage to suit, or use a transparent base wrapper and a color wrapper for the actual dropdowns. Perhaps the transparent base, with a color flip on mouseover/hover?
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Woodymon
Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.
I'm confused, why use a colored gif, if you can just set the background color?
background:#000000;
Quote:
Originally Posted by
Woodymon
It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).
You can change em's to pixels. Change the padding from em's to pixels, etc. Get rid of em's you get rid of resizing with font changes.
Quote:
Originally Posted by
Woodymon
Already did something similar but not getting the centering happening due to that space to the right of the menu.
Have you tried switching to percentages like my post? That gets rid of the extra space to the right of the menu.
-
Re: CSS Dropdown menu for your header- With Categories!
Jade-
I uploaded original CSS (v. 1.2 dated Feb 23, 2007) and then made edits as you recommended in this thread on June 17, 2007 and presto. Just what I was looking for... mostly.
The menu centers well in both Firefox and IE6. But when I adjust type size in IE6 I get mixed results.
At small/smaller/larger/largest text sizes the menu stays on one line. Cool!
But in IE6 when set text size to medium, the menu wraps to two lines ("Shopping Cart" moved to under "Home"). Strange that this only happens at default medium type size in IE6? And only in IE6, does not wrap not in FF.
Any ideas? My current relevant CSS is below.
I still need to test IE7 when it goes online but that can wait.
Thanks for your assist.
Woody
Code:
#dropMenuWrapper {
width: 100%; /* ORIG */
height: 2.17em; /* ORIG */
margin: 0; /* ORIG */
font-size: 1em; /* ORIG */
padding-bottom: 1em; /*NOT IN ORIG */
}
div#dropMenu {
width:70em; /* ORIG */
margin:0 auto; /* ORIG */
text-align:center; /* ORIG */
z-index:1000; /* ORIG */
position:relative; /* ORIG */
}
div#dropMenu li {
position: relative; /* ORIG */
list-style: none; /* ORIG */
margin: 0; /* ORIG */
float: left; /* ORIG */
line-height: 1em; /* ORIG */
width:16.667%; /* by jade */
}
div#dropMenu ul.level1 {
width:70em; /* ORIG */
margin:0 auto; /* ORIG */
background:#4F4F4F; /* ORIG */
text-align:center; /* ORIG */
height:2.17em; /* ORIG */
z-index:1000; /* ORIG */
}
div#dropMenu li a {
display: block; /* ORIG */
/* padding: .6em 2em .6em 2em; */ /* ORIG */
padding: .6em 0 .6em 0; /* by Jade */
text-decoration: none; /* ORIG */
text-transform: uppercase; /* ORIG */
color:#ffffff; /* ORIG */
text-align: center; /* ORIG */
border-right:1px solid #ffffff; /* ORIG */
border-left: 1px solid #ffffff; /* by jade */
}
div#dropMenu ul.level2 {
top: 2.17em;
background:#4f4f4f;
z-index:1000;
left:0; /* by jade */
}
/*
div#dropMenu li a.noLine {
padding-right:2em;
border:none;
} */
-
Re: CSS Dropdown menu for your header- With Categories!
I have learned to take things one step at a time, especially when I am learning something new ;-)
When you recommended change em's to pixels I understood that had to do with resizing the menu objects but not anything to do with centering the menu on the page and maintaining all in one line. My first goal was to achieve centering and nowrapping. Then the undesirable effects resulting from type resizing could be dealt with next.
So when I have the IE6 wrapping issue solved (when type size id default medium) I will proceed changing em's to px.
But then there are fifteen or so em settings in the menu CSS file. Any recommends on what px sizes to change the em sizes to (based on orginal CSS)?
Thanks for any recommends,
Woody
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Woodymon
I have learned to take things one step at a time, especially when I am learning something new ;-)
When you recommended change em's to pixels I understood that had to do with resizing the menu objects but not anything to do with centering the menu on the page and maintaining all in one line. My first goal was to achieve centering and nowrapping. Then the undesirable effects resulting from type resizing could be dealt with next.
So when I have the IE6 wrapping issue solved (when type size id default medium) I will proceed changing em's to px.
But then there are fifteen or so em settings in the menu CSS file. Any recommends on what px sizes to change the em sizes to (based on orginal CSS)?
Thanks for any recommends,
Woody
No, changing em's to px's will help your resizing issues. Because if padding is in em's then as font size increases, the padding increases. IE's default font size is larger than firefox's, so it will wrap first.
The most important thing to adjust is this section:
padding: .6em 2em .6em 2em;
The 2em's are the left and right padding. Change that to px's, then the widths won't resize.
If the full menu width is in em's, then the full menu will resize with font size as well.
The rest of the em's you can probably leave alone.
-
Re: CSS Dropdown menu for your header- With Categories!
OK, sorry for nor getting back sooner woody.
Here are my files:
Code:
body {
behavior: url(includes/csshover.htc);
}
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/
/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/
/*red */
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
#dropMenuWrapper {
background: url(../images/dropmenu.gif) 100% 100% repeat-x;
/*background: rgb(79,79,79);*/
/*border-top:0px solid #fff;*/
width:100%;
height:2.17em;
margin:0;
font-size:1em;
}
div#dropMenu {
width:65em;
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:65em;
margin:0 auto;
text-align:center;
background: url(../images/dropmenu.gif) 100% 100% repeat-x;
/* background: rgb(79,79,79);*/
height:2.17em;
z-index:1000;
}
div#dropMenu li a.lineright {border-right:1px solid #ffffff;}
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% repeat-x;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 2em .6em 2em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-left:1px solid #ffffff;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% repeat-x;} */
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:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}
/*div#dropMenu li.submenu li.submenu {background: #737373;}*/
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 100% 50% no-repeat;}*/
And:
Code:
<!-- menu area -->
<div id="dropMenuWrapper">
<div id="dropMenu">
<ul class="level1">
<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>
<ul class="level2">
<li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_NEW); ?>"><?php echo HEADER_TITLE_NEW_PRODUCTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_SPECIALS); ?>"><?php echo HEADER_TITLE_SPECIALS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_ADVANCED_SEARCH); ?>"><?php echo HEADER_TITLE_SEARCH; ?></a></li>
</ul>
</li>
<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a>
<?php
// load the UL-generator class and produce the menu list dynamically from there
require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
$zen_CategoriesUL = new zen_categories_ul_generator;
$menulist = $zen_CategoriesUL->buildTree(true);
$menulist = str_replace('"level4"','"level5"',$menulist);
$menulist = str_replace('"level3"','"level4"',$menulist);
$menulist = str_replace('"level2"','"level3"',$menulist);
$menulist = str_replace('"level1"','"level2"',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
$menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
echo $menulist;
?>
</li>
<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
<ul class="level2">
<li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo HEADER_TITLE_SHIPPING_INFO; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo HEADER_TITLE_PRIVACY_POLICY; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo HEADER_TITLE_CONDITIONS_OF_USE; ?></a></li>
<?php if (defined('FILENAME_SITE_MAP')) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>
<?php } ?>
<?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?>
<li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_GV_FAQ; ?></a></li>
<?php } ?>
<?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
<li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li>
<?php } ?>
<?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
</ul>
</li>
<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
<ul class="level2">
<?php if ($_SESSION['customer_id']) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<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_NEWSLETTERS, '', 'SSL'); ?>"><?php echo HEADER_TITLE_NEWSLETTERS; ?></a></li>
<?php } else { ?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
<?php } ?>
</ul>
</li>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li class="submenu"><a class="lineright" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
<ul class="level2">
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
</ul>
</li>
<?php } else { ?>
<li><a class="lineright" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<?php } ?>
</ul>
</div>
</div>
<div class="clearBoth"></div>
If anybody looks at this and thinks "what a plonker Craig, you should have done this" please go ahead and tell me.
Sorry I can't remember what alterations I did and what they were for woody. I hope this helps anyhow.
Craig
-
Re: CSS Dropdown menu for your header- With Categories!
Just a lot of random trial and error. Two steps forward one step back.
Now in IE6 menu stays on one line and no wrapping and no resizing, when browser type size changed.
And now in Firefox the menu stays on one line and never wraps.
But when FF browser type size is changed the menu increases/decreases in size.
Understanding the relevant diffs in FF and IE6 is my main issue now.
Some more trial and error to do. And also test in IE7 and Safari and Opera and...
Thanks for all the suggestions.
Woody
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Woodymon
Just a lot of random trial and error. Two steps forward one step back.
Now in IE6 menu stays on one line and no wrapping and no resizing, when browser type size changed.
And now in Firefox the menu stays on one line and never wraps.
But when FF browser type size is changed the menu increases/decreases in size.
Understanding the relevant diffs in FF and IE6 is my main issue now.
Some more trial and error to do. And also test in IE7 and Safari and Opera and...
Thanks for all the suggestions.
Woody
You may never be able to get all browsers look exactly the same.
Will your site be online soon? LOL, that would help a ton.
What's your set width for dropMenuWrapper and dropMenu?
What's your font size for the menu?
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
What's your set width for dropMenuWrapper and dropMenu? What's your font size for the menu?
The main thing is all now stays on one line and does not wrap in either IE6 or FF. With your assistance I have succeeded. Thanks!
Anyone aware of a good web resource explaining how FF, IE6 and IE7 respond to CSS and providing workarounds and hacks?
Below is my latest relevant CSS. Still some "em" values to convert to "px" but I'm slowly getting there (no real need to convert for the submenu items).
Woody
Code:
#dropMenuWrapper {
width: 100%; /* ORIG */
height: 5px; /* ORIG */
margin: 0; /* ORIG */
font-size: 11px; /* ORIG */
padding-bottom: 1px;
}
div#dropMenu {
width: 840px;
margin: 0 auto; /* ORIG */
text-align: center; /* ORIG */
z-index: 1000; /* ORIG */
position: relative; /* ORIG */
}
div#dropMenu ul {
margin: 0;
padding: 0;
}
div#dropMenu li {
position: relative; /* ORIG */
list-style: none; /* ORIG */
margin: 0; /* ORIG */
float: left; /* ORIG */
line-height: 1em; /* ORIG */
width: 16.667%; /* width added by jade */
background: #A5B7E9; /*NOT IN ORIG */
}
div#dropMenu ul.level1 {
width: 70em; /* ORIG NOT ME */
margin: 0 auto; /* ORIG NOT ME */
text-align: center; /* ORIG */
height: 2.17em; /* ORIG */
z-index: 1000; /* ORIG */
}
div#dropMenu li a {
display: block; /* ORIG */
padding: 5px 0 5px 0; /* by Jade */
text-decoration: none; /* ORIG */
text-transform: uppercase; /* ORIG */
color: #ffffff; /* ORIG */
text-align: center; /* ORIG */
border-right: 1px solid #ffffff; /* ORIG */
border-left: 1px solid #ffffff; /* by jade */
}
div#dropMenu ul.level2 {
top: 3px;
background: #4f4f4f;
z-index: 1000;
left: 0; /* recommend by jade */
}
-
Re: CSS Dropdown menu for your header- With Categories!
Thanks :)
I would love to have my site look something like this one
http://makeupconnection.com/
I don't know how to get rid of the categories on the side panel of mine http://www.the-unique-boutique.com and
I don't know how to add the other links they
(http://makeupconnection.com/) have at the top :)
If you can help, please help me. Down on hands and knees begging :)
Thanks
Sandra
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Woodymon
The main thing is all now stays on one line and does not wrap in either IE6 or FF. With your assistance I have succeeded. Thanks!
Anyone aware of a good web resource explaining how FF, IE6 and IE7 respond to CSS and providing workarounds and hacks?
Below is my latest relevant CSS. Still some "em" values to convert to "px" but I'm slowly getting there (no real need to convert for the submenu items).
Woody
Code:
#dropMenuWrapper {
width: 100%; /* ORIG */
height: 5px; /* ORIG */
margin: 0; /* ORIG */
font-size: 11px; /* ORIG */
padding-bottom: 1px;
}
div#dropMenu {
width: 840px;
margin: 0 auto; /* ORIG */
text-align: center; /* ORIG */
z-index: 1000; /* ORIG */
position: relative; /* ORIG */
}
div#dropMenu ul {
margin: 0;
padding: 0;
}
div#dropMenu li {
position: relative; /* ORIG */
list-style: none; /* ORIG */
margin: 0; /* ORIG */
float: left; /* ORIG */
line-height: 1em; /* ORIG */
width: 16.667%; /* width added by jade */
background: #A5B7E9; /*NOT IN ORIG */
}
div#dropMenu ul.level1 {
width: 70em; /* ORIG NOT ME */
margin: 0 auto; /* ORIG NOT ME */
text-align: center; /* ORIG */
height: 2.17em; /* ORIG */
z-index: 1000; /* ORIG */
}
div#dropMenu li a {
display: block; /* ORIG */
padding: 5px 0 5px 0; /* by Jade */
text-decoration: none; /* ORIG */
text-transform: uppercase; /* ORIG */
color: #ffffff; /* ORIG */
text-align: center; /* ORIG */
border-right: 1px solid #ffffff; /* ORIG */
border-left: 1px solid #ffffff; /* by jade */
}
div#dropMenu ul.level2 {
top: 3px;
background: #4f4f4f;
z-index: 1000;
left: 0; /* recommend by jade */
}
Try changing that 70em to 840px. Also, since your menu is now a set width, instead of using 16.667%, you can use 140px instead. (840px divided by 6).
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
icyorchid
I'm not sure what you're asking for as far as the top of the site. That's a fairly complicated graphical drop down menu and the extra links "at the top" also. I have no quick solution to get your site looking like that one. You can examine their header_menu.css to get an idea on how it was done.
To get rid of the side panel, just turn the sidebox off in "tools", "Layout Boxes Controller".
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
I'm not sure what you're asking for as far as the top of the site. That's a fairly complicated graphical drop down menu and the extra links "at the top" also. I have no quick solution to get your site looking like that one. You can examine their header_menu.css to get an idea on how it was done.
To get rid of the side panel, just turn the sidebox off in "tools", "Layout Boxes Controller".
I feel like a dope! I didn't think of turning off the sidebox. lol
I was trying to close out the categories. lol Thank you for letting me know where that was. lol
As far as the other links, I guess I can do without. :(
I wish I knew how to do these templates. Is there like a school or something that is free of reasonably priced that I can join online?
Thanks
Sandra
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
icyorchid
I feel like a dope! I didn't think of turning off the sidebox. lol
I was trying to close out the categories. lol Thank you for letting me know where that was. lol
As far as the other links, I guess I can do without. :(
I wish I knew how to do these templates. Is there like a school or something that is free of reasonably priced that I can join online?
Thanks
Sandra
I'm just not fully sure what you're looking for, I'd be happy to help. As for other links, you can turn on ezpages for the header, and those would show up just above your drop down menu.
Are you having problems with your "HOME" and "LOGIN" links up top? they seem kind of squished off to the right there.
I don't know of any free schools online, sorry....
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
Try changing that 70em to 840px. Also, since your menu is now a set width, instead of using 16.667%, you can use 140px instead. (840px divided by 6).
Hey thanks. Very good recommends and learning something at the same time.
I also discovered
div#dropMenu ul.level2
top: 22px;
was needed. Otherwise when hover over Home in menu, the drop down menu covered the Home link.
Woody
-
Re: CSS Dropdown menu for your header- With Categories!
Hi,
Is there a way to make the menu "sticky"? I'm using a css horizontal menu with a horizontal flyout for over a year and am wondering if somebody knows how to make the menu "sticky" for 5-10 seconds.
This would realy increase the usability since when you don't move the cursor acurate, the menu gets killed.
Thanks in advance.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Tieske
Hi,
Is there a way to make the menu "sticky"? I'm using a css horizontal menu with a horizontal flyout for over a year and am wondering if somebody knows how to make the menu "sticky" for 5-10 seconds.
This would realy increase the usability since when you don't move the cursor acurate, the menu gets killed.
Thanks in advance.
No, unfortunately it is not an option with a css only menu, that would be available in a javascript based menu.
There's no gap between your menu item and the drop downs below it, is there?
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
No, unfortunately it is not an option with a css only menu, that would be available in a javascript based menu.
There's no gap between your menu item and the drop downs below it, is there?
I thought so (java), thanks anyway.
The menu is working just fine (www interieurbeslag nl), but visitors have to balance with their cursor between the upper and lower borders of the menublocks since it also flies horizontal.
The best solution will be changing it to an horizontal menu with vertical flyout like the dropmenu discussed here.
A quick change didn't work since I had trouble with the submenu of the catagories with this menu. And I forgot what makes a flyout vertical... learning by doing a year ago wasn't ideal for long term ;).
-
Re: CSS Dropdown menu for your header- With Categories!
Hi
I'm using this rather nice menu but have hit a problem - some of my categories go more than 5 deep - and the flyout does strange things once you are 4 subcats in - it automatically pops out all the lower subs into an unusable mess. Is there any way to extend the depth this menu supports as I guess that lvl 4 behaviour is in the code somewhere...?
Thanks for any help
WOoDY
(www.jorvikgames.co.uk)
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jorvikgames
Hi
I'm using this rather nice menu but have hit a problem - some of my categories go more than 5 deep - and the flyout does strange things once you are 4 subcats in - it automatically pops out all the lower subs into an unusable mess. Is there any way to extend the depth this menu supports as I guess that lvl 4 behaviour is in the code somewhere...?
Thanks for any help
WOoDY
(
www.jorvikgames.co.uk)
Part of the issue is the length of your category names. They're trying to take up two lines, and its causing problems down the road. I would change all instances of 12em in stylesheet_header_menu to at least 13em, maybe even 13.5 or 14em.
Now, the issue where hitting level three in order to pop out level 4, and level 5 pops out as well, I can't fix (its a mystery i haven't been able to solve), but if you change the width above, it will no longer be jumbled up.
Now, if you want to stop at a certain level, you can open up includes/classes/categories_ul_generator.php and change the value of max level to three, then it will only flyout to level three.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jorvikgames
Hi
I'm using this rather nice menu but have hit a problem - some of my categories go more than 5 deep - and the flyout does strange things once you are 4 subcats in - it automatically pops out all the lower subs into an unusable mess. Is there any way to extend the depth this menu supports as I guess that lvl 4 behaviour is in the code somewhere...?
Thanks for any help
WOoDY
(
www.jorvikgames.co.uk)
Great site, btw!
However, "Heroes of Azaroth" probably doesn't *really* have "Booser Boxes" (more like WoWarcrack) :D
-
Re: CSS Dropdown menu for your header- With Categories!
Hi,
Can you tell me how to make the drop down menu to the width of the my site?
I also would like to change the color to the drop down menu.
Something that will make it pop. Any color suggestions with the
code would be appreciated. :)
I don't like red or green. lol
Thanks
Sandra
http://www.the-unique-boutique.com
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
icyorchid
Hi,
Can you tell me how to make the drop down menu to the width of the my site?
I also would like to change the color to the drop down menu.
Something that will make it pop. Any color suggestions with the
code would be appreciated. :)
I don't like red or green. lol
Thanks
Sandra
http://www.the-unique-boutique.com
The color changes are simple CSS (in the stylesheet). Coordinate the colors with those you're already using on your site for the best look.
As far as the changing size, that has been thoroughly addressed in this thread... go back a couple pages & you'll find it easily :)
cheers!
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
icyorchid
Hi,
Can you tell me how to make the drop down menu to the width of the my site?
I also would like to change the color to the drop down menu.
Something that will make it pop. Any color suggestions with the
code would be appreciated. :)
I don't like red or green. lol
Thanks
Sandra
http://www.the-unique-boutique.com
Here's a bunch of css for you.... I started to play with it on your site, and ended up doing all the work for ya, LOL. :smartalec: Replace stylesheet_header_menu.css with everything below.
Code:
body {
behavior: url(includes/csshover.htc);
}
/*this is the text color and background color when things are hovered over down the menu*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #ffffff!important;background:#2b68ab;}
#dropMenuWrapper {
width:100%;
height:35px;
margin:0;
font-size:11px;
border-left:1px solid #999999;
}
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;
width:12.5%;
}
div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#ffffff; /*this is the background color of the main menu*/
height:35px;
z-index:1000;
}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 9px 0;text-decoration: none; text-transform:uppercase; color:#000000; text-align:center; border-right:1px solid #999999;height:17px;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 16em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:16em;}
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: 35px; background:#999999;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 16em; background:#F0555C}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
The above will make the menu fill your site (I changed the two instances of 750px to 100%), will make each item have a percentage width, gave each item a bigger height since you have a lot of drop downs and some of them would wrap onto two lines, and also adjusts color. You are actually using the categories version of the drop down menu which was developed by someone else, though I don't think he started a support thread, so its fine to ask questions here.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
Here's a bunch of css for you.... I started to play with it on your site, and ended up doing all the work for ya, LOL. :smartalec: Replace stylesheet_header_menu.css with everything below.
Code:
body {
behavior: url(includes/csshover.htc);
}
/*this is the text color and background color when things are hovered over down the menu*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #ffffff!important;background:#2b68ab;}
#dropMenuWrapper {
width:100%;
height:35px;
margin:0;
font-size:11px;
border-left:1px solid #999999;
}
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;
width:12.5%;
}
div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#ffffff; /*this is the background color of the main menu*/
height:35px;
z-index:1000;
}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 9px 0;text-decoration: none; text-transform:uppercase; color:#000000; text-align:center; border-right:1px solid #999999;height:17px;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 16em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:16em;}
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: 35px; background:#999999;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 16em; background:#F0555C}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
The above will make the menu fill your site (I changed the two instances of 750px to 100%), will make each item have a percentage width, gave each item a bigger height since you have a lot of drop downs and some of them would wrap onto two lines, and also adjusts color. You are actually using the categories version of the drop down menu which was developed by someone else, though I don't think he started a support thread, so its fine to ask questions here.
WOW thanks :)
I am happy with it, but how do I get another category where the blank space is? Also when I add categories, will they just appear to the drop down menu or do I have to manually add them and if so how do I do that?
Thanks so much for helping me out. I really appreciate it, wasn't expecting you to do all the work. lol
Have a great Sunday
Sandra
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
icyorchid
WOW thanks :)
I am happy with it, but how do I get another category where the blank space is? Also when I add categories, will they just appear to the drop down menu or do I have to manually add them and if so how do I do that?
Thanks so much for helping me out. I really appreciate it, wasn't expecting you to do all the work. lol
Have a great Sunday
Sandra
I was just showing my family my site, and I don't understand why the drop down menu isn't working on the home page? You said I was using a different drop down menu, is there another one I should use instead?
Thanks
Sandra
http://www.the-unique-boutique.com
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
icyorchid
I was just showing my family my site, and I don't understand why the drop down menu isn't working on the home page? You said I was using a different drop down menu, is there another one I should use instead?
Thanks
Sandra
http://www.the-unique-boutique.com
Another thing that I see is that the prices are not with the images, they are on the bubble background.
Any way to fix that?
Thanks
Sandra
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
icyorchid
I was just showing my family my site, and I don't understand why the drop down menu isn't working on the home page? You said I was using a different drop down menu, is there another one I should use instead?
Thanks
Sandra
http://www.the-unique-boutique.com
Ok, a few issues. First, I'm assuming you're using IE7, and the menu is not supposed to be all scrunched up like that. Change #headerWrappers' width from width:auto, to width:100%.
As for the menu not working on the home page... I bet that only happens when you go to http://www.the-unique-boutique.com, but NOT when you go to http://the-unique-boutique.com
You need to add this to your root .htaccess file:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.the-unique-boutique.com$ [NC]
RewriteRule ^(.*)$ http://the-unique-boutique.com/$1 [R=301,L]
## the following makes sure the correct mime type is sent for the .htc file
AddType text/x-component .htc
This will remove all www. before your site's address, so that if people go to www.the-unique-boutique.com, it will change to the-unique-boutique.com. This is only an IE issue, but IE needs the csshover.htc file, and IE also sees www. and non-www as two different domains, and since your site's base URL is http://the-unique-boutique.com, IE gets confused, LOL.
You are using the css dropdown menu that shows the categories in the top level. THe css drop down menu I designed does this instead:
http://www.zencart137.jadetrue.com/
That's what I meant when I said you use a different version.
Yes, categories will automatically add when you add one, however you're out of room, so you'd either need to only add subcategories, or use my version of the menu (right above the one you downloaded in the downloads section.)
-
Re: CSS Dropdown menu for your header- With Categories!
I'm using the CSS Flyout Header 1.3.*
I figured out the way to clone the Information menu and limited it to 4 items from the original Information DropDown but have no idea how to customize it with my own links (I need both external and internal leading to existing i.e. page_2.php pages.
Here is the link to my site;
http://www.time-co.com/zencart/
I want to customize the second Information menu (the one next to Shopping Cart.
Could you please show me to sample codes for adding intenal and externakl links in place the Shipping & Returns for instance?
Other than my own limitations the mode is just awesome!
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
all4coffee
I'm using the CSS Flyout Header 1.3.*
I figured out the way to clone the Information menu and limited it to 4 items from the original Information DropDown but have no idea how to customize it with my own links (I need both external and internal leading to existing i.e. page_2.php pages.
Here is the link to my site;
http://www.time-co.com/zencart/
I want to customize the second Information menu (the one next to Shopping Cart.
Could you please show me to sample codes for adding intenal and externakl links in place the Shipping & Returns for instance?
Other than my own limitations the mode is just awesome!
You've got issues with your header file, for example, you have headerWrapper twice, and its causing some serious issue in Firefox.
For extra links, simply look at the source of your site, and copy the formatting there. For example, the Perfect Pour link looks like this in your source:
<li><a href="http://www.time-co.com/zencart/index.php?main_page=page&id=4&chapter=0">Perfect Pour</a></li>
SO, just add a link after, like this:
<li><a href="index.php?main_page=page_name_here">Name of Page</a></li>
You would just add it after:
<?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
-
Re: CSS Dropdown menu for your header- With Categories!
Hello ... another fan here of the new Cherry-Zen template but I want to add in this dropdown menu as well. I can't seem to figure out WHERE to add it into my header file. I want it in the E-Z pages row right under my banner.
Here's a link to my site and I will be posting to the Cherry-Zen thread with some questions I have about the product descriptions.
http://smockingbooks.com/index.php?main_page=
not quite open yet as we're not set up with the secure socket layer.
Beth-katherine
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Beth-katherine
Hello ... another fan here of the new Cherry-Zen template but I want to add in this dropdown menu as well. I can't seem to figure out WHERE to add it into my header file. I want it in the E-Z pages row right under my banner.
Here's a link to my site and I will be posting to the Cherry-Zen thread with some questions I have about the product descriptions.
http://smockingbooks.com/index.php?main_page=
not quite open yet as we're not set up with the secure socket layer.
Beth-katherine
I'm not sure you can put it IN the ezpages row... how about above or below the ezpages row?
From the readme.txt of css dropdown menu:
Quote:
3. If you have heavily modified your includes/templates/YOUR_TEMPLATE/common/tpl_header.php, instead of uploading the tpl_header.php included in this download, you can simply add this to your header where you'd like the css menu to appear:
<!--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-->
So, you'll upload all of the files for css dropdown menu (Except for includes/templates/YOUR_TEMPLATE/common/tpl_header.php), and then you'll add the above code to includes/templates/cherry_zen/common/tpl_header.php. If you want it above the ezpages, paste it above this:
<!--bof-header ezpage links-->
if you want it after the ezpages, paste it after this:
<!--eof-header ezpage links-->
-
Re: CSS Dropdown menu for your header- With Categories!
[quote=jettrue;424756]You've got issues with your header file, for example, you have headerWrapper twice, and its causing some serious issue in Firefox.
quote]
Thanks for your response. What would you suggest and how it needs to be changed to fix the issue w/ Firefox?
I have no access to Firefox so I wasn't aware of it.
-
Re: CSS Dropdown menu for your header- With Categories!
[QUOTE=all4coffee;425288]
Quote:
Originally Posted by
jettrue
You've got issues with your header file, for example, you have headerWrapper twice, and its causing some serious issue in Firefox.
quote]
Thanks for your response. What would you suggest and how it needs to be changed to fix the issue w/ Firefox?
I have no access to Firefox so I wasn't aware of it.
I would reload the original common/tpl_header.php for the template, then follow these instructions for the drop down menu (from the readme.txt):
Quote:
3. If you have heavily modified your includes/templates/YOUR_TEMPLATE/common/tpl_header.php, instead of uploading the tpl_header.php included in this download, you can simply add this to your header where you'd like the css menu to appear:
<!--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-->
-
Re: CSS Dropdown menu for your header- With Categories!
jettrue,
I have been experimenting with your drop down menu for a while and really like it. :clap:
I have a request for future development. I use a lot of EZpages and it would be very useful if the "chaptered" pages could be put into a second level flyout. In other words, if the first page in a chaptered set would appear in the drop down and the other pages would be in a flyout. I can see there might be a problem since zencart doesn't really distinguish between the first and other pages in the set, except by sort order. Or would it be better (easier) to clone the drop menu for the Define Pages and do it manually?
Maury
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
mauryg
Or would it be better (easier) to clone the drop menu for the Define Pages and do it manually?
Maury
That's what I would do. :-)
-
Re: CSS Dropdown menu for your header- With Categories!
Maybe there's something wrong with me that I can't figure this out...
On the example site (http://www.zencart137.jadetrue.com), under "Testing Category 2", you can access 2 levels of subcategories.
I need to do the same thing.
However, when I try making another unordered list within another, nothing displays right...
What's the secret? :wacko:
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
threddies.com
Maybe there's something wrong with me that I can't figure this out...
On the example site (
http://www.zencart137.jadetrue.com), under "Testing Category 2", you can access 2 levels of subcategories.
I need to do the same thing.
However, when I try making another unordered list within another, nothing displays right...
What's the secret? :wacko:
I'm confused.... the drop down menu is automatic... as you add subcategories, that subcategory will show up automatically.... I think I'm misunderstanding you.
-
Re: CSS Dropdown menu for your header- With Categories!
If I use the structure that is provided and just plug my info in, everything looks and works correctly. No problem.
If I try to add in a sublevel under a sublevel, all I get is plain text. It does not display as a link, and the text itself does not pop out of the 1st sublevel - it displays layered on top of it.
This is what I'm doing:
HTML Code:
<!--Insert your links here-->
<li><a href="#">1st Set of Links</a>
<ul>
<li><a href="testing sublevel">testing sublevel</a>
<ul>
<li><a href="testing subsublevel">subsub level</a>
</li></ul>
<li><a href="Link 12">Link 1.2</a></li>
<li><a href="Link 13">Link 1.3</a></li>
</ul>
</li>
I appreciate your help!
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
threddies.com
If I use the structure that is provided and just plug my info in, everything looks and works correctly. No problem.
If I try to add in a sublevel under a sublevel, all I get is plain text. It does not display as a link, and the text itself does not pop out of the 1st sublevel - it displays layered on top of it.
I appreciate your help!
No, you're not giving them the correct styles. View the source of the site to see the styles that are applied within the drop down menu.
It should be like this:
HTML Code:
<li class="submenu"><a href="link.htm">MAIN DROP DOWN</a>
<ul class="level2">
<li class="submenu"> <a href="link.htm">First Under Drop Down</a>
<ul class="level3">
<li class="submenu"> <a href="link.htm">Sub under First Drop Down</a>
<ul class="level4">
<li> <a href="link.htm">Sub Sub Under First Drop Down</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
-
Removed menu items and menu now left justified.
Hi All,
I've removed various items from the drop down menu by removing lines from the tpl_drop_menu.php file.
All is now great accept that my menu is now left justified. I need it to be in the centre. I know I've bugger*d something up but for the life of my I can't work out what.
I'm a total mupet when it comes to php so please be gentle with me!
Here's a link to the page in question. www.lastrap.co.uk/shop
Best regards
Richard Georgiou
-
Re: Removed menu items and menu now left justified.
Quote:
Originally Posted by
rgeorgiou
Hi All,
I've removed various items from the drop down menu by removing lines from the tpl_drop_menu.php file.
All is now great accept that my menu is now left justified. I need it to be in the centre. I know I've bugger*d something up but for the life of my I can't work out what.
I'm a total mupet when it comes to php so please be gentle with me!
Here's a link to the page in question.
www.lastrap.co.uk/shop
Best regards
Richard Georgiou
All you did was mess up the commenting out of the colors.
the top of the file should look like this:
body {
behavior: url(includes/csshover.htc);
}
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/
/*blue*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
-
Re: CSS Dropdown menu for your header- With Categories!
My word, what amazing speed you reply with, and what accuracy...
You'd never get that quality of service with a commercial product.
In your debt
Richard Georgiou
-
Re: CSS Dropdown menu for your header- With Categories!
Jettrue,
I wouldn't have thought of that, but then it's your mod. I was able to correct the shift problem by modifying the CSS:
Code:
stylesheet_header_menu.css (line 41)
div#dropMenu ul.level1 {background:#4F4F4F none repeat scroll 0%;
float:left;
margin:0pt auto;
text-align:center;
width:70em;
z-index:1000;
}
change to:
div#dropMenu ul.level1 {
background:#4F4F4F none repeat scroll 0%;
float:left;
margin:0pt auto;
text-align:center;
width:54em;
z-index:1000;
padding-left: 16em;
}
Looks even better when you remove the "|" separators from the menu. Of course, you would have to play with the numbers if you added more items to the level 1 menu.
Any comments on this approach?
Maury
-
Re: CSS Dropdown menu for your header- With Categories!
OK, I believe I have the structure correct - the menu displays fine on the first level. Unfortunately I've probably done something else dumb and am stumped again...
When you mouse-over one of the main categories, the sub-categories are all there and are generally fine. The problem is that the subs below that do not flyout into their own boxes, instead they are layered on top of the preceding categories.
Below is a screenshot. The 2nd level categories under Hair Accessories should be BANDANAS, BARRETTES, BASICS IN BULK, CLAW CLIPS, FOR TOTS, HAIR STICKS, HEADBANDS, PONYTAIL HOLDERS, SCRUNCHIES, MADE-TO-ORDER, RUNWAY COLLECTION. Everything that is there other than that should be a sub of something else, if that makes any sense. Don't know why it is not popping out.
http://www.threddies.com/images/dropdownblah.jpg
Here is the code:
Code:
<style type="text/css">
#zUL li {
float:left;
width:10em;
position:relative;
}
#zUL li ul {
visibility:hidden;
position:absolute;
}
#zUL li:hover ul {
visibility:visible;
background-color:#000000; /*change this to any color you want*/
}
</style>
<div id="navMainWrapper">
<div id="navMain">
<ul id="zUL">
<!--Insert your links here-->
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=128">Apparel</a>
</li>
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=125">Bath + Body</a>
</li>
<li class="submenu"><a href="#">Hair Accessories</a>
<ul class="level1">
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_72">Bandanas</a>
</li>
<li> <a href="#">Barrettes</a>
<ul class="level2">
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_68_106">Embellished Barrettes</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_68_105">Large Barrettes</a></li>
</ul>
</li>
<li> <a href="#">Basics in Bulk</a>
<ul class="level2">
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_76_88">Headbands</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_76_90">Ponytail Holders</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_76_124">Snap Clips</a></li>
</ul>
</li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_74">Claw Clips</a>
</li>
<li> <a href="#">For Tots</a>
<ul class="level2">
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_122">Barrettes</a></li>
<li> <a href="#">Clips</a>
<ul class="level3">
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_119">Embellished</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_115">Flowers</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_117">Gingham</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_116">Polka Dots</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_118">Solid Colors</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_121">Stripes</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_120">Teeny Tiny Clips</a></li>
</ul>
</li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_112">Headbands</a></li>
</ul>
</li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_73">Hair Sticks</a>
</li>
<li> <a href="#">Headbands</a>
<ul class="level2">
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_83">Basics in Bulk</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_78">Beaded</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_79">Elastic</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_80">Fabric</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_81">Lace</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_85">Ribbon</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_137">Scarf Headbands</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_102">Stretch</a></li>
<li> <a href="#">Structured</a>
<ul class="level3">
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_107">Plastic Headbands</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_123">Skinny Structured Headbands</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_108">Structured Fabric Headbands</a></li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_104">Structured Scarf Headbands</a></li>
</ul>
</li>
<li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_82">Woven</a></li>
</ul>
</li>
<li><a href="#">Ponytail Holders</a>
<ul class="level2">
<li><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_66_109">Double-loop Pony Holders</a></li>
<li><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_66_95">Basic Pony Holders</a></li>
<li><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_66_96">Embellished Pony Holders</a></li>
</ul>
</li>
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_94">Scrunchies</a></li>
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_71">Made-to-order</a></li>
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_110">Runway Collection</a></li>
</ul>
</li>
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=129">Odds + Ends</a></li>
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=21">Gift Certificates</a></li>
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=77">CLEARANCE!</a></li>
<!--------------end of links-------------->
</ul>
<br class="clearBoth" />
</div>
</div>
I'm thinking it has something to do with these "submenu" and "level2" etc classes maybe? I don't know where they're coming from to be quite honest....
Thanks again for all your help - it is so much appreciated! I'd love to get this great mod working right...
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
threddies.com
OK, I believe I have the structure correct - the menu displays fine on the first level. Unfortunately I've probably done something else dumb and am stumped again...
When you mouse-over one of the main categories, the sub-categories are all there and are generally fine. The problem is that the subs below that do not flyout into their own boxes, instead they are layered on top of the preceding categories.
Below is a screenshot. The 2nd level categories under Hair Accessories should be BANDANAS, BARRETTES, BASICS IN BULK, CLAW CLIPS, FOR TOTS, HAIR STICKS, HEADBANDS, PONYTAIL HOLDERS, SCRUNCHIES, MADE-TO-ORDER, RUNWAY COLLECTION. Everything that is there other than that should be a sub of something else, if that makes any sense. Don't know why it is not popping out.
I'm thinking it has something to do with these "submenu" and "level2" etc classes maybe? I don't know where they're coming from to be quite honest....
Thanks again for all your help - it is so much appreciated! I'd love to get this great mod working right...
I'm curious. Why are you doing this all by hand? Are those your categories? This mod does that all by itself.
Also, look closer at the code I posted for you. Every <li> except for the last submenu, should be like this:
<li class="submenu">
But again I have to ask... why in the world would you do it by hand? LOL!
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
I'm curious. Why are you doing this all by hand? Are those your categories? This mod does that all by itself.
LOL I think there is something wrong with me...
Here goes the dumbest question yet...
HOW does it do it all by itself?? What the heck have I been doing all morning?
Looking at the Readme, right... I edited the bg color, edited the links, pushed the files over. (well, they're not over right now, but ya know)
When you say "edit the links", you do mean to fill them in just as indicated in the original file, right? I started by doing that, but ran into trouble when I tried to get the links to go another level or two deeper... the example which you provided in the file only went one deep.
What the heck did I do? Leave it to me to take something super easy and make it complicated... :laugh:
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
threddies.com
LOL I think there is something wrong with me...
Here goes the dumbest question yet...
HOW does it do it all by itself?? What the heck have I been doing all morning?
Looking at the Readme, right... I edited the bg color, edited the links, pushed the files over. (well, they're not over right now, but ya know)
When you say "edit the links", you do mean to fill them in just as indicated in the original file, right? I started by doing that, but ran into trouble when I tried to get the links to go another level or two deeper... the example which you provided in the file only went one deep.
What the heck did I do? Leave it to me to take something super easy and make it complicated... :laugh:
No, the mod MAKES the drop down menu. Automatically. If you uploaded every file, turned on the ezpages_drop_menu.php sidebox in the admin (under Tools, Layout Boxes Controller), BAM the menu appears.
At first I thought you just wanted to add a single drop down to the drop down. But then I realized you were recreating the entire menu!
Also you are probably not using my version, as my version does not indicate to fill in any links. There's a version right after mine in the download section that says "Paul's version". His tpl_drop_menu.php gives you an example on HOW to add additional links if you should need them, but it STILL automatically creates the menu. I'm guessing you didn't turn the side box on.
Also, "Paul's Version", creates EACH category as a drop down menu, whereas mine has a lot of miscellaneous drop downs, with ONE drop down called "Categories" which then lists all the categories (you can see mine in action here - www.zencart137.jadetrue.com). BOTH options work, its just up to you which one you want to use. Also, Paul's version doesn't come with a support thread, so you are welcome to be here.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
Also you are probably not using my version, as my version does not indicate to fill in any links.
And there we have the problem.
Downloaded your version instead and everything auto-populated like a beautiful dream. Now just have to figure out why my header image is smushed, which I think I saw something about in another post.
Thanks again for dealing with me! It's so great that you maintain this support thread :yes:
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
threddies.com
And there we have the problem.
Downloaded your version instead and everything auto-populated like a beautiful dream. Now just have to figure out why my header image is smushed, which I think I saw something about in another post.
Thanks again for dealing with me! It's so great that you maintain this support thread :yes:
If you read the readme.txt file on installing my version, there is this section:
3. If you have heavily modified your includes/templates/YOUR_TEMPLATE/common/tpl_header.php, instead of uploading the tpl_header.php included in this download, you can simply add this to your header where you'd like the css menu to appear:
<!--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-->
That could be your problem with the logo. If you made any changes to your old tpl_header.php, you'll probably want to reload your old version, and simply paste the code above into the file. The best place to add it is right after:
<!--eof-optional categories tabs navigation display-->
-
Re: CSS Dropdown menu for your header- With Categories!
Got it looking lovely. Thanks so much for all of your help Jettrue - it is truly appreciated!!!
-
Re: CSS Dropdown menu for your header- With Categories!
Hello I am new to Zen but I love it, I'd sure like someone knowledgeable to help with a few things if possible. I have spent days reading threads and unfortunately the main thing that boggles my mindis trying to upload mass products and categories. i am currently getting some help from a friend that is having me create a db in access to import, but I know there has got to be an easier way and i cant seem to find or figure out easy populate. The reason I replied to this thread though is because I have installed the drop down menu and I truly loved it. But unfortunately I have changed my design idea and cannot use it for one of the carts i have installed it in and i cant seem to be able to disable it. If you could please help i would greatly appreciate it.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
donrisdesigns
Hello I am new to Zen but I love it, I'd sure like someone knowledgeable to help with a few things if possible. I have spent days reading threads and unfortunately the main thing that boggles my mindis trying to upload mass products and categories. i am currently getting some help from a friend that is having me create a db in access to import, but I know there has got to be an easier way and i cant seem to find or figure out easy populate. The reason I replied to this thread though is because I have installed the drop down menu and I truly loved it. But unfortunately I have changed my design idea and cannot use it for one of the carts i have installed it in and i cant seem to be able to disable it. If you could please help i would greatly appreciate it.
I PM'd you a response as well, but all you need to do is remove this from includes/templates/YOUR_TEMPLATE/common/tpl_header.php:
<!--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-->
-
Re: CSS Dropdown menu for your header- With Categories!
Hello all, great mod, I was wondering if I could get some help.
I have this mod currently installed on my site, and it seems to conflict with Hoverbox2. When I click on one of my products, the resulting window is obstructed slightly by the CSS menu - what I want is for the resulting image window to be in front of everything. You can have a look at: the chop haus DOT com
Also, there seems to be an extra little box with nothing in it at the right hand side of my CSS horizontal menu - any idea how to get rid of that? :cry:
Regards,
Matt
-
Re: CSS Dropdown menu for your header- With Categories!
I got the previous issue to work fine - I saw the solution buried in the posts here. Thanks!
The background of the menu still seems to extend a bit too far to the right, and even though I attempted to play with the CSS I still can't get it to look correct. Any suggestions are welcome.
Added a screen shot to illustrate:
http://www.thechophaus.com/images/toolong.gif
Regards,
Matt
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
noleafclover614
I got the previous issue to work fine - I saw the solution buried in the posts here. Thanks!
The background of the menu still seems to extend a bit too far to the right, and even though I attempted to play with the CSS I still can't get it to look correct. Any suggestions are welcome.
Added a screen shot to illustrate:
http://www.thechophaus.com/images/toolong.gif
Regards,
Matt
It's not actually an extra "button", its just left over space. This is also answered within the thread, do a thread search (use the "search this thread" button that is next to the thread tools button) for "percentage width s".
remove the space before the "s". (this way I can tell people to use that search string, without adding a result)
-
Re: CSS Dropdown menu for your header- With Categories!
Thanks so much, I was able to find the information and fix my problem. Thank you for maintaining this thread for so long, you are awesome man.
--Matt
-
Re: CSS Dropdown menu for your header- With Categories!
Hello again!
I got the issue sorted out in firefox, but in IE it looks rather strange now. Check out the pic...
http://www.thechophaus.com/images/ie_prob.JPG
Any thoughts?
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
noleafclover614
when you centered the menu, what percentage did you use? You can use the exact percentage, you have to round down a smidge so it doesn't break in IE
-
Re: CSS Dropdown menu for your header- With Categories!
Here, I have included the code from my CSS: ( I believe I used 16.667% )
Code:
body {
behavior: url(includes/csshover.htc);
}
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/
/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/
/*red */
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
#dropMenuWrapper {
width:100%;
height:2.17em;
margin:0;
font-size:1em;
}
div#dropMenu {
width:70em;
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;
width:16.667%;
}
div#dropMenu ul.level1 {
width:70em;
margin:0 auto;
text-align:center;
background:#4F4F4F;
height:2.17em;
z-index:1000;
}
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff; border-left:1px solid #ffffff;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
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:#4f4f4f;z-index:1000;left:0;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}
I tried to round down the 16.667% to 16, but when I do that, the extra space on the right shows up again (In IE and Firefox.) Thanks again for your quick reply.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
noleafclover614
Here, I have included the code from my CSS: ( I believe I used 16.667% )
Code:
body {
behavior: url(includes/csshover.htc);
}
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/
/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/
/*red */
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
#dropMenuWrapper {
width:100%;
height:2.17em;
margin:0;
font-size:1em;
}
div#dropMenu {
width:70em;
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;
width:16.667%;
}
div#dropMenu ul.level1 {
width:70em;
margin:0 auto;
text-align:center;
background:#4F4F4F;
height:2.17em;
z-index:1000;
}
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff; border-left:1px solid #ffffff;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
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:#4f4f4f;z-index:1000;left:0;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}
I tried to round down the 16.667% to 16, but when I do that, the extra space on the right shows up again (In IE and Firefox.) Thanks again for your quick reply.
Right, that's why I said round down a *smidge*. Try 16.66 or thereabouts
-
Re: CSS Dropdown menu for your header- With Categories!
Thanks for your input.
Im currently trying a bunch of variations of 16.667 (a bit lower and higher) and the problem still isn't fixing itself. :shocking:
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
noleafclover614
Thanks for your input.
Im currently trying a bunch of variations of 16.667 (a bit lower and higher) and the problem still isn't fixing itself. :shocking:
Well, you're going to have to make it low enough that the line doesn't break. So what I would make it as small as it can get without breaking, and get rid of the right line, so you can't tell that there is extra space leftover.
To do that, open up includes/templates/YOUR_TEMPLATe/common/tpl_drop_menu.php
and replace the entire shopping cart section with this:
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li class="submenu"><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
<ul class="level2">
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
</ul>
</li>
<?php } else { ?>
<li><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<?php } ?>
-
Re: CSS Dropdown menu for your header- With Categories!
Tried your suggestion, replaced the code, and now it seems to have shrunk the size of the leftover space to a very small gray sliver, but it's still visible :cry:
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
noleafclover614
Tried your suggestion, replaced the code, and now it seems to have shrunk the size of the leftover space to a very small gray sliver, but it's still visible :cry:
could I see a link to your site?
-
Re: CSS Dropdown menu for your header- With Categories!
Sure.
the chop haus DOT com
Also, as an aside, i had another question.
I don't know if this has been answered already, but when I make sub-categories within my Zen Cart Admin, specifically for the "Knives" section (originally titled Categories) it changes the category link to the site map for some reason.
You can see what I mean by checking out my site above. Thanks for all of your help.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
noleafclover614
Sure.
the chop haus DOT com
Also, as an aside, i had another question.
I don't know if this has been answered already, but when I make sub-categories within my Zen Cart Admin, specifically for the "Knives" section (originally titled Categories) it changes the category link to the site map for some reason.
You can see what I mean by checking out my site above. Thanks for all of your help.
Also, when I add subcategories, the drop down menu doesn't seem to include the top category when selecting the subcategory. For instance:
The hierarchy of the Sani-Safe Cooks knives should be:
Home :: Sani-Safe :: Cook's Knives
the chop haus DOT com /index.php?main_page=index&cPath=5_7
But when I click on Cook's Knives from the drop down menu, I just get
Home :: Cook's Knives
the chop haus DOT com /index.php?main_page=index&cPath=7
notice how it doesn't include Sani-Safe on the page. I can't seem to figure this out.
Let me thank you again for keeping up with my problems, I hate to keep nagging you but you are a great help and resource to me and a lot of others on this forum. Thanks so much.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
noleafclover614
Sure.
the chop haus DOT com
Also, as an aside, i had another question.
I don't know if this has been answered already, but when I make sub-categories within my Zen Cart Admin, specifically for the "Knives" section (originally titled Categories) it changes the category link to the site map for some reason.
You can see what I mean by checking out my site above. Thanks for all of your help.
OK, if you want to change the menu to percentages, one of the instructions was to change the 70em's to 100%. The 70em I think is what is causing your menu to split into two lines, and what is keeping you from using 16.667%. If you don't want your menu to go all the way across, you could use a smaller percentage, like 85%. But the two 70ems need to be changed in stylesheet_header_menu.css.
The category link would be the site map, whether or not you changed it to "Knives" because that is what it is set to in tpl_drop_menu.php. You'll see my "categories" button goes to the site map as well. This is because there is no default zen cart page that only lists categories, so instead I had it go to the site map.
So you can just change that manually:
Code:
<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a>
to
Code:
<li class="submenu"><a href="knives_link_here">Knives</a>
To fix the issue in your next post, follow these instructions:
http://www.zen-cart.com/forum/showth...ink#post391875
-
Re: CSS Dropdown menu for your header- With Categories!
hi, i'm new zenner, i have few question to ask.
1)how can i move my menu to center, now it's on the left.
2)how can i remove the home and login at the top header there?
3)how can i change the background color?
http://www.ninten-shop.com/
this is the link to my site.
-
Re: CSS Dropdown menu for your header- With Categories!
anyone can help me?:frusty:
-
Re: CSS Dropdown menu for your header- With Categories!
I just wanted to say thanks jettrue, you really helped me out. Thanks for taking time out of your day to sit with my issues and work them out with me.
--Noleafclover614 :clap:
-
Re: CSS Dropdown menu for your header- With Categories!
Ok Looked trough just about everything maybe I am not searching for the right terms.
www.mygirlshoes.com
I can't seem to get rid of the blue image that was behind the category tabs menu after installing this mod. (The one that is now in conflict with the header image. )
I tried toying around with css navcattab wrapper on the main css sheet...that gets rid of it but also causes the header image to disappear as well.
I guess since I am asking, I want all the text to be centered as opposed to the left alignment. Where would I look to make that happen?
Thanks ahead of time!
-Steve
-
Re: CSS Dropdown menu for your header- With Categories!
Never mind I re named a file in the template called link_cap_left, that seemed to do the trick!
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
stevensea
Ok Looked trough just about everything maybe I am not searching for the right terms.
www.mygirlshoes.com
I can't seem to get rid of the blue image that was behind the category tabs menu after installing this mod. (The one that is now in conflict with the header image. )
I tried toying around with css navcattab wrapper on the main css sheet...that gets rid of it but also causes the header image to disappear as well.
I guess since I am asking, I want all the text to be centered as opposed to the left alignment. Where would I look to make that happen?
Thanks ahead of time!
-Steve
Glad that worked out for ya!
If you want the menu spread out and centered, follow these instructions:
http://www.zen-cart.com/forum/showth...ths#post390897
-
Menu titles & Sub-titles are incorrect
Hi, I uploaded the module & figured out how to customized the stylesheet, but am having problems with the menu titles that i cannot solve on my own:
http://www.musecards.com/store/
I know that more than one file is involved in fixing this, but being very new to ZC, i just dont' know which and how.
I spent the last couple of hours looking through tutorials, your Read Me files as well as many of the posts, but now i'm cross-eyed and terribly confused.
Please help...
Thanks,
Alice
PS: Also, if you can tell me how to get rid of that last blank box on the bar, i'd be very grateful...
-
Re: Menu titles & Sub-titles are incorrect
Quote:
Originally Posted by
bluealice
Hi, I uploaded the module & figured out how to customized the stylesheet, but am having problems with the menu titles that i cannot solve on my own:
http://www.musecards.com/store/
I know that more than one file is involved in fixing this, but being very new to ZC, i just dont' know which and how.
I spent the last couple of hours looking through tutorials, your Read Me files as well as many of the posts, but now i'm cross-eyed and terribly confused.
Please help...
Thanks,
Alice
PS: Also, if you can tell me how to get rid of that last blank box on the bar, i'd be very grateful...
You didn't upload all the files. Check that all of the language files were uploaded and are in the correct spot.
Use these instructions to spread out the menu bar (its not a blank box, its simply leftover space)
http://www.zen-cart.com/forum/showth...ths#post390897
-
Re: CSS Dropdown menu for your header- With Categories!
Great--thanks. That was the problem exactly.
Also took care of the extra space using the inst. from the other post you sent.
Thanks a million, Alice
:smile:
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
bluealice
Great--thanks. That was the problem exactly.
Also took care of the extra space using the inst. from the other post you sent.
Thanks a million, Alice
:smile:
The menu was messed up in firefox, and there were some issues with your css. The stylesheet_header_menu.css below should work better:
Code:
body {
behavior: url(includes/csshover.htc);
}
/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D7DF92;}
/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/
/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#D7DF92;}
*/
/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D7DF92;}
*/
#dropMenuWrapper {
width:70%;
height:2.17em;
margin-left:20px;
margin-top:-30px;
font-size:.9em;
}
div#dropMenu {
width:100%;
margin-left:50px;
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;
width:16.667%;
}
div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#4F4F4F;
height:2.17em;
z-index:1000;
}
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
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:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
1. Open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php and remove the "class="submenu" from top-level items without sub items. So the contact us link would change to this:
<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
2. Add this to the header_menu css file:
div#dropMenu li.submenu li.submenu {background: none;}
OR, you could use the image attached to have arrows pointing right to designate further subcategories, with this css:
div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;}
Hi. I also want to do this but can't find the "header_menu css file. Where is it located? I'm using Cherry Zen template if that helps.
Also, how do you change the color behind the drop down menu from the horrible blue grey it is now that you can't read. I prefer the color from Apple Zen but can't figure out WHERE the color is listed.
Beth-katherine
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Beth-katherine
Hi. I also want to do this but can't find the "header_menu css file. Where is it located? I'm using Cherry Zen template if that helps.
Also, how do you change the color behind the drop down menu from the horrible blue grey it is now that you can't read. I prefer the color from Apple Zen but can't figure out WHERE the color is listed.
Beth-katherine
Are you using my css drop down menu from the downloads section, or the one with "Paul's edition" in the name? Because there's no "horrible blue grey" in my version.
stylesheet_header_menu.css should be in the css folder, with all the other css files. (includes/templates/your_template/css)
Also PLEASE include your link to your site whenever you ask a question... its no fun trying to search for it.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
Beth-katherine
Hi. I also want to do this but can't find the "header_menu css file. Where is it located? I'm using Cherry Zen template if that helps.
Also, how do you change the color behind the drop down menu from the horrible blue grey it is now that you can't read. I prefer the color from Apple Zen but can't figure out WHERE the color is listed.
Beth-katherine
You are talking about the Category drop down menu, the support thread for that is here:
This thread is for the CSS dropdown menu, which is not a dropdown select menu.
http://www.zen-cart.com/forum/showthread.php?t=62197
To change the background color of the select menu, look for a section like this in your css:
input:focus, select:focus, textarea:focus
change the background color there. By the way, I don't think it's very polite to call it a "horrible color", especially since I designed it that way, along with the template.
-
Rounded corners on the drop-down menu?
Hi, is it possible to place "end cap" images on each side of the CSS drop-down menu in order to create a "rounded" corners effect on the ends?
Like perhaps adding a cell on each end to hold a half-moon shaped .gif image?
-
Re: CSS Dropdown menu for your header- With Categories!
I installed the dropdown menu and it worked perfect.
But since I upgrade Internet Explorer 6 to Internet Explorer 7 I've a problem.
- ZenCart 1.3.7
- DropdownMenu 1.3
The dropdown menu works fine in Firefox and IE6
There is a problem with DropdownMenu in IE7:
The menu shows empty submenu's if you move your mouse over the menu and drop down some levels, then move your mouse out of the menu and back on the toplevel. I hope you understand this explanation.
Just to be clear I will try to make a Screenprint and post it.
I see this problem also on the apple zen example site and other site's that use the DropdownMenu.
Does anyone know how to fix this.
Thanx.
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
You are talking about the Category drop down menu, the support thread for that is here:
This thread is for the CSS dropdown menu, which is not a dropdown select menu.
http://www.zen-cart.com/forum/showthread.php?t=62197
To change the background color of the select menu, look for a section like this in your css:
input:focus, select:focus, textarea:focus
change the background color there. By the way, I don't think it's very polite to call it a "horrible color", especially since I designed it that way, along with the template.
So sorry to offend, was not my intention it's just after several hours of fruitless searching through the forum on how to change the color with no results my frustration came through my question.
Thank you for answering me, and as I said I do like the color of the css drop down on your Apple Zen - very easy to read. The blue is hard on older eyes.
Beth-Katherine
-
Re: CSS Dropdown menu for your header- With Categories!
Jettrue-
Is it possible to add a time-delay to the menu?
For example, our store has many sub-categories and sometimes it is frustrating if the mouse "slides" accidentally off one, to start over branching from the top level.
A 2-second or so delay before the menu resets would solve this.
Is this possible?
Thank you for your time -
Benjamin
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
abebakker
I installed the dropdown menu and it worked perfect.
But since I upgrade Internet Explorer 6 to Internet Explorer 7 I've a problem.
- ZenCart 1.3.7
- DropdownMenu 1.3
The dropdown menu works fine in Firefox and IE6
There is a problem with DropdownMenu in IE7:
The menu shows empty submenu's if you move your mouse over the menu and drop down some levels, then move your mouse out of the menu and back on the toplevel. I hope you understand this explanation.
Just to be clear I will try to make a Screenprint and post it.
I see this problem also on the apple zen example site and other site's that use the DropdownMenu.
Does anyone know how to fix this.
Thanx.
This is a known issue, and I haven't been able to find a resolution to it. So you have to decide whether or not you can live with the issue. Sorry!
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
bdekraker
Jettrue-
Is it possible to add a time-delay to the menu?
For example, our store has many sub-categories and sometimes it is frustrating if the mouse "slides" accidentally off one, to start over branching from the top level.
A 2-second or so delay before the menu resets would solve this.
Is this possible?
Thank you for your time -
Benjamin
Nope, that would have to be done with a javascript menu; this one is css only. :cool:
-
Re: CSS Dropdown menu for your header- With Categories!
Quote:
Originally Posted by
jettrue
This is a known issue, and I haven't been able to find a resolution to it. So you have to decide whether or not you can live with the issue. Sorry!
Thanx for the fast reaction. Then I have to live with it.
-
Re: CSS Dropdown menu in IE6
Jettrue,
I thought I had this nice menu all worked out, aside from playing with the spacing and widths for different browsers, but then I tried it with IE 5.5 and IE6 and the drop downs do NOT work at all. Only the level 1 menu is active.
I know that IE6 and earlier do not support the :hover pseudo class and I suspect that this is the problem. I don't think I want to start rewriting the code to include the Suckerfish javascript. What do you think?
Latest W3Schools stats say that IE6 is about 50% of the browsers. Yikes!
Maury
-
Re: CSS Dropdown menu in IE6
Quote:
Originally Posted by
mauryg
Jettrue,
I thought I had this nice menu all worked out, aside from playing with the spacing and widths for different browsers, but then I tried it with IE 5.5 and IE6 and the drop downs do NOT work at all. Only the level 1 menu is active.
I know that IE6 and earlier do not support the :hover pseudo class and I suspect that this is the problem. I don't think I want to start rewriting the code to include the Suckerfish javascript. What do you think?
Latest W3Schools stats say that IE6 is about 50% of the browsers. Yikes!
Maury
Did you upload includes/csshover.htc? Did you make your additions to .htaccess? I didn't create a menu that wouldn't work in ie6. :smile:
-
Re: CSS Dropdown menu in IE6
The answers to your questions are yes, yes and yes.
I did read the readme...
I added the csshover.htc file to the root/includes/ directory...
I added the lines to .htaccess in the root/includes/ directory...
Since I have IE7 installed as my IE browser, I am running separate "standalone" copies of IE6 and IE5.5 (www.tredosoft.com), but I don't think this is the cause of the problem. I felt sure you had tested the menu in IE6 and I just don't understand what happened. I am using "CSS Flyout Header for Zen Cart 1.3.* v1.2". :frusty:
I will PM you a link to the website since it is not open to the public yet.
As always, thanks for your help and the rapid response.
Maury
-
Re: CSS Dropdown menu in IE6
Quote:
Originally Posted by
mauryg
The answers to your questions are yes, yes and yes.
I did read the readme...
I added the csshover.htc file to the root/includes/ directory...
I added the lines to .htaccess in the root/includes/ directory...
Since I have IE7 installed as my IE browser, I am running separate "standalone" copies of IE6 and IE5.5 (
www.tredosoft.com), but I don't think this is the cause of the problem. I felt sure you had tested the menu in IE6 and I just don't understand what happened. I am using "CSS Flyout Header for Zen Cart 1.3.* v1.2". :frusty:
I will PM you a link to the website since it is not open to the public yet.
As always, thanks for your help and the rapid response.
Maury
You removed this from your stylesheet_header_menu.css:
body {
behavior: url(includes/csshover.htc);
}
You're menu also wraps onto two lines in Firefox, you may want to increase the width from 55 em a bit.
-
Re: CSS Dropdown menu in IE6
:oops:
As usual your reply was timely and spot on. I have no idea how or why I removed those lines from the CSS file. Thanks.
I still need to play with the widths. I'm seeing some funny results, especially if the user changes the font size using CNTL+ or CNTL-.
Maury
-
Re: CSS Dropdown menu in IE6
Quote:
Originally Posted by
mauryg
:oops:
As usual your reply was timely and spot on. I have no idea how or why I removed those lines from the CSS file. Thanks.
I still need to play with the widths. I'm seeing some funny results, especially if the user changes the font size using CNTL+ or CNTL-.
Maury
I sent you a pm with some suggestions for css adjustments.
