Article / Blog

Create a Sliding Menu Background with jQuery

Feb 17th, 09 - Posted in Web Design, jQuery - 13 Comments

Normally when you mouse over a list of links, the text/background color might change or even the background image might switch to another image. In this tutorial I will show you how to take a normal list of links and add a hover effect so that the bullet image will slide out and another image will then slide in, thus creating an very cool subtle effect.

View Demo: Here

You will need to have a copy of jQuery and the backgroundPosition plugin.

Javascript

$('#nav a')
	.css( {backgroundPosition: "6px 6px"} )
	.mouseover(function(){
		$(this).stop()
			.animate(
				{backgroundPosition:"(-25px 6px)"},
				{duration:200})
			.animate(
				{backgroundPosition:"(-25px -23px)"},
				{duration:5})
			.animate(
				{backgroundPosition:"(6px -23px)"},
				{duration:200})
			})
	.mouseout(function(){
		$(this).stop()
			.animate(
				{backgroundPosition:"(-25px -23px)"},
				{duration:200})
			.animate(
				{backgroundPosition:"(-25px 6px)"},
				{duration:5})
			.animate(
				{backgroundPosition:"(6px 6px)"},
				{duration:200})
		})

CSS

ul#nav {
	border-top: 1px solid #dfdfdf;
}
 
ul#nav li {
	display: inline;
}
 
ul#nav li a {
	display: block;
	padding: 5px 10px 5px 27px;
	color: #556565;
	text-decoration: none;
	border-bottom: 1px solid #dfdfdf;
	background: url(images/nav-bg.gif) no-repeat 6px 6px;
}
 
ul#nav li a:hover {
	color: #2b5f1a;
	background-color: #e5f3d7;
}

HTML

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Downloads</a></li>
	<li><a href="#">Contact</a></li>
</ul>

7 Comments

Show/Hide
  1. Volkan TOKMAK
    8:37 am - Mar 5th, 09
    #

    good work mate… go on like that

  2. Matt
    9:11 am - Mar 5th, 09
    #

    @Volkan Thanks.

  3. T-Law
    6:39 pm - Apr 9th, 09
    #

    Great tutorial, thanks.

  4. james taylor
    6:47 pm - Nov 3rd, 09
    #

    nice but you need to but a .stop() in there to stop it going crazy when you hover over many items quickly.

  5. seo
    9:57 pm - Jan 6th, 10
    #

    thanx for codes..

  6. DS_Ohm
    2:46 am - Feb 26th, 10
    #

    Thanks. for this code

    but I found bug script error when run on IE8.

  7. DS_Ohm
    2:30 pm - Mar 2nd, 10
    #

    Now! I complete to used this plugin

    plz. downlaod new jquery.backgroundPosition.js

    http://plugins.jquery.com/project/backgroundPosition-Effect

6 Trackbacks

Show/Hide
  1. Title:
    +30 jQuery Eklentisi « Bay Bedava – Netten Başlıklar
    Date:
    7:23 pm - Jan 7th, 10
    Description:

    [...] Bu jQuery eklentisinde ise arkaplan resimine efekt vererek daha güzel gözükmesini sağlıyoruz. WEB SİTESİ – [...]

  2. Title:
    Sliding Menu Background
    Date:
    10:49 am - Feb 10th, 10
    Description:

    [...] Tutorial Tutorial Page [...]

  3. Title:
    JQuery uygulamaları « Blog Yaşamı
    Date:
    7:59 am - Feb 16th, 10
    Description:

    [...] Bu jQuery eklentisinde ise arkaplan resimine efekt vererek daha güzel gözükmesini sağlıyoruz. WEB SİTESİ – [...]

  4. Title:
    JQuery Uygulamaları « Birebir Paylaşım
    Date:
    6:18 am - Feb 17th, 10
    Description:

    [...] Bu jQuery eklentisinde ise arkaplan resimine efekt vererek daha güzel gözükmesini sağlıyoruz. WEB SİTESİ – [...]

  5. Title:
    Tweets that mention Create a Sliding Menu Background with jQuery » Digital Visions Queenstown -- Topsy.com
    Date:
    12:54 am - May 20th, 10
    Description:

    [...] This post was mentioned on Twitter by Christian González. Christian González said: Create a Sliding Menu Background with jQuery http://goo.gl/CQnm [...]

  6. Title:
    Agence Web Comevents » Tutoriel jQuery : Sliding Menu Background
    Date:
    5:35 pm - May 21st, 10
    Description:

    [...] au tutoriel Sliding Menu Background, vous pourrez donner aux puces de votre menu un effet web 2.0 à la sauce [...]

Post a Comment

Why not join the conversation? Don't have an avatar? You might want to consider getting one.

Tasty Web Bits

To celebrate the launch of the Digg iPhone App, Digg is giving away 14 custom iPads.

Smoking Apples is giving away a couple of licenses for AppZapper 2.

AppZapper 2 has been released, and is sporting a brand new, very delicious looking UI.

Envato’s new iPhone News and App Review site, iPhone.AppStorm has launched.

Win a copy of 1Password via Mac.Appstorm.

Very cool tutorial on creating a Textured Grungy 3D Type Design over at Blog.SpoonGraphics.