implementing glossy horizontal menu to joomla

[papak69]

is there anyone who is skillful enough and also knows Joomla! CMS to implement the DD glossy horizontal menu (http://www.dynamicdrive.com/style/cs...rizontal_menu/)
into the Joomla template_css.css file (or maybe even some hardcoding has to be done).

I've tried myself, however I am not an advanced css or joomla (ab)user.

Below is my poor attempt at trying, however I cannot get the right background to show.

div#glossymenu
{
/* position: relative; */
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(../images/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}

ul#mainlevel-nav li
{
float:left;
}

ul#mainlevel-nav li a
{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

ul#mainlevel-nav li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

#mainlevel-nav li a#active_menu-nav, ul#mainlevel-nav li a:hover{
color: #fff;
background: url(../images/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

#mainlevel-nav li a#active_menu-nav b, #mainlevel-nav li a:hover a b{
color: #fff;
background: url(../images/menur_hover_right.gif) no-repeat;
background-position: right top; /*right tab image path*/
}

I beg for your assistance since I really like the menu and all the new possibilities it offers.

[digiweb]

Hi - did you get it to work outside of Joomla? Because I'm pretty good at Joomla but crappy at CSS.

[papak69]

I don't quite understand ... outside Joomla it works flawlessly as is described in the link ...

[digiweb]

you're right, of course. Do you have a zip of the css and images?

[papak69]

images are the same ... in the template_css there is only the code for body 100% and a container for the menu, the rest of the code should only be for the menu, since I only want to test the menu, once I get the css for the menu figured out there shouldn't be any more problems ... have done quite a few joomla pages ... but since I am not a coder/css guru none of them ever included rounded tab boxes ... which is almost a must in certain pages these days ...

thank you for trying to help ...

[digiweb]

I've mostly got it. I adapted it to yoo theme yt_core using the split menu.

So there's a file yt_splitmenu.php, modify anything that outputs

<li><a href...>Menu</a></li>

to

<li><b><a href=...</b></li>

The code wrapper looks like this BUT you can ignore overlay and mainmenu as they're not defined in css anymore,just #menu is:

<div id="menu">
				<div class="overlay"></div>
					
					<ul class="mainmenu">
<li class="level1 item3"><a href="linktosomething">Home</a></li>
<li id="current" class="level1 item7 parent active"><a href="linktowebsites">Web Sites</a></li>
<li class="level1 item8 parent"><a href="linktoshoppincart">Shopping Carts</a></li>
<li class="level1 item10 parent"><a href="linktogoogleranking">Google Ranking</a></li>
</ul>

				</div>
							
			</div>

This is menu.css

/* menu */
div#menu {
	position: relative;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background: url(../images/menur_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}



div#menu li {
	float: left;
	list-style: none;
}

div#menu li a {
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
	list-style: none;
}
div#menu li a b {
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}




div#menu li.current a, div#menu li a:hover{
	color: #fff;
	background: url(../images/menur_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}

div#menu li.current a b, div#menu li a:hover b{
	color: #fff;
	background: url(../images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

[papak69]

I will try this as soon as I get home from work ... if you solved this I can't thank you enough than ...

Is there any way you would also share the index.php and yt_splitmenu.php since I am not familiar with yt_core ...

Thank you in advance.

[digiweb]

k - it's a license thing, i sent you an email explaining.