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

Different image for each menu link

(1/1)

G4:
How can I style each menu link like the following example? Is it possible to use page ID's?

Ruud:
Try the following example with show_menu2()


--- Code: ---
<?php show_menu2(0, SM2_ROOT, SM2_START+1,SM2_TRIM, '[li]<a href="[url]" class="menu-[page_id]">[menu_title]</a>' ); ?>


--- End code ---
It should give a class "menu-nn" in the <a> tag.

G4:
It does not work. What am I doing wrong?

Output:

--- Code: ---<ul class="menu-top"><li class="menu-expand menu-current menu-first"><a href="http://www.mysite.nl/testpage/" class="menu-22">Menulink 1 &gt;</a><ul class=""><li class="menu-child menu-first"><a href="http://www.mysite.nl/testpage/pages/Menulink 1/Sublink A.php" class="menu-24">Sublink A</a></li><li class="menu-child"><a href="http://www.mysite.nl/testpage/pages/Menulink 1/Sublink B.php" class="menu-25">Sublink B</a>
etc.
--- End code ---

Stylesheet:

--- Code: ---/* MENU  */
.menu{float:left;font-size:14px;width:220px;height:auto;margin:1px 0 0 0;text-align:left;font-weight:bold;line-height:18px;background-color:#fff}
.menu ul{border-top:0;list-style-type:none;padding:0;margin:0}
.menu ul ul{text-decoration:none;border:0;padding:0;margin:0}
.menu li{border:0;border-bottom:1px solid #fcb816}
.menu ul ul li{border:0;border-top:1px solid #7A7A7C}
.menu ul ul a{border-left:solid 5px #7A7A7C;color:#000}
.menu a{color:#f79b17}
.menu a:link, .menu a:visited, .menu a:active{padding:2px 10px 4px 10px;display:block;text-decoration:none;padding-top:4px}
.menu a:hover{display:block;color:#fff;background-color:#f79b17}
.menu_current a{color:#fff;font-weight:bold;background-color:#f79b17}
 
/* ID 24 */
.menu-24{float:left;font-size:14px;width:220px;height:auto;margin:1px 0 0 0;text-align:left;font-weight:bold;line-height:18px;background-color:#fff}
.menu-24 ul{border-top:0;list-style-type:none;padding:0;margin:0}
.menu-24 ul ul{text-decoration:none;border:0;padding:0;margin:0}
.menu-24 li{border:0;border-bottom:1px solid red}
.menu-24 ul ul li{border:0;border-top:1px solid red}
.menu-24 ul ul a{border-left:solid 5px red;color:#000}
.menu-24 a{color:red}
.menu-24 a:link, .menu-22 a:visited, .menu-22 a:active{padding:2px 10px 4px 10px;display:block;text-decoration:none;padding-top:4px}
.menu-24 a:hover{display:block;color:red;background-color:red}
.menu-22_current a{color:red;font-weight:bold;background-color:red}
--- End code ---

Ruud:
The menu-nn class is in the <a> link.
So the .menu styling is for defaults and positioning.

Remove the .menu-nn styles in your example.
Just set the color with:


--- Code: (untested) ---.menu li a.menu-24 { color: red; }
.menu li a.menu-24:hover { whatever hover action }
.menu li.menu_current a.menu-24 { whatever current action }
--- End code ---

G4:
Thank you! Also for the explanation.

Navigation

[0] Message Index