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

Discussion in 'Web Design and Development' started by HarryPot, Aug 10, 2012.

  1. HarryPot macrumors 6502a

    Joined:
    Sep 5, 2009
    #1
    How do you make the upper menu were you select what Mac, Applications, Accessories, etc.?

    LINK

    Is it pure CSS?

    Thanks for any help.:)
     
  2. indubitably macrumors newbie

    Joined:
    Jun 18, 2010
    #2
    Its Javascript.
    Google "safari inspect element" to learn how to easily find out things like that from within safari.
     
  3. HarryPot thread starter macrumors 6502a

    Joined:
    Sep 5, 2009
  4. Hexiii macrumors 65816

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #4
    You might find a way to do this using CSS3 or there's an easier way to do it with CSS2 too, but you would have to reload the page.
     
  5. mwilloam macrumors newbie

    Joined:
    Apr 3, 2010
    #5
    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
     
  6. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
  7. HarryPot thread starter macrumors 6502a

    Joined:
    Sep 5, 2009
    #8
    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.
     
  8. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #9
    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
     
  9. HarryPot thread starter macrumors 6502a

    Joined:
    Sep 5, 2009
    #10
    So, I'm even more of a newbie!:p

    BTW, I found this tutorial. Which explains how to achieve what I was asking from the OP: http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/


    And one last question: is it recommended to use jQuery / Javascript in your webpages?
     
  10. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #11
    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.
     
  11. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #12
    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.
     

Share This Page