Have layout with feature tabbed menu...how do i integrate into Modx???

Hi,

I have incuded a wireframe example of the layout i’m trying to integrate in order to better explain what i want to do.
The main menu is on the left and i have integrated this using wayfinder with no issues.
On the home page there will be a tabbed box which i want to integrate and am a little confused as to the best way.
This is all done with XHTML/CSS...which looks like this (this just shows 2 of the tabs):


The content in the main area is contained within <span> tags that are absolutely positioned and is activated to display when the tabs are moused over (a:hover). The default state of the <span> tags is to display:none;
So somehow i need to have just this area showing up in the Modx editor...much the same as with the tag of [*#content*].
Should i use wayfinder for the tabs?
Any advice will be greatly appreciated.

Thanks

J

You could use both Wayfinder or Ditto for this. Ditto by default can handle the content field, not sure if wayfinder can handle the content field without using a helper snippet.

Hi,

Thanks for your reply.

Having only used Modx in it’s most basic form i’m afraid i’m not with you fully....could explain how Ditto would handle the content area and what the possible pitfalls could be with Wayfinder?

Maybe it would be easier to have seperate templates for each tab?

Thanks

Hi Ganesh,

thanks very much for your help.
I’m not that familiar with Ditto but have just been through some of the notes on the site and on wiki....so forgive me if my questions seem rather simple...
I’ve sort of got it working here’s what i’ve done..
- created a folder in the documnet tree containing the 5 pages (numbered 24-28) so the ditto call within the template is:
<ul>
[!Ditto? &documents=`24,25,26,27,28` &tpl=`tabsmenu` &total=`5` &display=`5`!]
</ul>
...however in order for the containing <span> not to be empty, the first <li><a> tag needs to have a class of ’active’.
Do i add this in with the chunk code?
When i’ve used Wayfinder i have added the following: &hereClass=`active` and then the <li><a[+wf.classes+]>
I’ve had a look at the Wiki for Ditto but can’t find specific placeholders for classes.

- My other issue is that the menu items display the wrong way round i.e. from right to left. When i view the source code they are indeed displaying from 28 -24 instead of 24-28...any idea what that could be?

Thanks again for your help.

Hi Ganesh,

I would give you an address but for some reason none of the content is displaying anymore...seems that the site isn’t reading the stylesheet or the image folder has somehow been changed...not sure:-(...but all i’ve done in the meantime is add some images to one of the pages and add some styles in the Configuration page!!!
Will try your suggestion and see if i can post a link.

Cheers

J

Hi Ganesh,

I’ve made some headway but am not quite grasping the firstTab chunk.
The project is in a testing area at the moment and i don’t want to compromise my clients privacy by posting a link to the site on here.
If you do have the time to take a look at what i’m trying to achieve then i can PM you an address with details...would that be ok?

Thanks again for your help

J