How do you create this...

[mikki2]

hi, below is a link to Apples website. Scroll down to the center of the page and on the right there is a menu : "Recent Stories". It has sub-sections like "Small Business" "Science" "Games" etc...

heres the link: http://www.apple.com/startpage/

When you hover over these subsections, its "section block" scrolls up revealing its contents.

How do you do that? Is it flash or javascript or some other language? I checked their source code but it was all jumbled up and i didnt see any <script> tags around the section, so i'm guessing it isn't javascript (i may be wrong).

since i dont know what language is used, i thought I'd make this thread here...sorry if this is the wrong section.

Thanks for your help!

[mikki2]

UPDATE: i just disabled javascript on my browser and refreshed the page. That part of the menu loaded differently, so contrary to my first belief...it IS javascript controlled. I'm checking loads of sites with DHTML tutorials but i still can't find anything concerning what i'm looking for...

Any help will be appreciated...Thanks!

[blocblue]

Hi,
I've had a look and such an effect can be achieved with CSS or JS. Personally, I'd recommend the CSS option, as your websites usability wouldn't be dependent on the user having JS enabled.

I have found a CSS example of this on the following website:
http://www.cssplay.co.uk/menu/list_gallery.html

This is a great site for ideas, etc.

R.

[mikki2]

wow! i haven't gone deep into the site yet, but i have to say, the site looks great!

Thanks i'll keep diggin

[gerri-atrick]

You get that effect with spry accordion, a mixture of javascript and css, it is included with dreamweaver cs3 and once you get the hang of it it can be quite easy. i must admit i like the effect myself ;)

[MidiMagic]

Remember that some people are totally sick of hover effects. They are cute little tricks that are quickly becoming annoying, and they are accessibility problems for people with dyslexia. They will flee your page with the back button.

[blocblue]

Remember that some people are totally sick of hover effects. They are cute little tricks that are quickly becoming annoying, and they are accessibility problems for people with dyslexia. They will flee your page with the back button.

MidiMagic, I agree with your comment regarding accessibility - some users may struggle to use the hover feature, although by adding a small piece of javascript, the div could be made to remain visible, until another 'tab' from the same series is hovered over.

I disagree that people with dyslexia will have an issue using this - there are many forms of dyslexia, however this would be a debate for another time and place. Anyway, if someone with a disability or accessibility issue can click on a web link, or on the submit button for a form for example, then they could use this feature.

And finally, users don't like waiting for webpages to load. Internet connections have never been faster, yet users have never been more impatient. Therefore any space saving trick a designer can utilise to save the user from clicking a link to a new page, that is a trick well worth using. Thats one reason why Ajax is so popular - that and the fact its cool :)

R

[MidiMagic]

You can disagree all you want, but I have this problem myself. It normally doesn't bother me, unless there is moving content.

The problem is that the moving content clears the equivalent of a text buffer in the minds of some dyslexics. They then have to READ THE PAGE AGAIN, after the item moves or expands.

I would rather wait for a page to load than have to read the page multiple times. Or better yet, I would rather scroll through the larger images.

Some people are just TOO impatient. They should be required to turn a crank 100 times before the image appears.

[ronniestamps]

My $.02
Use flash and xml. The flash file remains constant and ALL content can be changed by editing a single xml file, no matter how many pages you have that menu on. This makes maintaining very easy. Go to flashden.net, you can find exactly what you are looking for, spending maybe $5.

[mikki2]

@ronniestamps
I wish I could do that, but unfortunately i don't know flash and I'm just starting on XML.
But thanks, I'll keep that in mind.