1st draft

gajdy · Mar 7, 2010 · 2395fba · 2395fba
commit 2395fba
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,50 @@
+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;
+ -moz-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 black;
+
+}
+
+#nav li a {
+ color: #e3e3e3;
+ z-index: 2;
+ position: relative;
+ cursor: pointer;
+ float: left;
+ font-size: 30px;
+ font-family: helvetica, arial, sans-serif;
+ text-decoration: none;
+ padding: 30px 45px;
+}
+
+#selected {
+
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>untitled</title>
+ <link href="css/style.css" rel="stylesheet" type="text/css"/>
+</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>
+
+<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/scripts.js"></script>
+</body>
+</html>
diff --git a/js/scripts.js b/js/scripts.js
@@ -0,0 +1,50 @@
+var Site = function() {
+ this.navBlob();
+};
+
+Site.prototype.navBlob = function() {
+ var nav = $('#nav'),
+ currentPageItem = $('#selected', nav),
+ blobOverlap = 10, 
+ blob,
+ reset;
+
+ $('<div id="blob"></div>').css({
+ width : currentPageItem.width(),
+ height : currentPageItem.outerHeight() + blobOverlap,
+ left : currentPageItem.position().left,
+ top : currentPageItem.position().top - blobOverlap / 2
+ }).appendTo('#nav');
+
+ blob = $('#blob');
+
+ nav.hover(function() {
+ clearTimeout(reset);
+ $(this).mousemove(function(e) {
+ blob.animate(
+ {
+ width : $(e.target).parent('li').width(),
+ left : e.pageX - $(e.target).parent('li').width() / 2
+ },
+ {
+ duration: 'slow',
+ easing : 'easeOutCirc',
+ queue : false
+ }
+ );
+ }); // end mousemove
+ }, function(e) {
+ // mouse out
+ blob.animate({
+ left : $(e.target).parent('li').position().left
+ }, 800);
+
+ reset = setTimeout(function() {
+ blob.animate({
+ width : currentPageItem.outerWidth(),
+ left: currentPageItem.position().left
+ });
+ }, 4000);
+ });
+};
+new Site();