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:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 62

Comments are closed.
  1. 1

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

  2. 2

    @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

  3. 3

    “Awesome” – was my thought ;o)

    Really nice work with clean markup and easy javascript lines.

    Nice one.

    ubuntu administrator

  4. 5

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

  5. 6

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

  6. 9

    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 🙂

  7. 10

    this is a really fresh idea for navigation. very inspiring, nice work!

  8. 13

    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.

  9. 14

    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.

  10. 15

    Thanks a lot.. i will take this tutorial to my note.. 🙂 really awesome.

  11. 16

    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.

  12. 18

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

    • 19

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

  13. 20

    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!

Comments are closed.