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. We will use the jQuery Easing Plugin for a even nicer effect. Ok, so let’s get started. The Markup The HTML will […]

View demoDownload source

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!

View demoDownload source

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.
Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 62

Comments are closed.
  1. 2

    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 !

  2. 3

    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′

  3. 5

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

  4. 6

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

  5. 7

    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

  6. 9

    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.

  7. 10

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

  8. 12

    Its possible remove sub-menu form the main menu and page open on the main button……???

  9. 15

    That really a amazing effct by Jquery, good tutorial! But i wonder here, can we replace the “” tag with image?

  10. 16

    Hello

    Congrats for the script :) How can i add pngfix in the easing? In IE stays really ugly :(

    Can anybody help?

  11. 19

    Thanks!!!

    I’m modifying,
    I hope I can use it for my website?

    Greetings from Germany
    I

  12. 20

    Different computer screen resolutions affect the spacing of the bubbles. Any way around this? I love this, but if all resolutions are different, I might have to scrap the idea. Thanks.

Comments are closed.