CSS Dropdown menu for the header- With Categories!

loudervisions:

Jettrue,

Could you give me a clue how to add REVIEWS and CURRENCIES to the drop down.. I read the reply you gave me but not sure how to add the links..

Any further help will be appreciated.

RPBelcher
LOUDERvisions
Open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php.

If you're talking about adding it as another menu item, see how contact us is coded, like this:

But you don't have to use the zen cart coding to make a link, just make it your link instead, like this:

Decide where you want the links to show up, and put them there. If you want them to show up after shopping cart, they'd go after this:

        <li><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
        <?php } ?>

THX so much Jade.

Your a gift to this forum.

RPBelcher
LOUDERvisions.com

jettrue:

Re-read the readme.txt, and be sure you've followed the instructions for the .htaccess, and for the csshover.htc file, and make sure they are both uploaded in the correct spots. csshover.htc should be in the includes/ folder.

Hi Jade True

Thank you for this fine mod. It sure adds a bit of class to standard ZC. :clap:

I'm using v1.3.8a and have customized the site a great deal. I'm at the end of my project so I'm checking IE to make certain it behaves. on IE 6, the menu is vertical with each row spanning the width of the site. :shocking:

I have added the extra rule to .htacess in root including the mime type, and I have uploaded csshover.htc to the includes folder. Still the problem persists. I have checked the CSS and it runs along the same line as mine usually does. I simply cannot identify the problem.:dontgetit

Would you mind taking a quick peek and letting me know if you get inspired?

Thank you for your time.

newagekat:

Hi Jade True

Thank you for this fine mod. It sure adds a bit of class to standard ZC. :clap:

I'm using v1.3.8a and have customized the site a great deal. I'm at the end of my project so I'm checking IE to make certain it behaves. on IE 6, the menu is vertical with each row spanning the width of the site. :shocking:

I have added the extra rule to .htacess in root including the mime type, and I have uploaded csshover.htc to the includes folder. Still the problem persists. I have checked the CSS and it runs along the same line as mine usually does. I simply cannot identify the problem.:dontgetit

Would you mind taking a quick peek and letting me know if you get inspired?

Thank you for your time.
Does this happen at http://www.applezen.sagefish.com?

Does it happen if you upload the original stylesheet_header_menu.css?

If not, reupload the original, and make your changes little by little.

jettrue:

Does this happen at http://www.applezen.sagefish.com?

Does it happen if you upload the original stylesheet_header_menu.css?

If not, reupload the original, and make your changes little by little.

Thanks for the response Jettrue

ok I re-uploaded the original stylesheet_header_menu.css. it is showing horizontally in IE6, but none of the drop-down are working.

I'm testing with IE6 on Windows XP any ideas?

newagekat:

Thanks for the response Jettrue

ok I re-uploaded the original stylesheet_header_menu.css. it is showing horizontally in IE6, but none of the drop-down are working.

I'm testing with IE6 on Windows XP any ideas?

When you uploaded the original, did it have this at the top of the file?

body {
behavior: url(includes/csshover.htc);
}

jettrue:

When you uploaded the original, did it have this at the top of the file?

body {
behavior: url(includes/csshover.htc);
}

Yes, i never removed that on your original or my modified file.

i'm having to change the z-index from 1000 975 so that the logo lies over the menu. would this cause a problem?

newagekat:

Yes, i never removed that on your original or my modified file.

i'm having to change the z-index from 1000 975 so that the logo lies over the menu. would this cause a problem?
Does it happen if you change that back?

What do you have your site defined as in includes/configure.php

with the www or without?

jettrue:

Does it happen if you change that back?

What do you have your site defined as in includes/configure.php

with the www or without?

.htacces reads:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.yoursite.com$ [NC]
RewriteRule ^(.*)$ http://yoursite.com/$1 [R=301,L]

includes/configure.php reads
define('HTTP_SERVER', 'http://bisousbaby.com');
define('HTTPS_SERVER', 'https://bisousbaby.com');

I'm going to continue making the changes slowly, but I may have to wait until tomorrow. You have to understand, I work on a MAC and have to borrow my sister's PC to view site - so a lot of back and forth and, yes, begging is involved :lookaroun

if you can think of something, would you mind continuing this conversation via chat or something, tomorrow morning? I'm on Pacific time. I can be logged in at 8:30 am. I can send a PM and let you know my Dkype or AIM handle.

I don't mean to impose and I do appreciate your help. you're one of the few still providing support for your mod.

jettrue:

for the sake of expediency, i am pasting my code for the stylesheet. section in red were added:

body { behavior: url(includes/csshover.htc); }

