Member Avatar for 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!

  • 5 Contributors
  • 9 Replies
  • 106 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by mikki2
Member Avatar for 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!

Member Avatar for 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.

commented: Nice link +8
Member Avatar for 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

Member Avatar for 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 ;)

Member Avatar for 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.

Member Avatar for 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

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.