Tabbed Dynamenu

[angryquaker]

I'm trying to get the "Dynamenu" add-on (as a horizontal drop-down) working with background images, which I can do. BUT, in order to display a "tab" graphic properly to acommodate different length category names, different size tabs are required. So, I looked around and found this method of doing it:

 

Strictly CSS Article

 

Looks great on their site, however, I only seem to be able to get one side of my tabs to display and work properly on mouse-over, not both. I've spent several hours tinkering with the CSS and other code to no avail. At one point, I had both parts of the tab showing up, but the right side wouldn't change on mouse-over. As I type this message, only the right side of the tab is being displayed, and it's behaving properly. I'll probably continue to mess with it, so if you do look at the site, you'll likely see some instance of how it's not working right. I'm hoping that someone who knows what they're doing might be able to look at the CSS, the source on the index page, and tell me where I'm going wrong.

 

CSS for the menu:

/*-------------------------------------*/
/*   Horizontal Drop-Down Menu Style   */
/*-------------------------------------*/

.horbar	{   /* Color of main horizontal menubar and border */
color: ffffff;
border: 0px solid #009933;
}

.horizitem	{		  /* Behaviour of main horizontal menu items, leave as is for proper operation */
float: left;
white-space: no-wrap;
}

.horizitem a {			  /* Font style, size of submenu items */
 font-family: Verdana, Arial, sans-serif;
padding: 7px 0 6px 10px; 
background: url(tab_menu_left.png) no-repeat left top;
font-size: 13px;	
text-align: center;
font-weight: bold;
position: relative;	
display: inline;	
}

.horizitem a:link, .horizitem  a:visited 	{	  /* Font style & color of main menu items */
padding: 7px 0 6px 10px; 
background: url(tab_menu_left.png) no-repeat left top;
color: #009933;
border: 0px solid #000000;
text-align: center;
font-weight: bold;
display: inline;
}

.horizitem a:hover	{	   /* Font style & color, background menu color of main menu item when hovered over */
background: url(tab_menu_left.png) no-repeat left bottom; 
color: #000000;
border: 0px solid #009933;
text-decoration: none;
font-weight: bold;
display: inline;
}

.horizitem a:active	{	   /* Font style & color, background menu color of main menu item when clicked */
background: url(tab_menu_left.png) no-repeat left bottom; 
color: #ff0000;
border: 0px solid #00FF00;
text-align: center;
font-weight: bold;
display: inline;
}


.horizitem  span	a:link, .horizitem  span a:visited {	   /* Rollover effect using "Fast rollovers without preload" concept for the right part of the tab */
padding: 7px 10px 6px 0;
background: url(tab_menu_right.png) no-repeat right top;
position: relative;	
}

.horizitem  span  a:hover	 {  /* Rollover effect using "Fast rollovers without preload" concept for the right part of the tab */
background: url(tab_menu_right.png) no-repeat right bottom; 
position: relative;
}

/* some sub-menu code removed for brevity */

.dmselected {   /* Style override for selected category tree */
background-color: #ffffff;
	font-weight: bold;
}

.horbar .dmselected {   /* Style override for selected root category */
background-color: #ffffff;
}

/* end horizontal menu */

 

It's the ".horizitem" class that controls the main "tabs," and which is giving me a headache. The ".horizitem span..." parts are what I added to match the example from Strictly CSS. Seems like a slick way of doing the mouse-over effect without using Javascript, if I could just make it work. I've no idea if I need to have all those "position: relative;" and "display: inline;" statements in there, I've just been trying various things to make it work, and nothing I've done thus far has corrected the situation. To my limited knowledge and weary eye, it seems like I've tried just about every different combination of adding this or that, taking away, and so forth, but I'm basically flying blind with a very limited understanding of CSS.

 

To see how it's behaving on the page, go to

 

My Website

 

I'm hoping it's something simple that I'm missing, simple to someone who understands this sort of thing, anyway.

 

Namasté,

Russ

[angryquaker]

Anyone? I'm dyin' ovah heah...

 

Namasté,

Russ

[angryquaker]

Dang it.

 

Well, if not a fix for this problem, does anyone have suggestions for some other non-js tabbed horizontal menu(s)? At this point, I can quite confidently use the CSS to just make nice colored boxes that change on mouseover and for the selected link. I can also implement a graphic, like 2px wide, repeat-x, for a gradient effect, but I'd rather keep the "tabbed" look, with the nice rounded corners up top. Oh, and I know the colors are off on what I have up on the site right now. I threw that graphic together in about 5-10 min, thinking it wouldn't take 3 days to get working, and planned on fixing up the graphic once I got the menu working properly. Story of my life, since I met osC. LOL ;)

 

Namasté,

Russ

[bkellum]

Dang it.

 

Well, if not a fix for this problem, does anyone have suggestions for some other non-js tabbed horizontal menu(s)? At this point, I can quite confidently use the CSS to just make nice colored boxes that change on mouseover and for the selected link. I can also implement a graphic, like 2px wide, repeat-x, for a gradient effect, but I'd rather keep the "tabbed" look, with the nice rounded corners up top. Oh, and I know the colors are off on what I have up on the site right now. I threw that graphic together in about 5-10 min, thinking it wouldn't take 3 days to get working, and planned on fixing up the graphic once I got the menu working properly. Story of my life, since I met osC. LOL ;)

 

Namasté,

Russ

 

Have you tried looking in the Dynamenu support thread?

A forum thread has been started here:

http://www.oscommerce.com/forums/index.php?showtopic=209045

[angryquaker]

Thanks for popping in, Bill. I did check the Dynamenu thread a couple nights ago, the only talk in there regarding tabs is about conflicts with the Tabbed Product Info add-on. Perhaps I will post there, too, it just seems like that thread isn't really lively anymore. Lots of recent questions, not many recent answers, tho. So my last couple posts have been here in General, where there are more eyeballs. But I do generally try to search the forums very thoroughly before posting, sometimes you win, sometimes not so much. Thanks again, brother.

 

Namasté,

Russ