add icons to menus

[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, '<li class="[menu_title]"><span[class]>[a][menu_title] [/a]</span>'); ?>

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;
}

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;
}

[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;
}

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

[aeon]

Eki - thanks but an underscore would be printed to screen in the menu if I were to change it's name? Or not?

kweitzel - Good idea but I cant get it to work. Putting the following into the template page:

Code:

show_menu(1, 0, 1, true, '<li class="[PAGE_ID]"><span[class]>[a][menu_title] [/a]</span>');

returns HTML like this:

Code:

<li class="[PAGE_ID]">

and NOT the numeric page id! Shame as that would be the answer. Can you spot something that would explain this?

[kweitzel]

You need to put it this way:

Code:

show_menu(1, 0, 1, true, '<li class="'.PAGE_ID.'"><span[class]>[a][menu_title] [/a]</span>');

cheers

Klaus

[aeon]

ahhhh yes. That works - an ID is returned.

Unfortunately however what is returned is the ID of the current page being displayed. Not the id of the page bearing the name of the current menu item... darnit! Perhaps I'll give up on this 'featurette' for now.

[kweitzel]

Of cause the normal Show_Menu only returns the current page_id, that was stupid of me ... you will need the Show_Menu2 addon for this.

Here is an extract of the included ReadMe File

FORMAT STRINGS
==============
The following tags may be included in the format strings for $aItemOpen and
$aMenuOpen and will be replaced with the appropriate text.

[a]             <a> tag (no class):         '<a href="[url]" target="[target]">'
[ac]            <a> tag including class:    '<a href="[url]" target="[target]" class="[class]">'

•             <li> tag including class:   '<li class="[class]">'
  [ul]            <ul> tag including class:   '<ul class="[class]">'
  [class]         List of classes for that page
  [menu_title]    Menu title text (HTML entity escaped unless SM2_NOESCAPE flag is used)
  [page_title]    Page title text (HTML entity escaped unless SM2_NOESCAPE flag is used)
  [url]           Page URL for the <a> tag
  [target]        Page target for the <a> tag
  [page_id]       Page ID of the current menu item
  [parent]        Page ID of the parent menu item
  [level]         Page level, the same number as is used for the "menu-N" CSS tag.
  [sib]           Current menu sibling number
  [sibCount]      Total number of siblings in this menu
  [if]            Conditional test (see section CONDITIONAL FORMATTING)
  
  The following tags are only available when the SM2_ALLINFO flag is used.
  
  [description]   Page description
  [keywords]      Page keywords
  

You can use the page_id in the $aItemOpen position. Sorry

cheers

Klaus