[SOLVED] image menu with different first and last menu image

[elkman]

I am trying to convert a css image menu where the first and last menu item use a different hover image then the center menu items. I know I read somewhere in the forums how to do this but I can't seem to find it in the new forum.

Can anyone tell me how to do this or hopefully steer me to the correct forum topic? I believe the forum answer came from Dr. CSS.

Here is a link to the menu I am trying to convert to use CMS Menu manager. http://www.tellerlinks.com/mountainarts/

Thanks for any help.

Elkman

[uniqu3]

With smarty you can do it like this, open MenuManager Template you are using and add as you can see below name='menuitem' or whatever it you want and can remeber.
Then where link for that menu is built you add the code as shown below.

This will only apply if there is no Subnavigation displayed in that menu, so if your last item would have subnavigation dropdown, .last-menu-item would be applied to last menu element.

Code: Select all

{foreach from=$nodelist item=node name='menuitem'} <!-- your MenuManager code --> <a href="{$node->url}"{if $smarty.foreach.menuitem.first} class="first-menu-item"{/if}{if $smarty.foreach.menuitem.last} class="last-menu-item"{/if}>{$node->menutext}</a> {/foreach} 

Another way would be :first-child and :last-child pseudo class in css, and js (for example jquery http://api.jquery.com/last-child-selector/) fallback for browser like IE that do not support it.

[elkman]

Thank you. Works perfectly!

Elkman