• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 20 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: Building a menu with images and javascript
PostPosted: Fri Apr 15, 2011 11:49 am 
Offline
Forum Members
Forum Members

Joined: Fri Dec 17, 2010 7:59 am
Posts: 78
Hello all,

This is not a question, but for those interested: a description of how I build my menu's with images and a little javascript.

First of all, I know I shouldn't use images to build menu's, but sometimes (for example on this site http://www.degrebber-mandolin.com) I think I can't get the same result with just CSS.

I couldn't get this http://themes.cmsmadesimple.org/Howto/Image_menu.html to work, so I had to think of something else. Somewehere I came across this piece of code (can't remember where ;D ):
\$1:
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{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->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li id="i{$node->id}" class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>[b]<img src="/uploads/menuimages/button{$node->id}active.png" alt="{$node->menutext}" title="{$node->menutext}" id="button{$node->id}" />[/b]</span></a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li id="i{$node->id}" class="parent"><a class="parent" href="{$node->url}"[b]onMouseOver="SwapImg('button{$node->id}','/uploads/menuimages/button{$node->id}active.png')" onMouseOut="SwapImg('button{$node->id}','/uploads/menuimages/button{$node->id}.png')"><span><img src="/uploads/menuimages/button{$node->id}.png" alt="{$node->menutext}" title="{$node->menutext}" id="button{$node->id}" />[/b]</span></a>

{elseif $node->current == true}
<li id="i{$node->id}" class="currentpage"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li id="i{$node->id}"><a href="{$node->url}" [b]onMouseOver="SwapImg('button{$node->id}','/uploads/menuimages/button{$node->id}active.png')" onMouseOut="SwapImg('button{$node->id}','/uploads/menuimages/button{$node->id}.png')"><span><img src="/uploads/menuimages/button{$node->id}.png" alt="{$node->menutext}" title="{$node->menutext}" id="button{$node->id}" />[/b]</span></a>

{/if}

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


I made the code I changed bold.

Basically here's what I do:
I use the $node->id in the name of the image. For example, when the $node->id is 57, the name of the images will be button57.png for the non-active button and button57active.png for the active button.
I use a little javascript to change the image when it is hovered.

Here's the javascript:
\$1:
var button
var path

function SwapImg(button,path)
{
 var elem = document.getElementById(button);

 elem.setAttribute("src",path);
}


You can see a working example at http://fcz.driezendesign.nl

Hope this is clear, comments will be appreciated

Hans


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Sat Apr 16, 2011 8:51 am 
Offline
New Member
New Member

Joined: Tue Jan 04, 2011 11:28 am
Posts: 6
hi,

its really what i need, but i want to ask, can this be controlt from the cms cp?

and how can i choose a image, from af folder?
I really didnt understand your ex from image 57? :)

can you maybe help me?


And one more question, can i just keep the image empty and right some text self? i hope u understand what i mean, and sorry my bad langaug!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Mon Apr 18, 2011 9:43 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Feb 21, 2007 9:30 am
Posts: 63
Location: Brussels - Belgium
Just for the record, the JS can be called in the template using the following statement:
\$1:
{literal}
<__script__ type="text/javascript">
<!--
var button;
var path;

function SwapImg(button,path)
{
var elem = document.getElementById(button);

elem.setAttribute("src",path);
}
-->
</__script>
{/literal}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Tue Apr 19, 2011 3:33 am 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12675
Location: Arizona
What happens if the page order changes and the page is no longer id 57?...

There is absolutely no reason to use JS for image swap, I never have and never will, you can use the page image for the menu image and use css to change it's position...

Like this (not ready for any browser but Firefox) the li has an image used behind every one of the top menu items, the a has the page image, both move up using css, the jquery/JS is for the drop down not image swap, in case you look at the source and see js calls ;)...

This includes the little house at the far right next to the menu...

http://dequenesh.org/

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Tue Apr 19, 2011 6:28 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Feb 21, 2007 9:30 am
Posts: 63
Location: Brussels - Belgium
I'd say to not use any images to build menus but maybe I'm extreme or extremist... :-)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Wed Apr 20, 2011 8:00 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Sat Aug 25, 2007 9:55 am
Posts: 1150
Location: Berlin
totophe \totophe:
I'd say to not use any images to build menus but maybe I'm extreme or extremist... :-)

thats right. instead use background images and toggle them with a:hover :D


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Fri Apr 22, 2011 2:22 pm 
Offline
Forum Members
Forum Members

Joined: Fri Dec 17, 2010 7:59 am
Posts: 78
Dr.CSS \Dr.CSS:
What happens if the page order changes and the page is no longer id 57?...

There is absolutely no reason to use JS for image swap, I never have and never will, you can use the page image for the menu image and use css to change it's position...

Like this (not ready for any browser but Firefox) the li has an image used behind every one of the top menu items, the a has the page image, both move up using css, the jquery/JS is for the drop down not image swap, in case you look at the source and see js calls ;)...

