Awesome Bubble Navigation with jQuery

In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. […]

From our sponsor: Sign up for Mailchimp today.

In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect.

Ok, so let’s get started.

The Markup

The HTML will consist of a main div that we will give the class navigation and the id nav. Inside of the main div we will have the navigation items:

<div class="navigation" id="nav">
	<div class="item user">
		<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
		<a href="#" class="icon"></a>
		<h2>User</h2>
		<ul>
			<li><a href="#">Profile</a></li>
			<li><a href="#">Properties</a></li>
			<li><a href="#">Privacy</a></li>
		</ul>
	</div>
	<div class="item home">
		<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
		<a href="#" class="icon"></a>
		<h2>Home</h2>
		<ul>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	...
</div>

As an example, we just show the first two items here. As you can see, we give the inner divs two classes: item and the name of the adapted class for that navigation item, like “user” or “home”. This way, we can address all inner elements accordingly. In this case, we want to address the link element with the class “icon” according to those classes, as you will be able to see in the CSS.

Further elements inside of the item element are the image for the bubble, the icon as link element, the heading and the list of links.

The CSS

Let’s take a look at the styling. First, let’s define some general styles for the whole thing:

.navigation{
    margin: 0px auto;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1.4px;
}

Now, we will use absolute positioning for the item:

.navigation .item{
    position:absolute;
}

Since we gave the div two classes, we will now define the respective positions for each navigation item. You see, when applying two classes we add both property sets to the element.

.user{
    top:125px;
    left:110px;
}
.home{
   top:50px;
   left:360px;
}
.shop{
   top:90px;
   left:625px;
}
.camera{
   top:230px;
   left:835px;
}
.fav{
   top:420px;
   left:950px;
}

The link elements of the icons will have the following general style:

a.icon{
    width:52px;
    height:52px;
    position:absolute;
    top:0px;
    left:0px;
    cursor:pointer;
}

And we can again define each icon of the respective element:

.user a.icon{
    background:transparent url(../images/user.png) no-repeat 0px 0px;
}
.home a.icon{
    background:transparent url(../images/home.png) no-repeat 0px 0px;
}
.shop a.icon{
    background:transparent url(../images/shop.png) no-repeat 0px 0px;
}
.camera a.icon{
    background:transparent url(../images/camera.png) no-repeat 0px 0px;
}
.fav a.icon{
    background:transparent url(../images/fav.png) no-repeat 0px 0px;
}

Since we are using a sprite image for each icon, we can simply define the “hover” class as follows:

.navigation .item a.active{
    background-position:0px -52px;
}

The circle image will have the following style:

.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}

The content element, like the heading and the link list will be styled as follows:

.item h2{
    position:absolute;
    width:147px;
    height:52px;
    color:#222;
    font-size:18px;
    top:0px;
    left:52px;
    text-indent:10px;
    line-height:52px;
    text-shadow:1px 1px 1px #fff;
    text-transform:uppercase;
}
.item h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.item ul{
    list-style:none;
    position:absolute;
    top:60px;
    left:25px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}

With the white text-shadow of the link element, we can create an engraved effect.
Ok, let’s add some JavaScript.

The JavaScript

The JavaScript is pretty straightforward. First, add this to your HTML code right before the closing body tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

The idea is to let the bubble image appear when we hover over a navigation item. We do that by animating the width, height, the top and the left. Since we want the bubble to appear slightly above the icon, we need to position it more to the left and more to the top. We “pull” it up and left by using negative positioning. We also make it fade in by changing its opacity to 1 (line 6-11). The “easeOutBack” comes from the jQuery Easing Plugin and create a nice easing effect (line 12).

When the animation finishes, we make the list element fade in (line 13).

We also get the first link element inside of the item div and the heading, and add the class “active” to them, which will change their appearance (line 16).

<script type="text/javascript">
	$(function() {
		$('#nav > div').hover(
		function () {
			var $this = $(this);
			$this.find('img').stop().animate({
				'width'     :'199px',
				'height'    :'199px',
				'top'       :'-25px',
				'left'      :'-25px',
				'opacity'   :'1.0'
			},500,'easeOutBack',function(){
				$(this).parent().find('ul').fadeIn(700);
			});

			$this.find('a:first,h2').addClass('active');
		},
		function () {
			var $this = $(this);
			$this.find('ul').fadeOut(500);
			$this.find('img').stop().animate({
				'width'     :'52px',
				'height'    :'52px',
				'top'       :'0px',
				'left'      :'0px',
				'opacity'   :'0.1'
			},5000,'easeOutBack');

			$this.find('a:first,h2').removeClass('active');
		}
	);
	});
</script>

On mouse out, i.e. when we leave the navigation item, we revert the actions and make the list and the bubble disappear again. We also remove the active class from the icon element and the heading.

If you are an IE user you might have noticed that the bubble looks kind of weird (and the other things look like crap, too… no CSS3 properties). I figure that has something to do with the transparency of the image and the animation. I have no idea how a solution might look for that… maybe this is a good start.

