WebAppers

/ best free open source web resources /

Shopify

How to Create a Bubbly Navigation with jQuery

Posted · Category: License Free, Menu

Codrops has shared a tutorial about how to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. They will use the jQuery Easing Plugin for a even nicer effect.

However, if you are an IE user you might have noticed that the bubble looks kind of weird without CSS3 support. He has figured that has something to do with the transparency of the image and the animation, but there is no solution yet. Please use Google Chrome to view the demo for now.

bubble-navigation

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/BubbleNavigation/
License: License Free

3 Comments
  • http://www.tympanus.net/codrops Mary Lou

    Thank you WebAppers for including our Bubble Navigation! I just wanted to say that it also works fine with Firefox, Safari. Cheers, ML

  • http://www.artviper.net artViper

    Pretty nifty way of displaying links, but since it only works with CSS3 properly, it’s got no real use for the moment.

  • http://www.sedunia.com.my Steven

    Looks a little ugly in IE, otherwise it does looks good. Hopefully one day CSS3 + Javascript (+HTML5) can replace flash navigation.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons