Images as menu items?

[badhoy]

I've searched, read many, many threads and can't figure out how to do the following.  I want to replace the text generated from CSSMenu (0.12) with images.  I don't want background images that the "Menu Text' field displays, I want to use just an image for each menu item.

Is this something that is really easy to do and I'm just being thick?

Ideally it would sure be nice if I could just put in the reference to the image I want to use in the "Menu Text" field.  Something like "uploads/images/button1.gif".  It would be really cool if it were tied to the uploads module.

[jelle]

No it is a very valid point. But you cannot do that without hacking some templates yourself, sorry.
What I would try is this: copy a suitable template to the db. Where the menutext for toplevel is written you add and <img tag where the src is constructed from the alias or pageid.
btw: beware of that template code, it is not very readable/programmer friendly.

[badhoy]

How can this get put on the feature list for 0.12.1?  This strikes me as very necessary feature.

I took a look at the templates, thinking I could just tweak something there and was scared off by the look of it.  I'll just build my menu's manually for now.  Thanks for the info jelle.

[jelle]

http://dev.cmsmadesimple.org/tracker/?a ... unc=browse
that looks like the feature request tracker for me.
I told you the menutemplate code was not very readble, didn't I? Some returns and indenting is dearly needed there, IMHO.

[Dr.CSS]

Do you mean something like this?  that page has an image map menu.

  mark

[badhoy]

Yes and No maksbud.  I'm really looking for something that can make each menu item an image, not an using an image map.  But that's a thought.  The site you linked to is done using CMSMenu?

[Dr.CSS]

Yes it's a mod. bullet menu.
you mean diff. img. for each item?

  mark

[badhoy]

Yes, a different image for each item.  Ideally I don't want to have to mod the menu to do this.  Can you share your bullet menu mod and template.  I'd really like to see how you did this.

[Dr.CSS]

Sure,,,This might get loooong,, this is how it looked in the original, bullet menu js.

Code: Select all

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="currentpage">{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
<li><span class="bullet_sectionheader">{$node->menutext}</span>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"><hr class="separator" />
{else}
<li><a href="{$node->url}">{$node->menutext}</a>{/if}
{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

it spit out unordered lists of lists and I needed    of    don't know what those are ,, but what ever.  so I did this

Code: Select all

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
 <dt>
  <a id="title" href="#nogo" title="The Beatles">
   The Beatles
  </a>
 </dt>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</dd></dl>" times=$node->prevdepth-$node->depth}
</dd>
{elseif $node->index > 0}</dd>
{/if}

{if $node->current == true}
<dd><a href="{$node->url}" class="currentpage"></a>
{elseif $node->type == 'sectionheader'}
<dd><span class="bullet_sectionheader">{$node->menutext}</span>
{elseif $node->type == 'separator'}
<dd style="list-style-type: none;"><hr class="separator" />
{else}
<dd id="pic{$node->menutext}"><a id="a{$node->menutext}" title="{$node->menutext}" href="{$node->url}"><span>N<br /><br />P</span></a>{/if}
{/foreach}

{repeat string="</dd></dl>" times=$node->depth-1}</dd>

{/if}

that last line
menutext}">menutext}" title="{$node->menutext}" href="{$node->url}">N

P
is used for styling and placement,,
you insert in HTML  of template,,

Code: Select all

<!-- menu -->
	  <div id="sidebar">
	    <dl id="imap">
         {cms_module module='menumanager' template="debsbullet"  collapse='1'}
          </dl>
         </div>

<!-- end menu -->

position like so,, in the layout CSS

Code: Select all

div#sidebar{float: left;width: 162px;height:394px;padding: 0;margin: 0px;}
 * html body div#sidebar{float: left;width: 162px;padding-top: 3px;margin-top: 0px;}

style like so,, in a CSS called imap,, this is long

Code: Select all

/* set the size of the definition list <dl> and add the background image */
#imap {
  display:block;
  width:149px;
  height:394px;
  ackground: url(uploads/images/mainmenu.jpg) no-repeat;
  position:relative;
  }
  /* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
  display:block;
  width:149px;
  height:0;
  padding-top:0px;
  overflow:hidden;
  position:absolute;
  left:0;
  top:0;
  background:transparent 400px 400px;
  cursor:default;
  }
/* the hack for IE pre IE6 */
* html #imap a#title {
  height:240px;
  he\ight:0;
  }
  /* the <dt><a> hover style to move the background image to position 0 0 */
#imap a#title:hover {
  background-position: 0 0;
  z-index:10;
  }
  /* place the <dd>s in the correct absolute position */
#imap dd {
  position:absolute;
  padding:0;
  margin:0;
  }
#imap #picNews {
  left:-3px;
  top:24px;
  z-index:20;
  }
#imap #picBooks {
  left:-3px;
  top:57px;
  z-index:20;
  }
#imap #picContest {
  left:-3px;
  top:89px;
  z-index:20;
  }
#imap #picBio {
  left:-3px;
  top:123px;
  z-index:20;
  }
  #imap #picBlog {
  left:-3px;
  top:153px;
  z-index:20;
  }
  #imap #picExtras {
  left:-3px;
  top:191px;
  z-index:20;
  }
  /* style the <dd><a> links physical size and the background image for the hover */
#imap a#aNews {
  display:block;
  width:149px;
  height:33px;
  background:transparent url(uploads/images/news2.gif) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #imap a#aBooks {
  display:block;
  width:149px;
  height:33px;
  background:transparent url(uploads/images/books2.gif) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #imap a#aContest {
  display:block;
  width:149px;
  height:33px;
  background:transparent url(uploads/images/contest2.gif) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #imap a#aBio {
  display:block;
  width:149px;
  height:33px;
  background:transparent url(uploads/images/bio2.gif) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #imap a#aBlog {
  display:block;
  width:149px;
  height:33px;
  background:transparent url(uploads/images/blog2.gif) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;
  }
  #imap a#aExtras {
  display:block;
  width:149px;
  height:33px;
  background:transparent url(uploads/images/extras2.gif) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;
  }
  /* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
  display:none;
  }
  /* move the link background image to position 0 0 when hovered */
#imap a#aNews:hover, #imap a#aBooks:hover, #imap a#aContest:hover, #imap a#aBio:hover, #imap a#aBlog:hover, #imap a#aExtras:hover {
  background-position:0 0;
  }

now the main bkgrd. image (uploads/images/mainmenu.jpg) no-repeat; can be a bunch of pic. stiched together to make a static pic then the pic.s you use to make the main 1 will be used for a:hover the result is this in the page source.
BTW on this 1 I had to put the image in the color CSS or else it no work,, 
div#sidebar{background: url(uploads/images/mainmenu.jpg) no-repeat;

Code: Select all

<!-- menu -->
	  <div id="sidebar">
	    <dl id="imap">
          
 <dt>
  <a id="title" href="#nogo" title="The Beatles">
   The Beatles
  </a>
 </dt>

<dd><a href="http://www.multiintech.com/debra/index.php?page=home" class="currentpage"></a>
</dd>

<dd id="picNews"><a id="aNews" title="News" href="http://www.multiintech.com/debra/index.php?page=content_types"><span>N<br /><br />P</span></a></dd>

<dd id="picBooks"><a id="aBooks" title="Books" href="http://www.multiintech.com/debra/index.php?page=navigation_menus"><span>N<br /><br />P</span></a></dd>

<dd id="picContest"><a id="aContest" title="Contest" href="http://www.multiintech.com/debra/index.php?page=templates_and_stylesheets"><span>N<br /><br />P</span></a></dd>

<dd id="picBio"><a id="aBio" title="Bio" href="http://www.multiintech.com/debra/index.php?page=extensions"><span>N<br /><br />P</span></a></dd>

<dd id="picBlog"><a id="aBlog" title="Blog" href="http://www.multiintech.com/debra/index.php?page=blog"><span>N<br /><br />P</span></a></dd>

<dd id="picExtras"><a id="aExtras" title="Extras" href="http://www.multiintech.com/debra/index.php?page=extras"><span>N<br /><br />P</span></a>
</dd>


          </dl>
         </div>

<!-- end menu -->

HTH  and it wasn't too long    mark