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

add icons to menus

(1/2) > >>

aeon:
How can one add icons to a menu?

I can use a stylesheet to set a background image but as I cannot set a different icon for each menu item it looks like this:


What I want to do is set different icons for each menu entry as in this mock-up:


How would I achieve this with either show_menu() or show_menu2() or some other technique?

kweitzel:
Use CSS and customize the output with classnames. For the classname you use the title of the page. You'll have to define a class for every menu entry though ...

A bit like this:

--- Code: ---<?php show_menu(1, 0, -1, true, &#39;<li class="[menu_title]"><span[class]>[a][menu_title] [/a]</span>&#39;); ?>

--- End code ---

Not sure though if it works this way ...

cheers

Klaus

aeon:
Thanks for that idea. One issue remaining is that some of my menu items are more than one word long. At present I cannot see how to read the white space as part of the element name in CSS

e.g. this is OK as the element Sitemap is one word only

--- Code: ---ul#mainlevel-nav li.Sitemap a {
   background : url(../images_blue/map.gif);
   background-repeat: no-repeat;
}

--- End code ---

but this is not as Our School has a space between the words

--- Code: ---ul#mainlevel-nav li.Our School a {
   background : url(../images_blue/school.gif);
   background-repeat: no-repeat;
}

--- End code ---

kweitzel:
You could instead of the name also use the page_id (numeric) or any other of the page related variables: http://help.WebsiteBaker.org/pages/en/advanced-docu/developer-guide/variables-and-constants.php

cheers

Klaus

Eki:
Hi @aeon,

I am not 100% sure, but try to remove the space in the selector, by using a name like "Our_School", this way:


--- Code: ---ul#mainlevel-nav li.Our_School a {
   background : url(../images_blue/school.gif);
   background-repeat: no-repeat;
}

--- End code ---

If you leave the space in "School" becomes a child selector of "Our".

best regards,
Erik

ps. For help on CSS, have a look at these links

Navigation

[0] Message Index

[#] Next page