How to achieve this design? (From Apple.com)

HarryPot

macrumors 6502a
Original poster
Sep 5, 2009
941
359
How do you make the upper menu were you select what Mac, Applications, Accessories, etc.?

LINK

Is it pure CSS?

Thanks for any help.:)
 

indubitably

macrumors newbie
Jun 18, 2010
17
0
Its Javascript.
Google "safari inspect element" to learn how to easily find out things like that from within safari.
 

mwilloam

macrumors newbie
Apr 3, 2010
25
0
Well it's Javascript and CSS transitions/translations. At least on browsers that support it. Javascript detects the mouse click and changes CSS values. Then CSS transitions power the animation effect. If the browser doesn't support CSS transitions then there is a fallback to have Javascript alone transition the elements.

I recommend:
Jquery + CSS transitions + unsupported-fallback
 

HarryPot

macrumors 6502a
Original poster
Sep 5, 2009
941
359
Thanks a lot!:)

I'll need to start learning better Javascript. Currently I kind of know HTML and CSS, but I'm a complete noob with Java.
 

960design

macrumors 68030
Apr 17, 2012
2,878
852
Destin, FL
...I'm a complete noob with Java.
Just a quick note; java != javascript.

-Java is an interrupted class based, object oriented, multi-platform programming language that would take a year to get the hang of and a decade to write fluently ( I've been writing it since 1998 and still struggle keeping up with all the libraries and fast pace of development ). Java is mainly used for backend work, although it has been slowing clawing its way towards the frontend in popularity as well.

-Javascript is a very powerful prototype based scripting language, named to take advantage of java's popularity at the time. Javascript is mainly used for web develpment. It would take you a weekend to get the gist of it and 10 decades to write fluently ( there are awesome libraries that shorten this fluency curve greatly: jQuery, Mootools, Prototype, ect ).

just me
 

olup

macrumors 6502
Oct 11, 2011
374
36
And one last question: is it recommended to use jQuery / Javascript in your webpages?
yes because it not only adds interactivity(slideshows, audio/video players) to your webpage, but also to validate data that users put into form fields, when filling out a contact form.
 

960design

macrumors 68030
Apr 17, 2012
2,878
852
Destin, FL
And one last question: is it recommended to use jQuery / Javascript in your webpages?
Absolutely. Javascript makes your page come alive. A lot of the new HTML5 / CSS3 stuff duplicates javascript actions. When I'm building a page for a client I always try to use HTML5/CSS3 first, if I find that they don't fill the need I'll throw in some javascript.

HTML5/CSS3 is still not safe across all browsers ( actually just IE sucks, although IE9 and IE10beta do a very good job, the bad thing is that you certainly cannot expect a user still using IE to upgrade to the latest version ) whereas javascript works very well across browsers.

I've given up hand holding users. Unless the client absolutely requires it, I pop up a javascript model asking the user to upgrade their browser or download a web standards compliant one.

just me

PS just remember users can turn off javascript, don't rely on it to protect your server/data. Javascript is only there to help the user NOT to help you. You must sanitize everything before it hits your database from the server side.