This includes the little house at the far right next to the menu...

http://dequenesh.org/


I didn't necessarily say I was doing the right thing ;) , it is what I am able to do now; I could not get the css thing to work.
So I was hoping for reactions like this which will help me further doing it the proper css-way ;D .

I like your site, i get the background-image swap, but I still don't get the 'the a has the page image' thing. Can you tell me a little more about that? I can't find it in the css?

Thanks!

Hans


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Mon May 02, 2011 4:43 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12675
Location: Arizona
The menu images are called in the menu template, something like this...

href="{$node->url}"><span class='itext'>{$node->menutext}</span><br /><span class='img'><img src="{$node->image}" alt="{$node->menutext}" /></span></a>

They come from the page image which you add in page edit options tab...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Tue Jun 19, 2012 4:42 am 
Offline
Forum Members
Forum Members

Joined: Tue Aug 02, 2011 5:00 am
Posts: 39
I am trying to achieve the same thing-client really wanted images instead of text. I got the images to appear as the menu, however, on menuactive the image disappears and only text shows.

I copied over the Horizontal CSS menu template and made this change:

\$1:
<li class="{$classes}"><a class="{$classes}"
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent"><span class="img"><img src="{$node->image}" alt="{$node->menutext}" /></span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="img"><img src="{$node->image}" alt="{$node->menutext}" /></span></span></a>


I selected the page image in Options for each Section Header.
I'm using CMSMS 1.10.3, and url is: http://wmwebdesigns.com/preparedness_zone/

I love how the Dequenesh site looks, and would like to have the same effect-grayed out until hover or active, and colored on active-that looks great!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Tue Jun 19, 2012 6:37 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12675
Location: Arizona
The Dequenesh menu is very involved, it calls an image that is 2 stitched together so that on hover it moves up and shows the full color image, I use the same logic for active pages...

You will have to call the image in the menuparent/menuactive parts of the menu template, in other words every part of the menu has to have the image call...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Tue Jun 26, 2012 7:20 pm 
Offline
Forum Members
Forum Members

Joined: Tue Aug 02, 2011 5:00 am
Posts: 39
Okay, I was able to fix the earlier problem by moving the call to image in the menu template. In my page template, I have the call
\$1:
{menu template="Horizontal Menu" includeprefix="self-reliance,water-and-food,warmth-and-shelter,financial-stability,emergency-kits,health-and-first-aid"}
to only show those items with the images, however, when I add the includeprefix parameter, my secondary/child drop down menu disappears. Each of those pages are content pages with 2-3 children each.

URL: http://wmwebdesigns.com/preparedness_zo ... f-reliance


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Wed Jun 27, 2012 2:00 am 
Offline
Forum Members
Forum Members

Joined: Tue Aug 02, 2011 5:00 am
Posts: 39
Okay, changed the menu call to
\$1:
{menu template="Horizontal Menu" items="self-reliance,water-and-food,warmth-and-shelter,financial-stability,emergency-kits,health-and-first-aid"}
and still have the same issue. If I remove the "items" or "includeprefix" parameters the drop down menus appear normally, however, so do links to all the pages, so my menu doesn't look the way I want it to.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Wed Jun 27, 2012 1:28 pm 
\$1:
Database Connection Failed
Error: Access denied for user 'md22099db148558'@'172.16.32.65' (using password: YES) (1045)
Function Performed: CONNECT
Host/DB: db.driezendesign.nl/md22099db148558
Database Type: mysql

Fatal error: Attempt to connect to database md22099db148558 on md22099db148558@db.driezendesign.nl failed in /public/sites/fcz.driezendesign.nl/lib/adodb.functions.php on line 85


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Thu Jun 28, 2012 2:33 am 
Offline
Forum Members
Forum Members

Joined: Tue Aug 02, 2011 5:00 am
Posts: 39
New update, menu call
\$1:
{menu template="Horizontal Menu" start_element="1" show_root_siblings="1"}
and the images appear with the child menus as well. However, new complication-underneath the images are the remaining page links, but they're colored white so they don't appear, you will notice them as you hover around where they should be. I can't seem to limit the element number in any way-any ideas or suggestions? I could probably live with this solution, but would prefer to remove those extra links-they create more whitespace underneath the menu and it would increase if the client added more root level pages.

http://wmwebdesigns.com/preparedness_zo ... f-reliance


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Building a menu with images and javascript
PostPosted: Thu Jun 28, 2012 5:28 am 
Offline
Power Poster
Power Poster

Joined: Wed Mar 19, 2008 4:54 pm
Posts: 1049
\$1:
{menu template="Horizontal Menu" start_element="1" show_root_siblings="1" number_of_levels="1"}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 20 posts ]  Go to page 1, 2  Next

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Hosting Nation - Managed CMSMS Hosting