/green/
div#dropMenu li.submenu li.submenu:hover, div#dropMenu li.submenu a:hover
{
color: #ffffff !important;
background: #E0949E;
}

/*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;}
*/

div#dropMenu
{
width: 100%;
height: 40px;
margin: 0 auto;
text-align: left;
z-index: 975;
position: relative;
background: url(/includes/templates/babyboy/images/ribbonPink.jpg) repeat-x left bottom;
font-size: 0.9em;
}

div#dropMenu ul
{
margin: 0;
padding: 0;
}

div#dropMenu li
{
list-style: none;
margin: 0;
float: left;
line-height: 1.5em;
/* width:16.667%;
*width:16.649%; */
}

div#dropMenu ul.level1
{
width: 100%;
margin: 0 auto;
text-align: left;
background: #6B5F5A;
/*background color of top menu when NOT selected. */
z-index: 975;
float: left;
}

div#dropMenu ul.level1 li a
{
display: block;
/* Hides from IE5-mac */
height: 1%;
/* End hide from IE5-mac */
padding: .6em 1.1em;
text-decoration: none;
text-transform: uppercase;
color: #E4D7D2;
text-align: left;
font-weight: bold;
}

div#dropMenu li:hover
{
color: white;
background-color: #E0949E;
}

/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover
{
color: white;
background-color: #E0949E;
}

div#dropMenu li a.noLine { border: none; }

div#dropMenu>ul a
{
width: auto;
z-index: 975;
}

div#dropMenu ul ul
{
display: none;
background-color: #ffffff;
border: 1px dotted #E1959F;
}

div#dropMenu ul ul li
{
width: 15em;
z-index: 975;
}

/*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,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8
{
position: absolute;
width: 15em;
display: block;
z-index: 975;
}

div#dropMenu ul.level2
{
background-color: #ffffff;
z-index: 975;
position: absolute;
left: 0;
color: #D66E7B;
}

div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8
{
top: 0;
left: 15em;
background: #ffffff;
border: 1px solid #E1959F;
}

div#dropMenu ul.level2 li a
{
padding: 0.5em 1.25em;
color: #D66E7B;
background-color: transparent;
text-transform: none;
font-weight: normal;
border-bottom: 1px dotted #F3D5D8;
}

/* this is text color on drop-down submenu */
div#dropMenu ul.level2 li a:hover
{
color: #D66E7B!important;
background-color: #F3D5D8;
}

ul.level2 li:hover
{
color: white;
background-color: #E0949E;
}

.clearBoth
{
clear: both;
height: 0;
font-size: 0;
line-height: 0;
}
I've been staring at this for a while. maybe a fresh pair of eyes would be useful.

thanks again.

newagekat:

.htacces reads:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.yoursite.com$ [NC]
RewriteRule ^(.*)$ http://yoursite.com/$1 [R=301,L]
You didn't actually leave the above as "yoursite.com", right?

I bet if you go to http://bisousbaby.com the menu works, but not if you go to http://www.bisousbaby.com

Fix the .htaccess, and it should force http://bisousbaby.com, then it will work.

jettrue:

You didn't actually leave the above as "yoursite.com", right?

I bet if you go to http://bisousbaby.com the menu works, but not if you go to http://www.bisousbaby.com

Fix the .htaccess, and it should force http://bisousbaby.com, then it will work.

sorry must have pasted the lines from the readme. Yes, I did check and I did change yoursite.com to the correct domain.

Ok so I figured out the issue was the width in div#dropMenu li is required for IE6 but not for Firefox or IE7. here is my stylesheet if it can relieve someone's headache. NOTE, my template contaains conditional IE divs.

body { behavior: url(includes/csshover.htc); }

/brown/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover
{
color: #4f4f4f!important;
background: #E0949E;
}

div#dropMenu
{
width: 100%;
height: 40px;
margin: 0 auto;
text-align: left;
z-index: 975;
background: url(/includes/templates/babyboy/images/ribbonPink.jpg) repeat-x left bottom;
position: relative;
font-size: 0.9em;
}

div#ie6only div#dropMenu { height: 53px; }

div#dropMenu ul
{
margin: 0;
padding: 0;
}

div#dropMenu li
{
position: relative;
list-style: none;
margin: 0;
float: left;
line-height: 1em;
}

div#ie6only div#dropMenu li
{
width: 11.167%;
*width: 11.149%;
}

div#dropMenu ul.level1
{
width: 100%;
margin: 0 auto;
text-align: left;
background: #6B5F5A;
/*background color of top menu when NOT selected. */
z-index: 975;
float: left;
}

