...

View Full Version : jQuery Smooth Navigation Menu



Abbster22
10-07-2010, 07:10 AM
Right now, I am trying to figure out how to get this affect. I want to start out with four thumbnails with different images in them, as shown in this image:
http://gds.parkland.edu/student/fall10/gds220/ashipley/p2/mockups/splash-initial.jpg

Then, I want the thumbnails to all expand at once to a designated length as I hover over each thumbnail. For each of the corresponding images being hovered over, the images in the other thumbnails will change images. For example, the second thumbnail (the closest one to the top on the right side) will be hovered, all of the images will then change to a specific background to the corresponding thumbnail I pick once I create the images.
http://gds.parkland.edu/student/fall10/gds220/ashipley/p2/mockups/splash-hoveredoverlink.jpg

Here is what I have so far.
http://abrielshipley.com

I am still messing with it a bit.

If anyone needs further explanation, please let me know!

harbingerOTV
10-07-2010, 06:46 PM
well this is a start. it's a little jerky. i think the stop() s need to be re-looked at as the animating can get jerky if you mouse through them to quickly. Maybe someone else can give that a try.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>box do-hicky</title>
<style type="text/css">
body{
font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}

.box1, .box2, .box3, .box4 {
position: absolute;
width: 140px;
height: 140px;
}


.box1 {
background-color: #de9;
top: 20px;
left: 200px;
}

.box2 {
background-color: #36c;
top: 180px;
left: 600px;
}

.box3 {
background-color: #ed3;
top: 340px;
left: 200px;
}

.box4 {
background-color: #6dd;
top: 500px;
left: 600px;
}

</style>

</head>
<body>
<div class="box box1"><div></div></div>
<div class="box box2"><div></div></div>
<div class="box box3"><div></div></div>
<div class="box box4"><div></div></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
/* functions */
$(function() {
$('.box').each(function() {
var $this = $(this);
$.data(this, 'css', {
top: $this.css('top'),
left: $this.css('left'),
width: $this.css('width'),
background: $this.css('background-color')
});
});
});

function restore() {
$('.box').each(function() {
var orig = $.data(this, 'css');
$(this).animate({
top: orig.top,
left: orig.left,
width: orig.width,
backgroundColor: orig.background
});
});
}

/* box 1 */
function boxHover(){
$('.box1').stop().animate({'top' : '20px', 'left' : '100px', 'width' : '600px'});
$('.box2').stop().animate({'top' : '180px', 'left' : '100px', 'width' : '600px'});
$('.box3').stop().animate({'top' : '340px', 'left' : '100px', 'width' : '600px'});
$('.box4').stop().animate({'top' : '500px', 'left' : '100px', 'width' : '600px'});
}

function box1master(){
$('.box').animate({backgroundColor: '#de9'});
}
function box2master(){
$('.box').animate({backgroundColor: '#36c'});
}
function box3master(){
$('.box').animate({backgroundColor: '#ed3'});
}
function box4master(){
$('.box').animate({backgroundColor: '#6dd'});
}


$(document).ready(function(){

$('.box1').hover(function(){
boxHover();
box1master();
}, function(){
restore();
});

$('.box2').hover(function(){
boxHover();
box2master();
}, function(){
restore();
});

$('.box3').hover(function(){
boxHover();
box3master();
}, function(){
restore();
});

$('.box4').hover(function(){
boxHover();
box4master();
}, function(){
restore();
});

});
</script>
</body>
</html>

Abbster22
10-07-2010, 07:11 PM
I will definitely retake a look at the stop() function (and if someone else would like to help fix that little glitch). Otherwise, it seems to work exactly the way I want it to! :D I never would've thought about using divs!

I was wondering if I could simply take this and center it within a div? Also, for replacing the images, I believe I have to go within each boxmaster() function to change each box?

I haven't experimented very much with JQuery but it has been really easy for me to pick up thus far.

harbingerOTV
10-07-2010, 10:36 PM
okay, this works better



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>box do-hicky</title>
<style type="text/css">
body{
font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
text-align: center;
}

#container {
width: 600px;
border: 1px solid #ddd;
position: relative;
margin: 20px auto;
text-align: left;
overflow: hidden;
}

