ok so, I have a webpage that I am making for me and there is a link that is interfering with the hover part of the nav bar to show..it's this link "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" that's at the bottom of the html page that I have set up..when I take it away..the hover shows with the easing of the nav bar..but I want to have both the lavalamp feature and the ease scrolling effect when I click on the nav bar to slide down to the specifide part of the page..how do I go about this?
here is the index.html
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>- ***** ********* Home Page -</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>
<!-- Internet Explorer HTML5 enabling code: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
.clear {
zoom: 1;
display: block;
}
</style>
<![endif]-->
</head>
<body>
<section id="page"> <!-- Defining the #page section with the section tag -->
<header> <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<img src="img/logo.png" width="263" height="98">
<p style="font-size: 15px; font-weight: bold;">"The man who has no imagination</p>
<p style="font-size: 15px; font-weight: bold; margin-top: -15px; margin-left: 170px;">has no wings" - Muhammad Ali</p>
</hgroup>
<ul class="lavaLampNoImage" id="2">
<li><a href="#article1">Portfolio</a></li>
<li><a href="#article2">About me</a></li>
<li><a href="#article3">Contact</a></li>
</ul>
</header>
<section id="articles"> <!-- A new section with the articles -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>My Portfolio</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure> <!-- The figure tag marks data (usually an image) that is part of the article -->
<img src="img/img-1.png" width="620" height="340" />
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio. </p>
<a href="#" class="up">Go Up</a>
</div>
</article><!-- Article 1 end -->
<div class="line"></div>
<article id="article2"><!-- Article 2 start -->
<h2>My About Me Section</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<img src="img/picture-background.png" width="620" height="340" />
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio. </p>
</div>
<a href="#" class="up">Go Up</a>
</article><!-- Article 2 end -->
<div class="line"></div>
<article id="article3"><!-- Article 3 start -->
<h2>Contact Me</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<img src="img/picture-background.png" width="620" height="340" />
</figure>
<p>Please feel free to contact me through a message</p><br/>
<p><b>Fill in <u>all</u> fields with labeled with "*"</b></p>
<form style="padding: 20px;" name="htmlform" method="post" action="">
First Name:*<br />
<input type="text" name="first_name" maxlength="50" size="30"><br />
Last Name:*<br />
<input type="text" name="last_name" maxlength="50" size="30"><br />
Email:*<br />
<input type="text" name="email" maxlength="80" size="30"><br />
Message:*<br />
<textarea name="message" maxlength="1000" cols="25" rows="6"></textarea><br />
<input type="submit" value="Submit">
</form>
</div>
</article><!-- Article 3 end -->
</section>
<footer> <!-- footer section -->
<div class="line"></div>
<p>Copyright 2012</p> <!-- copyright -->
<a href="#" class="up">Go Up</a>
<a href="#" class="by">Web Design by **** *******</a>
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>Thanks for any help!!