[Pro] css drop down menus

Hi,

can anyone shed light on how to do these css drop down menus at the following website/

also does anyone know how to do the photographs sliding out to reveal?

many thanks

Cheers

Pete


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The basic Menu uses an Accordion type set up to reveal the sub menus - see ScriptyAccordion over at actionsforge.com for that.

Not sure about the construction of the fly outs but I must say that on Safari the whole menu leaps about a hell of a lot.

Walter did an example layout using flyouts like that some time back using Scriptaculous

I have an example here somewhere - I will dig it out

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Example from Walter http://www.deltadzine.net/ttt.zip

Instructions:

This page must be laid out with the CSS button On, and everything you draw (that you want to be a part of this effect) must be a layer. If you didn’t have the CSS Layout button on, go back through your layout and check the Layer checkbox in the inspector for each element of the effect.
There is a layer drawn where the panes will appear. Each of the panes is a positioned child of that layer. There are a couple of ways to do this. The hardest would be to draw them in place, the easiest would be to draw your panes wherever you like, then use the Site panel to nest them later. For clarity, I’m referring to the layer drawn where you want the panes to appear as the main layer. This layer must have Overflow set to hidden (which is not default).
Make sure Show Items is on and the disclosure triangle next to your page name is pointing down, or (shortcut) click on the header of the Site panel and it will toggle to show all of the elements of the current page.
Select one of the panes in the site panel (it will highlight in the design view so you can see what you’ve clicked on) and then drag it (within the site panel) until it is beneath and to the right of the main layer. Let go, and the pane should become a child of the main layer. (It will appear indented in the list below that main layer.) Repeat for each of your panes. Now would also be a good time to name these panes something memorable. Using the Inspector, set the top and left values of each pane as follows: left = 0, top = 0 + height of any of the other panes above it. When you’re done, you should have all of your panes visible, one directly above the other.
Adjust the height of your main layer so that all of your panes are visible. (Multiply the height of one pane by the number of panes and set that as the height of the main layer.)

There’s a function defined in the Page > HTML Markup which resets the position of the trigger elements and the panes. This is where we start with the math part of this exercise.

<script type="text/javascript">
function resetAll(){
    $('shell').childElements().each(function(elm){
        if(elm.positionedOffset().left == 0)
            new Effect.Move(elm,{x:-700,y:0, duration:0.7});
    });
    $$('div.tab').each(function(elm){
        if(elm.positionedOffset().left > 55) 
            new Effect.Move(elm,{x:-20,y:1,duration:0.4});
        elm.setOpacity(0.5);
    });
}
</script>

The number 700 above is arrived at because it’s much wider than the panes. You could use something that’s just one pixel more than the width of your panes, so in my example, I could have used 371. I may go back and change my example later and see if it makes it any better. But whatever you choose for this number, make sure that you make note of it, because you have to use it again later.

The number 55 above is the left position of the trigger elements (in my example, the colored blocks on the sushi board, in the TTT original, the application icons). You will see this position in the Inspector when you have one of them selected. In order to use this code, you must make these trigger elements all start at the same left position. You could certainly re-write it to support a different layout, but I leave that as an exercise…

The numbers 20 and 1 above refer to the move that the trigger element makes when it’s clicked. We’ll refer to these again later. These values were arrived at by trial and error, and make the trigger appear to move in a straight line relative to the grain of the sushi board. You will want to adjust these to fit your layout and your desired animation.

So with your code adjusted to match the real layout you drew, you can close the Page > HTML Markup dialog and move on.

Next, apply Protaculous Action to the page. (There’s a copy in the ttt.zip archive linked from the demo above.) Select either scriptaculous-packed or scriptaculous from the Library picker. Click the top Function Body button and add the following code:

$('shell').childElements().each(function(elm){
    if(elm.positionedOffset().left == 0)
        elm.style.top = '0px';
        elm.style.left = '-700px';
});
$('shell').style.height = '332px';

Remember where I said you would need 700 again? Here’s where it goes. Two more things you need to figure out. First, I named my main layer ‘shell’ using the Title field of the Inspector. Click on your main layer, and see what it’s called (change it to something memorable) and replace shell above with your layer’s ID. Also, where I have 332, change that to the height of one of your panes.