.box1, .box2, .box3, .box4 {
width: 140px;
height: 140px;
}

.box1 {
background-color: #de9;
margin-bottom: 20px;
float: left;
clear: both;
}

.box2 {
background-color: #36c;
margin-bottom: 20px;
float: right;
clear: both;
}

.box3 {
background-color: #ed3;
margin-bottom: 20px;
float: left;
clear: both;
}

.box4 {
background-color: #6dd;
float: right;
clear: both;
}

</style>

</head>
<body>

<div id="container">
<div class="box box1"><div></div></div>
<div class="box box2"><div></div></div>
<div class="box box3"><div></div></div>
<div class="box box4"><div></div></div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">
/* functions */
$(function() {
$('.box').each(function() {
var $this = $(this);
$.data(this, 'css', {
width: $this.css('width'),
background: $this.css('background-color')
});
});
});

function restore() {
$('.box').each(function() {
var orig = $.data(this, 'css');
$(this).animate({
width: orig.width
},{queue:false});
$(this).css({backgroundColor: orig.background});
});
}

/* box 1 */
function boxHover(){
$('.box').stop().animate({'width' : '600px'},{queue:false});
}

function box1master(){
$('.box').css({backgroundColor: '#de9'});
}
function box2master(){
$('.box').css({backgroundColor: '#36c'});
}
function box3master(){
$('.box').css({backgroundColor: '#ed3'});
}
function box4master(){
$('.box').css({backgroundColor: '#6dd'});
}


$(document).ready(function(){

$('.box1').hover(function(){
boxHover();
box1master();
}, function(){
restore();
});

$('.box2').hover(function(){
boxHover();
box2master();
}, function(){
restore();
});

$('.box3').hover(function(){
boxHover();
box3master();
}, function(){
restore();
});

$('.box4').hover(function(){
boxHover();
box4master();
}, function(){
restore();
});

});
</script>
</body>
</html>

Abbster22
10-07-2010, 10:51 PM
Thank you so much for all the help you've been giving me!

I've been messing with the previous code you gave me and it's been working great so far! :D My only issue is when I try to get the images to change, they don't change back to the original background and the top picture when scrolled on top disappears. Here is what I've gotten so far:
www.abrielshipley.com/template/index4

How can I apply the changes to the code in what I have right now?

I removed the old file that I was messing with, which is now at
www.abrielshipley.com/demo

harbingerOTV
10-08-2010, 12:24 AM
Here's the changes I made:

removed:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

That was used for animating the color background transitions and it's not need this time around.


i changed:

function restore() {
$('.box').each(function() {
var orig = $.data(this, 'css');
$(this).animate({
left: orig.left,
width: orig.width,
background: orig.background
});
});
}


to this:

function restore() {
$('.box').each(function() {
var orig = $.data(this, 'css');
$(this).animate({
left: orig.left,
width: orig.width
});
$(this).css({background: orig.background});
});
}
Notice how the background-image was inside the animate function. It can't animate images like that. That's why the images were not changing back.

Changed:

function boxHover(){
$('.box1').stop().animate({'width' : '596px'});
$('.box2').stop().animate({'left' : '0px', 'width' : '596px'});
$('.box3').stop().animate({'width' : '596px'});
$('.box4').stop().animate({'left' : '0px', 'width' : '596px'});
}


to:

function boxHover(){
$('.box1').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
$('.box2').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
$('.box3').stop().animate({'width' : '596px'},{queue:false});
$('.box4').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
}

the "queue: false" I just learned today actually ;) It clears the animating queue so that quickly rolling back and forth doesn't leave your divs sliding after you stop.

And this part took me a minute. The first image disappearing.

in your CSS you have:

.box1 {
background-image: url(images/zatgun-link.jpg);
/*top: 20px;
left: 200px;*/
}

in your function you had:

function box1master(){
$('.box1').css({'background-image' : 'url(images/zatgun_link.jpg)'});
$('.box2').css({'background-image' : 'url(images/zatgun_midtop.jpg)'});
$('.box3').css({'background-image' : 'url(images/zatgun_midbottom.jpg)'});
$('.box4').css({'background-image' : 'url(images/zatgun_bottom.jpg)'});
}

