More bug fixes. More efficient now.

gajdy · Mar 8, 2010 · cc6066b · cc6066b
1 parent 00add66
commit cc6066b
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 22 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,37 +1,38 @@
+#container {
+ width: 1000px;
+ margin: 100px auto;
+}
 ul, li {
  margin: 0;
  padding: 0;
 }
 
 #blob {
  background: #0b2b61;
- background: -moz-linear-gradient(top, #0b2b61, #1153c0);
- background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-
  border-right: 1px solid #0059ec;
  border-left: 1px solid #0059ec;
  position: absolute;
  z-index: 1;
- padding: 0 5px;
  top: 0;
+ background: -moz-linear-gradient(top, #0b2b61, #1153c0);
+ background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
  -moz-border-radius: 4px;
--moz-box-shadow: 2px 3px 10px #011331;
--webkit-box-shadow: 2px 3px 10px #011331;
+ -webkit-border-radius: 4px;
+ -moz-box-shadow: 2px 3px 10px #011331;
+ -webkit-box-shadow: 2px 3px 10px #011331;
 }
 
 #nav {
  position: relative;
  background: #292929;
-
  float: left;
 }
 
 #nav li {
  float: left;
  list-style: none;
-border-right: 1px solid #4a4a4a;
-border-left: 1px solid black;
-
+ border-right: 1px solid #4a4a4a;
+ border-left: 1px solid black;
 }
 
 #nav li a {
@@ -45,8 +46,4 @@ border-left: 1px solid black;
  text-decoration: none;
  padding: 30px 45px;
  width: 100%;
-}
-
-#selected {
-
-}
+}
diff --git a/index.html b/index.html
@@ -8,16 +8,23 @@
 </head>
 <body>
 
-<ul id="nav">
- <li id="selected"><a href="index.html">Home</a></li>
- <li><a href="about.html">About</a></li>
- <li><a href="#">More About My Portfolio</a></li>
- <li><a href="#">Contact</a></li>
-</ul>
+<div id="container">
+
+ <ul id="nav">
+ <li id="selected"><a href="index.html">Home</a></li>
+ <li><a href="about.html">About</a></li>
+ <li><a href="#">More About My Portfolio</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+
+</div>
 
 <script src="http:https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http:https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
+<script type="text/javascript" src="js/jquery.spasticNav.js"></script>
 
-<script type="text/javascript" src="js/scripts.js"></script>
+<script type="text/javascript">
+ $('#nav').spasticNav();
+</script>
 </body>
 </html>
diff --git a/js/jquery.spasticNav.js b/js/jquery.spasticNav.js
@@ -0,0 +1,59 @@
+(function($) {
+
+ $.fn.spasticNav = function(options) {
+
+ options = $.extend({
+ blobOverlap : 10,
+ transitionSpeed : 1500,
+ reset : 4000,
+ color : '#0b2b61'
+ }, options);
+
+ return this.each(function() {
+ var nav = $(this),
+ currentPageItem = $('#selected', nav),
+ blob,
+ reset;
+
+ $('<li id="blob"></li>').css({
+ width : currentPageItem.outerWidth(),
+ height : currentPageItem.outerHeight() + options.blobOverlap,
+ left : currentPageItem.position().left - 1,
+ top : currentPageItem.position().top - options.blobOverlap / 2,
+ backgroundColor : options.color
+ }).appendTo('#nav');
+
+ blob = $('#blob');
+
+ nav.hover(function() {
+ clearTimeout(reset);
+ $(this).mousemove(function(e) {
+ if ( $(e.target).is('a') ) {
+ blob.animate(
+ {
+ left : $(e.target).position().left - 1,
+ width : $(e.target).width()
+ },
+ {
+ duration: 1500,
+ easing : 'easeOutElastic',
+ queue : false
+ }
+ );
+ }
+ }); // end mousemove
+ }, function(e) {
+ // mouse out
+ reset = setTimeout(function() {
+ blob.animate({
+ width : currentPageItem.outerWidth(),
+ left: currentPageItem.position().left
+ }, options.transitionSpeed);
+ }, options.reset);
+ });
+
+ }); // end each
+
+ }
+
+})(jQuery);