And that’s it! I hope you enjoyed the tutorial and found it useful!

Message from Testkinglearn jQuery with testking mcdba online course. Get testking mcp design tutorials with expert testking mcdst study guides to learn how to create stunning bubble navigation injQuery.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 62

Comments are closed.
  1. Awesome effect πŸ˜€ Jquery powa πŸ˜€ saved… need to try some examples in this web..thanks!

  2. I love the look in Firefox using -moz-border-radius and -webkit-border-radius but IE displays the effect poorly.

  3. @Ben Yes, it’s really a shame that we cannot apply these properties in IE (yet).

    @Joel Thanks! We’ll try to get even hotter πŸ™‚

    @Nick Sorry, but we currently just do jQuery πŸ™‚ But maybe you can find some inspiration in David’s works: http://davidwalsh.name/

    Thanks for all the great comments!

  4. The effect is awesome πŸ™‚ I love this. It’s great to applied this effect to the front page of website. Thank you very much.

  5. Would it be possible to achieve this effect with a LI based markup (instead of using H2 for the top level nav)?

  6. @Walter You can have a list with all the top nav items that are currently h2s and add the list of links as a sublist. You would have to tweak the JS a bit, but surely that’s possible. Cheers, ML

  7. “Awesome” – was my thought ;o)

    Really nice work with clean markup and easy javascript lines.

    Nice one.

    ubuntu administrator

  8. It works better on Chrome, at least for me on FF it frezze’s a litle at beggining and at IE it sucks :/

  9. Yeah, I guess we have to wait for IE9 in order for it to look nice…
    Cheers, ML

  10. Thanks for an awesome tutorial.
    I found a solution to make make it look much better in IE (with no impact in FF). I removed the transparency on the background images for the menu and changed the opacity from 1.0 to 0.7 in the hover function.
    $this.find(‘img’).stop().animate({
    ‘width’ :’199px’,
    ‘height’ :’199px’,
    ‘top’ :’-25px’,
    ‘left’ :’-25px’,
    ‘opacity’ :’0.7′
    }

    Work pretty good πŸ™‚

  11. It’s awesome but doesn’t work in IE. I am waiting for Flash to go away, but the fact remains coding it like this still takes much longer. You could probably create it half the time in Flash, with an alternate html list for SEO.

  12. It really very nice JQuery technique you define here. I am gonna using into my website, except I could able to correct the Fetal Error.
    Thanks Guys keep it up.

  13. Thanks a lot.. i will take this tutorial to my note.. πŸ™‚ really awesome.

  14. Very nice and innovative. I’m using this idea and will be looking into a fix mentioned above for IE. Everyone slightly tech savvy uses FF, Chrome or Safari. Alas, as we all know most of our clients and their customers are not tech savvy.

  15. Whole component is looking bad in IE8.. & also Rounded corners not displaying.. is there any script or solution for this…. ????

    • I illustration that has something to do with the transparence of the appearance and the vivification.

  16. Hey! Absolutely awesome tutorial I stumbled on. I have been trying to accomplish a similar thing, but with primarily designer background I was slowly getting less confident. I would like to use this design (bg change – some placement changes) for a fairly serious website I’m developing, wondering if it’s being used elsewhere or your thoughts on doing this?
    Please email me directly to continue this discussion!

  17. Wow, great work! a little help to display nicely the effect in ie8 change the background (bg_user.png, bg_xxxetc.png) images to non transparent png’s adapt the background color of the image to the background of your website and take the “back.png” out !

  18. Sorry for my English…
    I found a solucion for the img border en IE … but the list elements don’t fade in more.

    I put ‘border’:’none’, in the two like
    this.find(‘img’).stop().animate({
    ‘width’ :’199px’,
    ‘height’ :’199px’,
    ‘top’ :’-25px’,
    ‘left’ :’-25px’,
    ‘border’:’none’,
    ‘opacity’ :’1.0′

  19. That’s a great menu. I have one question, how can I change the space between the links on the
    Thanks

  20. That’s a great menu. I have one question, how can I change the space between the links on the ul parameter
    Thanks

  21. Hey I love this code!! It doesn’t work in IE though πŸ™ .. The circles ease in and out fine but no links within it to go to.. Is there any way to change this so it works on IE????

    Cheers,
    Jake

  22. Mary Lu, es fascinante la mente del ser humano, cΓ³mo imaginar este tipo de efectos. IE estΓ‘ obligado a seguir este tipo de tecnologΓ­as para que su navegador no quede obsoleto. Gracias por compartir este excelente trabajo.

    Mary Lu is fascinating the man’s mind, imagine how such effects. IE is required to follow this type of technology that your browser does not obsolete. Thank you for sharing this excellent work.

  23. I wonder, Can I put the sub menus as bubbles, popping out from the main bubble.. ?
    Something like google wonder wheel ?