Images in CSS menu

[brentnl]

Hello! 

I'm Brent and I am new with CMSMS.. after an evening of trying and trying most things are clear for me.. but one thing isn't: I've (the bad) habit of making a menu of images instead of text.

I want to achieve something like this simple menu http://suredesign.nl/, I want the menu to build up from images. Also they have to become roll-over buttons (another image per menu item) and finally, when an item is clicked, the 3th version of the image will show.

In normal html it is quite easy to achieve this, but in CMSMS itsn't working for me, because all the menu templates work with text menu-items instead of images.

I hope someone will understand my confusing question.

[tyman00]

If you are going to use images and not retain the dynamic menu you can just simply build your menu right in your template as if it were regular html. The only downfall is your menu will not change dynamically as you add/remove/edit pages and their titles.

[brentnl]

okay thank you, is there no way to maintain the dynamic links?

And if I'll make it static, the links should be "index.php?page=pagename" , am I right? 

[tyman00]

You can, but it seems hardly worth the effort to retain the dynamic links if you are going to have to generate an image for each item anyway.

Yes index.php?page= is the proper link for that.

[brentnl]

mhh, one problem remaining... I want a different image then the rest of the menu for the page that is clicked. CMSMS is using one simple template for the whole site, so I can't make any difference between the pages I quess? 

[tyman00]

You will have to do some if statements in smarty. In this situation it would be best to use Menu Manager.

You can take some inspiration for your menu template from here: http://forum.cmsmadesimple.org/index.ph ... .html  - Be sure to read the attached forum thread that he got his idea from.

This person is using the page image field to specify which image to use for the menu item. I am going to do it a little different for you.


If you are working in Menu Manager you can do something like this:

Code: Select all

<ul id="menu">
{foreach from=$nodelist item=node}
   <ul id="{$node->alias}">
      <img src="/uploads/images/menu/{$node->alias}{if $node->alias = $page_alias}_active{/if}.jpg" alt="{$node->menutext}" /></ul>
{/foreach}
</ul>

This template assumes the following:

1.)You have all of your menu images stored in /uploads/images/menu
2.)Your images are named identically to the page alias of the page it represents.
3.)Your active pages images have _active at the back of it.

Ex.) Your normal image is www.domain.com/uploads/images/menu/home.jpg and the active page image is www.domain.com/uploads/images/home_active.jpg

[brentnl]

maybe stupid to say this 'afterwards' but I'd also like to see a 'on hover' image.. 

EDIT: I found many links thanks to your link.. so I think I get the point here and if I got stuck I will call  thnx!

[brentnl]

I can't get this thing to work properly.. with the code from above I can get the images to show proparly, but because I defined a background-image in the css it isn't showing because there is an image in the front..

EDIT2: hover and active links are working perfectly, the only problem left, is the spacing between the buttons, I've tried everything with marging and padding but no effect...
The website in progress!

I've made this for the menu template from some knowledge I learned from this forum & combining other codes.

Code: Select all

<ul>
<img src="/images/menu/normal/menu_left.png" alt="menu_left"/>
{foreach from=$nodelist item=node}
   {if $node->alias == $page_alias}
<li class="{$node->menutext}"><a href="{$node->url}"><img src="/images/menu/pressed/{$node->menutext}.jpg" alt="{$node->menutext}" border="0"/></a></li>
{else}
<li class="{$node->menutext}"><a href="{$node->url}"><img src="/images/menu/normal/{$node->menutext}.jpg" onmouseover="this.src='/images/menu/hover/{$node->menutext}.jpg'" onmouseout="this.src='/images/menu/normal/{$node->menutext}.jpg'"alt="{$node->menutext}" border="0"/></a></li>
{/if}
{/foreach}
<img src="/images/menu/normal/menu_right.png" alt="menu_right"/>
</ul>

HTML

Code: Select all

<div id="nav">
       {menu template='joey_menu'}
</div>

The Menu CSS

Code: Select all

@charset "utf-8";
/* CSS Document */
#nav {
height: 34px;
width: 780px;
}   

#nav ul {
list-style:none;
}
  
#nav li {
display: inline;
}

[Dr.CSS]

This could be done very easily in cmsms using the menu manager and some simple CSS, come on tyman00 I can't believe you told them to do it hard coded and not use menu manager, even if they don't want the text to show...

[tyman00]

Well I kind of told them to use Menu Manager   but looking at it now... you are right it wasn't a good response. With CSS it is much easier than I made it.