CSS Dropdown menu for the header- With Categories!

[jettrue]

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:
<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>

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

<li><a href="zencartpagelinkhere">Reviews</a></li>

<li><a href="zencartpagelinkhere">Currencies</a></li>

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

[loudervisions]

THX so much Jade.

Your a gift to this forum.

RPBelcher
LOUDERvisions.com

[newagekat]

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.

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.

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.

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

Thank you for your time.

[jettrue]

Hi Jade True

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

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.

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.

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.

[newagekat]

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?

[jettrue]

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);
}

[newagekat]

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?

[jettrue]

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?

[newagekat]

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

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.

[newagekat]

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.