<!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=UTF-8" />
<title>Image Hover Move- simple and practical navigation or featured image jQuery plugin</title>
<link href="jimgMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script><script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<style type="text/css">
body1 {
margin:0;
padding:0;
color: #333;
font: normal 0.6em sans-serif,Arial;
background-color: #EDEDED;
background-image: url(images/bg1.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center top;
width: 100%;
overflow: hidden;
}
</style>
<!--slideshow settings-->
<script type="text/javascript">
$(document).ready(function () {
// find the elements to be eased and hook the hover event
$('div.jimgMenu ul li a').hover(function() {
// if the element is currently being animated (to a easeOut)...
if ($(this).is(':animated')) {
$(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
} else {
// ease in quickly
$(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
}
}, function () {
// on hovering out, ease the element out
if ($(this).is(':animated')) {
$(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"})
} else {
// ease out slowly
$(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"});
}
});
});
</script>
<!--end of slideshow settings-->
<!-- navigation Settings -->
<link rel="stylesheet" href="css/stylePop.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var thumbs = $("ul li img");
for (var i = 0, ii = thumbs.length; i < ii; i++){
if (thumbs[i].title && thumbs[i].title.length > 0)
{
var imgtitle = thumbs[i].title;
$(thumbs[i]).wrap('<div class="wrapper" />').
after('<div class=\'caption\'>' + imgtitle + '</div>').
removeAttr('title');
}
}
jQuery('.wrapper').hover(
function(){
jQuery(this).find('img').animate({opacity: ".6"}, 300);
jQuery(this).find('.caption').animate({top:"-85px"}, 300);
},
function(){
jQuery(this).find('img').animate({opacity: "1.0"}, 300);
jQuery(this).find('.caption').animate({top:"85px"}, 100);
}
);
});
</script>
<!-- The JavaScript -->
<script type="text/javascript">
jQuery(function() {
jQuery('#menu > li').hover(
function () {
var $this = $(this);
jQuery('a',$this).stop(true,true).animate({
'bottom':'-40px'
}, 300);
jQuery('i',$this).stop(true,true).animate({
'top':'-10px'
}, 400);
},
function () {
var $this = $(this);
jQuery('a',$this).stop(true,true).animate({
'bottom':'-95px'
}, 300);
jQuery('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
});
</script>
<!-- End of navigation Settings -->
</head>
<body>
<div class="container">
<ul id="menu">
<li>
<a href="index.html"><span class="title">Home</span>
<span class="description">Return to main menu</span>
</a>
</li>
<li>
<a href="about.html"><span class="title">About Us</span>
<span class="description">Learn more about us</span>
</a>
</li>
<li>
<a><span class="title">Menu</span>
<span class="description">View our daily menu</span>
</a>
</li>
<li>
<a><span class="title">Catering</span>
<span class="description">View our catering options</span>
</a>
</li>
<li>
<a><span class="title">Contact</span>
<span class="description">Contact us</span>
</a>
</li>
<li>
<a><span class="title">Celebrities </span>
<span class="description">View celebrity guests pics & vids</span>
</a>
</li>
</ul>
</div>
<div class="jimgMenu">
<ul>
<li class="landscapes"><a href="#nogo">Landscapes</a></li>
<li class="people"><a href="#nogo">People</a></li>
<li class="nature"><a href="#nogo">Nature</a></li>
<li class="abstract"><a href="#nogo">Abstract</a></li>
<li class="urban"><a href="#nogo">Urban</a></li>
</ul>
</div>
</body>
</html>
Help Please someone