WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: aeon on December 22, 2007, 10:50:46 PM

Title: add icons to menus
Post by: aeon on December 22, 2007, 10:50:46 PM

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:
(http://www.iaeon.com/aeon/menuv1.gif)

What I want to do is set different icons for each menu entry as in this mock-up:
(http://www.iaeon.com/aeon/menuv2.gif)

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

Title: Re: add icons to menus
Post by: kweitzel on December 23, 2007, 01:24:43 AM

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: [Select]

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

Not sure though if it works this way ...

cheers

Klaus

Title: Re: add icons to menus
Post by: aeon on December 30, 2007, 12:31:23 AM

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: [Select]

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: [Select]

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


Title: Re: add icons to menus
Post by: kweitzel on December 30, 2007, 05:21:18 AM

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

Title: Re: add icons to menus
Post by: Eki on December 31, 2007, 07:17:00 AM

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: [Select]

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 (http://help.WebsiteBaker.org/pages/en/bookmarks.php)

Title: Re: add icons to menus
Post by: aeon on December 31, 2007, 05:52:09 PM

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: [Select]

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

Code: [Select]

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

Title: Re: add icons to menus
Post by: kweitzel on January 01, 2008, 06:27:53 PM

You need to put it this way:

Code: [Select]

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

Klaus

Title: Re: add icons to menus
Post by: aeon on January 03, 2008, 04:59:47 PM

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.

Title: Re: add icons to menus
Post by: kweitzel on January 03, 2008, 11:11:16 PM

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 (http://code.jellycan.com/files/show_menu2-README.txt)

Quote

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