"
Team:GeorgiaState/Header
From 2011.igem.org
| Line 1: | Line 1: | ||
__NOTOC__<html lang="en"> | __NOTOC__<html lang="en"> | ||
| - | < | + | </style> |
| + | <script type="text/javascript"> | ||
| + | $().ready(function() { | ||
| + | $('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'}); | ||
| + | }); | ||
| + | </script> | ||
| + | </head> | ||
| + | <body> | ||
| + | <h1>Smooth Image Menu For Jquery</h1> | ||
<div class="jimgMenu"> | <div class="jimgMenu"> | ||
<ul> | <ul> | ||
| Line 7: | Line 15: | ||
<li id="people"><a href="#">People</a></li> | <li id="people"><a href="#">People</a></li> | ||
<li id="nature"><a href="#">Nature</a></li> | <li id="nature"><a href="#">Nature</a></li> | ||
| + | |||
<li id="abstract"><a href="#">Abstract</a></li> | <li id="abstract"><a href="#">Abstract</a></li> | ||
<li id="urban"><a href="#">Urban</a></li> | <li id="urban"><a href="#">Urban</a></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
| - | + | <br style="clear:both"/><br /> | |
| - | + | <div class="description"> | |
| - | < | + | <p>A dynamic Menu allowing you to easily navigate any content visually, with a Mootools like effect through the power of Jquery javascript.</p> |
| - | + | </div> | |
| - | + | <hr style="width:92%;text-align:center;height:1px;border:1px;color:#e2e2e2;background-color:#e2e2e2;" /> | |
| - | + | </body> | |
| - | </ | + | </html> |
</script> | </script> | ||
Revision as of 13:19, 6 July 2011
Smooth Image Menu For Jquery
A dynamic Menu allowing you to easily navigate any content visually, with a Mootools like effect through the power of Jquery javascript.
</script>
<script type="text/javascript" src="https://www.student.gsu.edu/~bmehta2/jquery.js"></script>
<script type="text/javascript" src="https://www.student.gsu.edu/~bmehta2/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="https://www.student.gsu.edu/~bmehta2/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="https://www.student.gsu.edu/~bmehta2/jquery.kwicks-1.5.1.pack.js"></script>
<link href="https://www.student.gsu.edu/~bmehta2/jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<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
if ($(this).is(':animated')) {
$(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad", complete: "callback"});
} else {
// ease in quickly
$(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad", complete: "callback"});
}
}, function () {
// on hovering out, ease the element out
if ($(this).is(':animated')) {
$(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad", complete: "callback"})
} else {
// ease out slowly
$(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad", complete: "callback"});
}
});
}); </script>
