WebsiteBaker Support (2.8.x) > Templates, Menus & Design

showmenu

(1/2) > >>

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: ---<?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 }]'

 ?>
--- End code ---

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: ---.... '<li]"><a href="[url]" class="[class] navlev[level] group[page_id]">[menu_title]</a>',....

--- End code ---

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,


--- Quote from: mdemaree99 on June 25, 2012, 04:29:36 PM ---Was hoping I could replate [level] with another variable that changes for each menu top level item vs sub-menu's

--- End quote ---
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: ---.menu a.menu-0_2 {
background-color: #0F0;
}
--- End code ---
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: --- <script>
$(document).ready(function () {
$('.menu-0').each(function(index){
$(this).addClass('menuColor'+index);
});
});
</script>
--- End code ---
, where 0 in menu-0 is the level of the menu.
Then you can define styles in your css selecting like this:
--- Code: ---.menu a.menuColor1 {
color: #00F;
}
--- End code ---
, where 1 of menuColor1 is the number of the menuitem, starting with 0.

Both suggestions are tested so be sure - they work  :-D

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: ---<?php

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


--- End code ---

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..

Navigation

[0] Message Index

[#] Next page