Slider Menu

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Slider Menu

Post by Dr.CSS »

OK after messing around with the menu manager I've managed to adapt a JS slider menu to work with CMSMS...

You will have to put a Section Header as your first page to put the Home page under to get the look/function...

http://touareg.websitewelcome.com/~mark2008/

EDIT: the first page under Round also uses this template/menu so you can see it in another page...

Adapted from this...

http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
Last edited by Anonymous on Mon Jan 14, 2008 5:38 am, edited 1 time in total.
hexdj
Power Poster
Power Poster
Posts: 415
Joined: Sat Mar 24, 2007 8:28 am

Re: Slider Menu

Post by hexdj »

Hey Mark, looks nice

What files did you use? would you mind posting a HOW-TO?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Slider Menu

Post by Dr.CSS »

I downloaded the files from them then made a new menu template...

Menu template...

{if $count > 0}

{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{elseif $node->depth prevdepth}

{elseif $node->index > 0}
{/if}
{if $node->type == 'sectionheader'}

{$node->menutext}
{elseif $node->current == true}
url}" class="current">{$node->menutext}
{else}
url}">{$node->menutext}
{/if}
{/foreach}


{/if}

Take note that the click to expand Text is a Section Header and you need one in the 1. spot, so you get the top image to work, that is usually 1. Home so home becomes '1.2 Home' like this, I used Menu...

1. Menu (section header)
1.1 Home
2. Round (section Header)
2.1 page
2.2 page
etc...
3. Squared (section Header)
3.1 page
etc...


To make it only show one section at a time you need to change this false to true in the sdmenu.js
myMenu.oneSmOnly = false;            // One expanded submenu at a time

And you need this in the ...


{literal}
//
{/literal}


You may have to change a little bit of the CSS, I made the current page use the arrow that they had for hover and took it out of hover and changed the padding in the section header part to accommodate longer menu text, they had 5px 25px I used 5px 0px 5px 25px...
hexdj
Power Poster
Power Poster
Posts: 415
Joined: Sat Mar 24, 2007 8:28 am

Re: Slider Menu

Post by hexdj »

Thanks!!!

;D  ;D
vam

Re: Slider Menu

Post by vam »

Thank you, thank you - I have spent many hours trying to get a slide down menu to work, not for myself but my client was not happy with mouse fly outs - as he calls them but wanted something to click - and here you have done it - I really appreciate it - also by reading what you have written in the menu has helped me learn a lot more.

vam
Post Reply

Return to “Layout and Design (CSS & HTML)”