I totally missed this. You have an underscore in the image name where as the CSS is calling the image with a hyphen.

So it's been changed to:

function box1master(){
$('.box1').css({'background-image' : 'url(images/zatgun-link.jpg)'});
$('.box2').css({'background-image' : 'url(images/zatgun_midtop.jpg)'});
$('.box3').css({'background-image' : 'url(images/zatgun_midbottom.jpg)'});
$('.box4').css({'background-image' : 'url(images/zatgun_bottom.jpg)'});
}

so here's those edits to your page:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>box do-hicky</title>
<base href="http://www.abrielshipley.com/template/" />
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="font.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{
font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}

#navigation {
width: 596px;
height: 460px;
margin: 0 auto;
}

.box1, .box2, .box3, .box4 {
position: relative;
width: 85px;
height: 66px;
margin-bottom: 66px;
}


.box1 {
background-image: url(images/zatgun-link.jpg);
/*top: 20px;
left: 200px;*/
}

.box2 {
background-image: url(images/bryan_link.jpg);
/*margin-top: 85px;*/
left: 511px;
}

.box3 {
background-image: url(images/galleries_link.jpg);
/*margin-top: 170px;
left: 200px;*/
}

.box4 {
background-image: url(images/contact_link.jpg);
left: 511px;
/*margin-top: 170px;
margin-left: 511px;*/
}

</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<div class="box box1"><div></div></div>
<div class="box box2"><div></div></div>
<div class="box box3"><div></div></div>

<div class="box box4"><div></div></div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">
/* functions */
$(function() {
$('.box').each(function() {
var $this = $(this);
$.data(this, 'css', {
left: $this.css('left'),
width: $this.css('width'),
background: $this.css('background-image')
});
});
});

function restore() {
$('.box').each(function() {
var orig = $.data(this, 'css');
$(this).animate({
left: orig.left,
width: orig.width
});
$(this).css({background: orig.background});
});
}

/* box 1 */
function boxHover(){
$('.box1').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
$('.box2').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
$('.box3').stop().animate({'width' : '596px'},{queue:false});
$('.box4').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
}

function box1master(){
$('.box1').css({'background-image' : 'url(images/zatgun-link.jpg)'});
$('.box2').css({'background-image' : 'url(images/zatgun_midtop.jpg)'});
$('.box3').css({'background-image' : 'url(images/zatgun_midbottom.jpg)'});
$('.box4').css({'background-image' : 'url(images/zatgun_bottom.jpg)'});
}
function box2master(){
$('.box1').css({'background-image' : 'url(images/bryan_top.jpg)'});
$('.box2').css({'background-image' : 'url(images/bryan_link.jpg)'});
$('.box3').css({'background-image' : 'url(images/bryan_midbottom.jpg)'});
$('.box4').css({'background-image' : 'url(images/bryan_bottom.jpg)'});
}
function box3master(){
$('.box1').css({'background-image' : 'url(images/galleries_top.jpg)'});
$('.box2').css({'background-image' : 'url(images/galleries_midtop.jpg)'});
$('.box3').css({'background-image' : 'url(images/galleries_link.jpg)'});
$('.box4').css({'background-image' : 'url(images/galleries_bottom.jpg)'});
}
function box4master(){
$('.box1').css({'background-image' : 'url(images/contact_top.jpg)'});
$('.box2').css({'background-image' : 'url(images/contact_midtop.jpg)'});
$('.box3').css({'background-image' : 'url(images/contact_midbottom.jpg)'});
$('.box4').css({'background-image' : 'url(images/contact_link.jpg)'});
}

$(document).ready(function(){

$('.box1').hover(function(){
boxHover();
box1master();
}, function(){
restore();
});

$('.box2').hover(function(){
boxHover();
box2master();
}, function(){
restore();
});

$('.box3').hover(function(){
boxHover();
box3master();
}, function(){
restore();
});

$('.box4').hover(function(){
boxHover();
box4master();
}, function(){
restore();
});

});
</script>
</body>
</html>


p.s. your link is wrong, you forgot the ".html" so it should be:

http://www.abrielshipley.com/template/index4.html

;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum