CSS Dropdown menu for the header- With Categories!

[1kell]

...I installed a css drop down menu ages ago, its modified so that it dynamically generates the categories across the main top line, and subcategories/products drop down in a box when scrolled over. In modifying my website would like to add images to the top line when that dropdown category is selected, plus set of images to form a box around the dropdown category (one top image, one bottom image, and an image separating each li item), lastly an arrow on the side of submenus to the next submenu.

I have the pics ready and its all working on another javascript menu, but am trying to apply the same to my css menu. This is my current css code:

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

#dropMenuWrapper {
	width:100%;
	height:25px;
	margin:0;
	font-size:12px;
	}
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;
	}
div#dropMenu ul.level1 {
	width:75%; 
	margin:0 auto; 
	text-align:center;
	background:#ffffff;
	border-top:0px solid #ffffff;
	border-bottom: 0px solid #ffffff;
	height:25px;
	z-index:1000;
	}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; color:#400000; text-align:center; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {background-image:url('images/hr.gif');
  background-repeat: repeat-x;
  background-position: left bottom; width:13em;}
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: 2.17em; background:#ffffff;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#ffffff}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: #400000; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#eb2e83;}

The image I would like to appear behind the top selected category is "item1.png",
The image I would like to appear at the top of the dropdown category box is "submenu-top.gif"
The image for the bottom of the dropdown category box is "submenu-bottom.gif"
The image to go in between submenu items is "hr.gif"
The arrow to go next to submenu items which have further subcategories is "arrow.gif"

How/where do I put those images in?

[hockey2112]

...I installed a css drop down menu ages ago, its modified so that it dynamically generates the categories across the main top line, and subcategories/products drop down in a box when scrolled over. In modifying my website would like to add images to the top line when that dropdown category is selected, plus set of images to form a box around the dropdown category (one top image, one bottom image, and an image separating each li item), lastly an arrow on the side of submenus to the next submenu.

I have the pics ready and its all working on another javascript menu, but am trying to apply the same to my css menu. This is my current css code:

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

#dropMenuWrapper {
	width:100%;
	height:25px;
	margin:0;
	font-size:12px;
	}
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;
	}
div#dropMenu ul.level1 {
	width:75%; 
	margin:0 auto; 
	text-align:center;
	background:#ffffff;
	border-top:0px solid #ffffff;
	border-bottom: 0px solid #ffffff;
	height:25px;
	z-index:1000;
	}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; color:#400000; text-align:center; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {background-image:url('images/hr.gif');
  background-repeat: repeat-x;
  background-position: left bottom; width:13em;}
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: 2.17em; background:#ffffff;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#ffffff}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: #400000; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#eb2e83;}

The image I would like to appear behind the top selected category is "item1.png",
The image I would like to appear at the top of the dropdown category box is "submenu-top.gif"
The image for the bottom of the dropdown category box is "submenu-bottom.gif"
The image to go in between submenu items is "hr.gif"
The arrow to go next to submenu items which have further subcategories is "arrow.gif"

How/where do I put those images in?

I'm not quite sure how to accomplish what you want to do, but I would like to take a look at your website to see your drop-down and also try to figure out this issue for you.

Which add-on are you using that allows such a drop-down system? It is exactly what I need (categories across the top, subcats underneath those in a drop-down, and products under the subcats in a secondary drop-down).

[DivaVocals]

Not to be the detail police or anything, but neither of these posts seem to be related to support for the Horizontal CSS Drop Down Menu with Categories add-on at all.. (just sayin')

1kell - Based on your post are you using the Horizontal CSS Drop Down Menu with Categories add-on or is this a different menu?? If it is a different menu, you might get more assistance re-posting your question in the CSS forum.

hockey2112 - What you want is possible with this menu with some modifications to grab the product information. However, to my knowledge there aren't any posts in this thread which outline how to make such a change to the Horizontal CSS Drop Down Menu with Categories add-on. You might wanna try searching this thread to see if this is indeed the case..

...I installed a css drop down menu ages ago, its modified so that it dynamically generates the categories across the main top line, and subcategories/products drop down in a box when scrolled over. In modifying my website would like to add images to the top line when that dropdown category is selected, plus set of images to form a box around the dropdown category (one top image, one bottom image, and an image separating each li item), lastly an arrow on the side of submenus to the next submenu.

I have the pics ready and its all working on another javascript menu, but am trying to apply the same to my css menu. This is my current css code:

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

#dropMenuWrapper {
    width:100%;
    height:25px;
    margin:0;
    font-size:12px;
    }
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;
    }
div#dropMenu ul.level1 {
    width:75%; 
    margin:0 auto; 
    text-align:center;
    background:#ffffff;
    border-top:0px solid #ffffff;
    border-bottom: 0px solid #ffffff;
    height:25px;
    z-index:1000;
    }
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; color:#400000; text-align:center; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {background-image:url('images/hr.gif');
  background-repeat: repeat-x;
  background-position: left bottom; width:13em;}
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: 2.17em; background:#ffffff;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#ffffff}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: #400000; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#eb2e83;}

The image I would like to appear behind the top selected category is "item1.png",
The image I would like to appear at the top of the dropdown category box is "submenu-top.gif"
The image for the bottom of the dropdown category box is "submenu-bottom.gif"
The image to go in between submenu items is "hr.gif"
The arrow to go next to submenu items which have further subcategories is "arrow.gif"

How/where do I put those images in?

I'm not quite sure how to accomplish what you want to do, but I would like to take a look at your website to see your drop-down and also try to figure out this issue for you.

Which add-on are you using that allows such a drop-down system? It is exactly what I need (categories across the top, subcats underneath those in a drop-down, and products under the subcats in a secondary drop-down).

[hockey2112]

hockey2112 - What you want is possible with this menu with some modifications to grab the product information. However, to my knowledge there aren't any posts in this thread which outline how to make such a change to the Horizontal CSS Drop Down Menu with Categories add-on. You might wanna try searching this thread to see if this is indeed the case..

I did search through this thread and I was unable to find a solution. Do you have any input on how it can be accomplished? I feel like it would be a fairly simple change to the code; I just have not been able to figure it out. Thanks!

[DivaVocals]

I did search through this thread and I was unable to find a solution. Do you have any input on how it can be accomplished? I feel like it would be a fairly simple change to the code; I just have not been able to figure it out. Thanks!

As I said, I don't think anyone has ever posted a solution in this thread to make the change you are seeking.. If I had an inkling how to execute this, I would have been happy to share the solution..

Absent anyone posting a solution to give you what you are looking to do with this mod perhaps you might want to look at the "Category Tab Simple Dropdown Menu". Seems you are only interested in the categories as a dropdown menu, and the "Category Tab Simple Dropdown Menu" is more suited for that specific type of menu.

[hockey2112]

As I said, I don't think anyone has ever posted a solution in this thread to make the change you are seeking.. If I had an inkling how to execute this, I would have been happy to share the solution..

Absent anyone posting a solution to give you what you are looking to do with this mod perhaps you might want to look at the "Category Tab Simple Dropdown Menu". Seems you are only interested in the categories as a dropdown menu, and the "Category Tab Simple Dropdown Menu" is more suited for that specific type of menu.

I know that no-one had posted a solution to the change I was seeking. That's why I asked if anyone could/would develop a solution for it to add to this add-on. I don't understand where you are coming from; isn't the point of a message board thread to discuss the items in question and ask about different ways to modify or use them? If you never ask, the solution might never be developed. ;)

In any case, I tried the Category Tab Simple Dropdown Menu, and it works ok. The main issue is that it is working on two of my categories, but not on the other ones, even though they are all "just categories". I posted in that thread, asking if they could provide a solution.

Meanwhile, my request for help in adding the products to this add-on's drop-down lists still stands, in case anyone has any ideas.

By the way, the website in question is http://tinyurl.com/39h2ran

[DivaVocals]

isn't the point of a message board thread to discuss the items in question and ask about different ways to modify or use them?

You betcha!! However, it doesn't appear that anyone reading or posting here has an answer for you at the moment.. So perhaps it's time to consider alternative solutions (one of which I posted) or giving some thought to paying a devloper to add this functionality..

That's why I asked if anyone could/would develop a solution for it to add to this add-on. I don't understand where you are coming from

If you never ask, the solution might never be developed. ;)

Sure nothing wrong with asking, but if no solution is posted, or no one VOLUNTEERS to build it (I presume you would like this done for FREE), and/or you are not interested in seeking commercial options for getting the changes you are seeking, why keep asking the same question over and over again??

Meanwhile, my request for help in adding the products to this add-on's drop-down lists still stands, in case anyone has any ideas.

If you are willing to pay for this development you should post your request in the commercial help forum..

[johncrr]

Is it possible to toggle Login/Logoff on the menu ?

Thanks, John

[Get Em Fast]

Is it possible to toggle Login/Logoff on the menu ?

Thanks, John

There's no "on/off" switch, but the file can be edited to NOT display it;

Just look in includes/templates/CUSTOM/common/tpl_drop_menu.php at around lines 100-111. You can either comment them out or delete them totally. Either way the menu will not display those links.

That section of code mentioned above should look exactly like this:

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

Hope this helps.
Robert

[milobloom]

I have this mod installed on my web site

www.allforyourwedding.com


I have a question. I have way to many categories. Is there any way they can be automatically set to say go 10 down and then a new column.
Or could someone tell me a better way I can handle this? My only last thought would to just have a button called "Categories" that someone would click and it gives them them in the center...