div#dropMenu li a
{
display: block;
/* Hides from IE5-mac */
height: 1%;
/* End hide from IE5-mac */
padding: .7em 1em;
text-decoration: none;
text-transform: uppercase;
color: #E4D7D2;
font-weight: bold;
text-align: left;
}

div#ie6only div#dropMenu li a { height: 23px; }

div#dropMenu li:hover
{
color: white;
background-color: #E0949E;
}

/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover
{
color: white;
background-color: #E0949E;
}

div#dropMenu li a.noLine { border: none; }

div#dropMenu>ul a
{
width: auto;
z-index: 975;
}

div#dropMenu ul ul
{
display: none;
background-color: #ffffff;
border: 1px dotted #E1959F;
}

div#dropMenu ul ul li
{
width: 15em;
z-index: 975;
}

div#ie6only div#dropMenu ul ul li { width: 18em; }

/*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,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8
{
position: absolute;
width: 15em;
display: block;
z-index: 975;
}

div#dropMenu ul.level2
{
background: #FFFFFF;
z-index: 975;
position: absolute;
left: 0;
color: #D66E7B;
}

div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8
{
top: 0;
left: 15em;
background: #FFFFFF;
border: 1px solid #E1959F;
}

div#dropMenu ul.level2 a
{
padding: 0.5em 1.25em;
color: #D66E7B;
font-weight: normal;
background-color: transparent;
text-transform: none;
border-bottom: 1px dotted #F3D5D8;
}

/* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover
{
color: #D66E7B!important;
background-color: #F3D5D8;
}

.clearBoth
{
clear: both;
height: 0;
font-size: 0;
line-height: 0;
}

I have an issue in Firefox 3.06 on my development site. When logged in, the dropdown options below My Account write over top of one another.

My Account/Checkout are the ones. I removed the My Account submenu since it's redundant, and it just bumped the issue down to the next one in the stack.

It only happens after a user has logged on, so I've provided a printscreen.

Thanks in advance if you can help!

Gday
Have just installed CSS dropdown mod.

It works fine in FF but when viewing in IE7 the dropdown menu doesn't display on top layer and displays behind description page.

http://901.com.au/index.php test site to see in action (View in IE 7)

Any help greatly appreciated...

Hey jettrue, I've another question for you.

I've been breaking my head trying to figure out who wrote that flyout menu addon, and I kept searching flyout and getting another one.

Now, my memory has finally come back to me, I remember reading this thread when I was configuring the menu.

I've moved servers, and it doesn't work as-is. I always expect things to break, so the old site is still running, I haven't switched the DNS over yet.

The new static address is 77.68.43.14 and as you can see, the menu is not working.

I am hoping that you can take one look at it and go "Oh! Of course, that's just the #### that needs to be #####."

Otherwise, I'm looking at remodifying the classic template into http://store.persite.com - most of which I cannot remember how I did.

So yea, lemme know if you know what's the issue. It definitely only seems to happen if I put the header_tpl files into place.

-Tim

freeohio:

I have an issue in Firefox 3.06 on my development site. When logged in, the dropdown options below My Account write over top of one another.

I found the problem - it may have been documented earlier. The bolded tag used to be level2.

			       <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="level3">**
			       <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 } ?>

yelow:

Hey jettrue, I've another question for you.

I've been breaking my head trying to figure out who wrote that flyout menu addon, and I kept searching flyout and getting another one.

Now, my memory has finally come back to me, I remember reading this thread when I was configuring the menu.

I've moved servers, and it doesn't work as-is. I always expect things to break, so the old site is still running, I haven't switched the DNS over yet.

The new static address is 77.68.43.14 and as you can see, the menu is not working.

I am hoping that you can take one look at it and go "Oh! Of course, that's just the #### that needs to be #####."

Otherwise, I'm looking at remodifying the classic template into http://store.persite.com - most of which I cannot remember how I did.

So yea, lemme know if you know what's the issue. It definitely only seems to happen if I put the header_tpl files into place.

-Tim
It's working for me in Camino and Firefox. Where is it not working for you? If its only in IE6, did you follow the .htaccess instructions?

cougar:

Gday
Have just installed CSS dropdown mod.

It works fine in FF but when viewing in IE7 the dropdown menu doesn't display on top layer and displays behind description page.

http://901.com.au/index.php test site to see in action (View in IE 7)

Any help greatly appreciated...

Have you tried giving the menu a higher z-index than the content?

jettrue:

Have you tried giving the menu a higher z-index than the content?

Gday jettrue

Thanks for the response, could you point in the right direction where this might be done...

Cheers

I've decided to go another direction in my site design. How do I properly uninstall this mod. Directions were not included in the readme.txt