What this code does (and it fires before the page is visible, that’s why it’s in the top function, not the bottom one) is gather up all of your panes and set them to a known X/Y location relative to their parent. Because the parent has Overflow set to Hidden, the panes disappear from the page. Then we set the height of the main layer so that the page won’t appear taller than its contents. The reason we do all this with JavaScript is so that anyone who comes to your site with JavaScript turned off will see ALL of your content at once. They won’t see a big nothing, as they would if you set all of this position business with CSS.

The final layer of the cake is to make the individual triggers work. This part is done with the Observer Action (part of Protaculous).

Select the first trigger element, and apply Observer to it. In the first Event field, add the word click. Click on the Function Body button and add the following code:

if($('red').positionedOffset().left == -700){
    resetAll();
    new Effect.Move('red',{x:700,y:0, duration:0.7});
    new Effect.Move(this,{x:20, y:-1, duration:0.4});
    this.setOpacity(0.99);
}

Now we are referring to a bunch of previous code. ‘red’ refers to the ID of the pane that we want to move. 700, again that’s how far to move the pane to the right — change that in both its negative and positive forms. And 20 and -1 are the move of the trigger element. Adjust all to fit your layout and desired animation.

One last thing you must do to the trigger is to apply a classname to it. Freeway doesn’t make this easy, you will need to use the Extended dialog for this. With the trigger element selected, choose Item > Extended from the main menu. Click on the < div > segment of the dialog, then click new, and enter

class
tab

in the Name and Value fields, respectively. While you’re in there, you can move over to the < div:style > segment and add

cursor
pointer

so the “finger” will appear when you hover over the trigger.

Now repeat for each of the trigger elements, adjusting the name of your desired target in the script as you do.

Preview in a browser, and see what (if anything) happens. The very best way to start debugging this (if it doesn’t work out of the box) is to use Firefox with the FireBug extension installed. This will give you line-level error reports and point out what’s gone wrong. As with anything JavaScript related, the actual error will probably result from a typo or case-sensitivity error. Every detail matters in this sort of thing! If you can’t figure it out, then post a link to your page on a public server, and one of us will probably be able to help.

It is critical that you set your Publish preferences to More Readable if you want help, otherwise you will just be making more business for my wife, the eye doctor.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And here it is online http://deltadzine.net/test/ttt.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And the original thread http://freewaytalk.net/thread/view/39893#m_39924


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

thanks everyone, will get cracking.

Cheers

Pete


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi,

can anyone explain the ScriptyAccordion action to me. I’m trying everycombination but no drop down menus are appearing. just have the lines of text in a vertical line when I preview.

Cheers

Pete


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s really quite simple.
Has your enclosing html box got the action applied to it?
Then make sure you have your triggers set up properly, i.e. h2 as the trigger and divs as the content, or other combinations.
This should probably go in a thread of its own, you may get more answers.
I had a more complicated problem yesterday that has now been resolved, but in the process Walter Davis spelled everything out.
See my thread from yesterday ‘Accordian and floats/pictures’
That should help.
Failing that, Walter is likely to respond - he is the man!!!

Good luck

Tony


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Have you gone through the steps here?

http://scripty.walterdavisstudio.com/accordion

Walter

On Jan 13, 2010, at 1:15 PM, Peter Walsh wrote:

Hi,

can anyone explain the ScriptyAccordion action to me. I’m trying
everycombination but no drop down menus are appearing. just have the
lines of text in a vertical line when I preview.

Cheers

Pete


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter

I’ve gone through the steps at your link, but it just doesn’t seem to work. I know I’m missing something simple.

is it possible to email me an example freeway pro page with it applied so I can take a look at settings?

Cheers

Peter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s a blue link in the upper-right corner of the demo page which
will give you just that.

Walter

On Feb 2, 2010, at 11:24 AM, Peter Walsh wrote:

Hi Walter

I’ve gone through the steps at your link, but it just doesn’t seem
to work. I know I’m missing something simple.

is it possible to email me an example freeway pro page with it
applied so I can take a look at settings?

Cheers

Peter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter I’ve tried the link but i just get a page of code. I’m browsing using safari. I’ll try in firefox

Could you check the download

cheers

Peter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

just downloaded it using firefox.

will check it out and let you know how I get on.

Cheers

Peter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

I’ve managed to get it working, but it only shows one line of the drop down menu under projects.

I’ve seperated the lines with an option return instead of a normal return.

I’ve uploaded the example at the link below with a pic to the side of it on how it should look. pls ignore the color of the screengrab, its from another page.

menu starts with

home
projects

http://www.sarahotoole.com/exhibition/index.html

cheers

Peter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options