WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: terrajohn on January 19, 2010, 02:32:44 AM

Title: css and showmenu2
Post by: terrajohn on January 19, 2010, 02:32:44 AM

I have been trying already a lot of things but it seems I can't get things right...
I have a menu consisting of two levels. I use the showmenu2 in the correct way. I get all the menu etc...
But apparently I can not change the font color for the current item (using the .menu current class - i can add borders, background color - but when defining the font color it has no effect....)

I want the following

ITEM 1
ITEM 2
    item 1
    item 2
    item 3
ITEM 3
ITEM 4
....

Where ITEM : bold and other color when active
Where item : should be normal and other color when active

Any suggestions here (i already took a look at the www.websitebakers.d e/sm2/ site as well as the posts on this forum)

thanks in advance

Title: Re: css and showmenu2
Post by: erpe0812 on January 19, 2010, 09:57:43 AM

Hi
would be nice if you post your sm2 call and a link to your homepage.
This makes helping easier  :wink:

rgds

erpe

Title: Re: css and showmenu2
Post by: terrajohn on January 19, 2010, 12:15:36 PM

This is the latest version I'm using:

Code: [Select]

<?php show_menu2(0, SM2_ROOT+1, SM2_CURR+1); ?>
But I have tried multiple different variatons (including the extend one):

Code: [Select]

<?php show_menu2( 
                                $aMenu          = 0,
                $aStart         = SM2_ROOT+1, 
                $aMaxLevel      = SM2_ALL,        
                $aOptions       = SM2_TRIM|SM2_PRETTY,
                $aItemOpen      = &#39;<li><a href="[url]" target="[target]">[menu_title]</a>&#39;,
                $aItemClose     = &#39;</li>&#39;,
                $aMenuOpen      = &#39;<ul class="leftside">&#39;,
                    $aMenuClose     = &#39;</ul>&#39;,
                $aTopItemOpen   = false,
                $aTopMenuOpen   = false
                 );
                  ?>
Concerning the $aMenuOpen class - I have been working with as well as without this class

The CSS is (leftside being the div in which the menu is positioned) - it is a bit messy because of the trial and error:

Code: [Select]


#leftside
{
clear: left;
width: 150px;
margin: 0 auto;
font-size: 11px;
float: left;
margin:0 0 5px;
padding:0;
}

#leftside ul
{
padding: 0px;
margin: 6px 0 0 10px;
color: #707070;
display: block;
width: 150px;
font: Arial, Helvetica, sans-serif;
border: 1px solid #e60000;
}

#leftside ul ul
{
padding: 0px;
margin: 6px 0 0 10px;
color: #707070;
display: block;
width: 139px;
font: Arial, Helvetica, sans-serif;
font-weight: normal;
border: 1px solid;
}

#leftside ul ul li
{
padding: 0px;
margin: 6px 0 0 10px;
color: #e60000;
display: block;
width: 139px;
font: Arial, Helvetica, sans-serif;
font-weight: normal;
}

#leftside ul li { display: block; padding-bottom: 8px;}

#leftside ul li a
{
text-decoration: none;
color: #707070;
}

#leftside ul li a:hover
{
color: #e60000;
}

#leftside .menu-current
{
font-weight: bold;
color: #e60000;
}

#leftside .menu-parent
{
font-weight: bold;
color: #e60000;
}


Title: Re: css and showmenu2
Post by: erpe0812 on January 19, 2010, 12:22:12 PM

try this:

Code: [Select]

#leftside .menu-current a
{
font-weight: bold;
color: #e60000;
}
rgds

erpe

Title: Re: css and showmenu2
Post by: terrajohn on January 19, 2010, 01:50:37 PM

Erpe,

Thanks - this indeed does the trick for the current item in sublevel 2. But it seems you can't have and the current topmenu and the current submenu item differently styled
or you should maybe create ul li .menu current a and a ul ul li. menu current a style. I'll check this out later

It seems like I also still have an indent problem. To be sorted

Title: Re: css and showmenu2
Post by: erpe0812 on January 19, 2010, 02:09:46 PM

(mostly) everything is possible........... ... :wink:

Title: Re: css and showmenu2
Post by: CodeALot on November 07, 2012, 03:49:33 PM

Quote from: terrajohn on January 19, 2010, 01:50:37 PM

Erpe,

Thanks - this indeed does the trick for the current item in sublevel 2. But it seems you can't have and the current topmenu and the current submenu item differently styled
or you should maybe create ul li .menu current a and a ul ul li. menu current a style. I'll check this out later

It seems like I also still have an indent problem. To be sorted

Yeah I know this is an old topic. But I just stumbled upon it and wanted to confirm that the last suggestion is right:

Create a ul ul li.menu-current a {  }   to have "active" pages in your submenu styled differently than the top level. Just tried that and it works :)