WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: vincent77 on October 18, 2009, 02:26:11 PM

Title: I can't make a glossy-menu implementation...
Post by: vincent77 on October 18, 2009, 02:26:11 PM

I'm trying to get this menu
http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/

in  my WB for the last couple of days now, and all I got was a headache...
my hover just won't work, it will only load the left image, and not the hoverright image.

I also don't know how to set a "current" class at the active page...

here some code i've used:

Code: [Select]

<ul class="glossymenu">
<?php $count = 0;
while($page = $menu1->fetchRow()) {
if(!isset($admin) OR $admin->show_page($page)) {
?>
    <li><a class="menuHead" href="<?php echo page_link($page[&#39;link&#39;]); ?>"><?php echo stripslashes($page[&#39;menu_title&#39;]); ?></a></li>
 <?php
$count = $count+1;
}
}
?>

and the css:
[code]
/* MENU glossy */

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

.glossymenu li{
    float:left;
}

.glossymenu 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;    
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

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

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

[/code]

Title: Re: I can't make a glossy-menu implementation...
Post by: Stefek on October 18, 2009, 02:37:29 PM

Hello,
why don't you usethe show_menu2 function for your menu?

If your HTML Structure is intended to be like:

Code: [Select]

<ul class="glossymenu">
    <li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
    <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
    <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>    
    <li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>    
    <li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>    
    <li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>    
</ul>
..try this SM2 Call:

Code: [Select]



                  <?php 
                show_menu2( 
                                $aMenu          = 1,
                $aStart         = SM2_ROOT, 
                $aMaxLevel      = SM2_START,        
                $aOptions       = &#39;&#39;,
                $aItemOpen      = &#39;<li [if(class==menu-current) {class="current"} ]><a href="[url]"><b>[menu_title]</b></a>&#39;,
                $aItemClose     = &#39;</li>&#39;,
                $aMenuOpen      = &#39;<ul class="glossymenu">&#39;,
                    $aMenuClose     = &#39;</ul>&#39;,
                $aTopItemOpen   = &#39;&#39;,
                $aTopMenuOpen   = &#39;&#39;
                 );
                  ?>

Regards,
Stefek

Title: Re: I can't make a glossy-menu implementation...
Post by: vincent77 on October 18, 2009, 02:42:29 PM

You really make me cry...

I spent just too much hours on making this work! Thank you SO much!  :-)

Title: Re: I can't make a glossy-menu implementation...
Post by: Stefek on October 18, 2009, 03:05:43 PM

You're welcome.

I assume, the SM2 call works correctly?

Regards,
Stefek