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/csslibrary/item/glossy_horizontal_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.