DTT content to slide?

[JD]

aludiumtest2.boards.net/

Not sure if this is possible or not but -

I currently have this code used for the navigation links at the top of the page on my test forum. I've used a pop up menu code to make them appear but the content box that contains them is a single box, that changes content and shifts along depending on what anchor link you hover over.

I've deliberately done this, to get them in one box so that I can try and make that box slide. I have the left padding set so that the box appears in the right alignment under each anchor link. I'm just looking for an adaptation to my code that will allow it to change that padding as a transition, meaning that, as you move your mouse along the anchor links, the links below will transition their new padding and slide to follow.

Does anyone know how to achieve this please?

[Tumbleweed]

Hi JD,

When I view your site the links that appear on hover are moving to the right more and more as I move my mouse from link to link(left to right).  Did you get this as you want it or am I not understanding what you need help with. At first I though you might want the box to move too but I don't think that is what you are asking.

[JD]

Hi Tumbleweed!

Okay sorry I obviously didn't explain myself well...

Currently, I have my DTT tabs in the first cell, which are the anchor links in the white bar at the top.

So far I've gotten it so that, when you hover over them the content DTT will change, but that the cell, which has that DTT content is appearing only upon hovering on the links, hence making the green bar appear below.

The actual DTT content box has the arrow as it's background and contains the different <div>s for the anchor links, sublinks, but they are held within a single cell - the content of said cell is the only thing that changes.

As they're in a single cell, I can change the left side padding to be more or less depending on which anchor link I'm hovering on so that the links are in line with their anchor link. I have done this already, which is what you're seeing - the links moving further to the right the further along the anchor links your mouse hovers.

But at the moment, the movement is a simple change. The content disappears from under Terminal and then reappears under Dashboard, for example. I'm looking for an effect that will allow it to transition to the effect of it actually sliding from under Terminal to settle under Dashboard.

I know that I have used padding css code and the hover attribute with transition properties to make something slide to and fro a its containing cell. But because this one's padding is contingent on which <div> is being shown in the DTT content, I'm not sure how to do it this time, if it's at all possible... :S

I hope I made better sense that time. :S lol.

[Tumbleweed]

Thanks for elaborating. I'm trying to envision in my head what you are saying and I think I got part of it but I think my brain is shutting down as I should have been sleeping hours ago. If no one else jumps in to help, I'll reread this tomorrow after sleep and see if I get, in total, what you are saying/wanting. Apologies for the defunct brain. lol

[JD]

Haha. No problem. If it helps with the envisioning, this thread and this one are together questions on how I can try and get a menu like this site.

[Tumbleweed]

Jul 4, 2014 2:19:45 GMT -8 JD said:

Haha. No problem. If it helps with the envisioning, this thread and this one are together questions on how I can try and get a menu like this site.

Well, that link helped a lot for me to understand what you want your menu to look like. You are really so close to what you want. I'm just not sure I can help you get to where you want to be without having exactly what you have on my test site to fiddle around with.

I wouldn't have ever thought of utilizing the DTT for a menu like that so pats on the back for getting as far as you have. I probably would have started with a simple css menu with sub-menus (hidden) and used jquery to animate but even that is challenging, at least for me. 

I'm really sorry, but I admit when I don't know how to go about something and this is one of those times. Hopefully someone else can help you out. 

[JD]

Lol thanks Tumbleweed. Don't worry, I'd rather you admit to not knowing and try to fob off random ideas at me. You're welcome to take code from the forum and fiddle if you like, it should all be there under Ctrl+U. If not, then thanks for giving it a shot anyway I'm gonna keep fiddling and see what I can do with it

[JD]

bump?

[JD]

bump?

[JD]

bump?