Killer Steampowered.com Fly Out Menu!

  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post December 20th, 2010, 3:47 pm

Okay, so I visited http://steampowered.com today for the first time and I was BLOWN away by how cool their fly-out menu is. I want to learn how to make something like this. Does anyone know of a good tutorial to get started with something like this?
Moderator Remark: fixed link
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 20th, 2010, 3:47 pm

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Joined: May 22, 2004
  • Posts: 3415
  • Loc: Richland, WA
  • Status: Offline

Post December 20th, 2010, 5:22 pm

Are you talking about the page turning? or what exactly?
#define NULL (::rand() % 2)
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post December 21st, 2010, 7:49 am

SpooF wrote:
Are you talking about the page turning? or what exactly?


Yes, I looked at the source code, but I'm not sure if they are powering this solely with CSS or if they are using Javascript as well.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post December 24th, 2010, 6:37 pm

Its almost all javascript. It looks like they're using CSS for a bit of the look and feel and the rest is JS. I assume Valve custom made that effect but there are plenty of plug-ins for the various JS libraries to do the same thing.

Here are a few for jQuery (my framework of choice) but you can find something similar for others as well.

http://builtbywill.com/code/booklet/
http://www.jpageflip.de/index_en.php
http://jpageflipper.codeplex.com/
http://blogs.sitepoint.com/2007/07/20/j ... ng-jquery/
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: ScottG and 153 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.