showmenu

[mdemaree99]

Before I start some testing this weekend..
as anybody had any luck with multiple color background on menu buttons?
I am looking to add a class of group1, group2, group3 that would each have their own background color.
Here is what I was thinking:
Yes.. I know code looks a little funny..  My template is a little odd and I have 2 menus on the page..
Top Menu lists Public and Members.
Main page  shows menu of all pages under Public section, hence the Root+1.

Code: [Select]

<?php show_menu2(
0,
  SM2_ROOT+1,
  SM2_ALL,
  SM2_ALL|SM2_CURRTREE,
  '<li]"><a href="[url]" class="[class] navlev[level] group.$menucount">[menu_title]</a>',
"</li>",
'<ul class="ullev[level]">',
"</ul>",
true,
'<ul id="header_menu" class="menu"><li class="home"></li>'
);

'[if([leve]==1){$menucount=menucount+1 }]'

 ?>

[marmot]

Hi,

do I get you right, you need a different class for each menu button? Hmm, I guess it could look a bit funny to have each button in different design...
Maybe [page_id] can help you:

Code: [Select]

.... '<li]"><a href="[url]" class="[class] navlev[level] group[page_id]">[menu_title]</a>',....

regards

[mdemaree99]

Looking to make it as fluid as possible and not hard code page_id's
Easier to code CSS for 8 classes  so if user adds or deletes a page they wouldn't have to change template file.

Was hoping I could replate [level] with another variable that changes for each menu top level item vs sub-menu's

Here is menu I am trying to mimic.
http://www.jld.net/

[marmot]

Hi,

Was hoping I could replate [level] with another variable that changes for each menu top level item vs sub-menu's

ok, I've got two approaches for you:

1) Use the include.php appended instead of the original one of SM2. Using SM2 Parameter SM2_NUMCLASS will give each item a class like "menu-0_2", where 0 is the level of the menu and 2 is the number of the item (starting at 0).
In .css file you can define

Code: [Select]

.menu a.menu-0_2 {
background-color: #0F0;
} for example. But be sure to add the definition at the end of the file so previous definitions will be overwritten.

2) If you have jquery on your page and don't want to touch the original SM2 code, you can put this script in the head section of your template (of course after jquery is loaded):

Code: [Select]

<script>
$(document).ready(function () {
$('.menu-0').each(function(index){
$(this).addClass('menuColor'+index);
});
});
</script>, where 0 in menu-0 is the level of the menu.
Then you can define styles in your css selecting like this:

Code: [Select]

.menu a.menuColor1 {
color: #00F;
}, where 1 of menuColor1 is the number of the menuitem, starting with 0.

Both suggestions are tested so be sure - they work  

regards

Edit: Typos

[DarkViper]

The problem from mdemaree99 is a very good example to show how WB from revision 1689 (currently in SVN) will handle this:

Code: [Select]

<?php

'<li]"><a href="[url]" class="[class] navlev[level]" style="background-image:url([menu_icon_0]);">[menu_title]</a>',


In Backend -> Page-Settings you can(but not must) now assign different images to 'MenuIcon0' of each page.
(this functionality is given also with 'menu_icon_1' and 'page_icon')

that's all..

[mdemaree99]

2) If you have jquery on your page and don't want to touch the original SM2 code, you can put this script in the head section of your template (of course after jquery is loaded):

Code: [Select]

<script>
$(document).ready(function () {
$('.menu-0').each(function(index){
$(this).addClass('menuColor'+index);
});
});
</script>, where 0 in menu-0 is the level of the menu.
Then you can define styles in your css selecting like this:

Code: [Select]

.menu a.menuColor1 {
color: #00F;
}, where 1 of menuColor1 is the number of the menuitem, starting with 0.

Seems like I have several jquery files loading so I like option 2, but a little confused on what is the variable I would use for the class. I have tried menucolor[index] and a few other options, but not quite sure the code.

<?php show_menu2(0, SM2_ROOT+1, SM2_ALL, SM2_ALL|SM2_CURRTREE, '<li><a href="[url]" class="
menuColor[index]">[menu_title]</a>', "</li>", '<ul class="ullev[level]">', "</ul>", true, '<ul id="header_menu" class="menu"><li class="home"></li>');
 ?>

[marmot]

Hi,

Seems like I have several jquery files loading so I like option 2, but a little confused on what is the variable I would use for the class. I have tried menucolor[index] and a few other options, but not quite sure the code.

to use this you just have to use the SM2 Paramenter SM2_NUMCLASS. The javascript will add the unique class to the link. Just define the style how you like it. Thats all! You don't have to care for classes.

regards