EverWeb Widgets

OSX Style Dock Navigation

The Apple OS X style dock uses the Social Icon set to create links to social media pages.
The HTML structure is a list of links.
Each link has a <span> for text which appears on hover above the icon.
The "Genie" effect on hover is created using CSS transform origin and scale.
The "dock" is fixed to the bottom of the browser/device screen.

OSX Dock Navigation

As can be seen from the screenshot, when the page is viewed on an iPad, the icon expands with a tap and the text appears. A second tap will open the linked page.

Info

The stars are made using the Elements Background Tile widget with a small 200px square background image repeated on the X and Y axis.
The drop down box and its toggle button use a few lines of javascript in conjunction with jQuery to open/close it.

  • Widgets
  • Instagram
  • Google +
  • Twitter
  • LinkedIn
  • Flickr
  • Pinterest

Social Icon Genie Effect