Team:GeorgiaState/Header

From 2011.igem.org

(Difference between revisions)
 
(58 intermediate revisions not shown)
Line 1: Line 1:
__NOTOC__<html lang="en">  
__NOTOC__<html lang="en">  
-
<head>  
+
<head>
 +
 
 +
<style>
 +
 
 +
 
 +
div#top-section{ /*the div containing the entire top bar*/
 +
height: 20px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 0px !important;
 +
margin-top: -14px;
 +
padding:0px 0px 0px 0px;;
 +
border: none;
 +
width: 100%;
 +
background: none;
 +
color: black;
 +
position:absolute;
 +
}
 +
 
 +
#p-logo { /*the header image*/
 +
height:0px;
 +
overflow:hidden;
 +
border:none;
 +
}
 +
 
 +
#content{
 +
margin-top: 14px;
 +
}
 +
 
 +
#search-controls {
 +
overflow:hidden;
 +
display:none;
 +
background: none;
 +
position: absolute;
 +
top: 170px;
 +
right: 40px;
 +
}
 +
 
 +
 
 +
div#header {
 +
width: 975px;
 +
text-align: left;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 0px !important;
 +
 +
 
 +
#menubar {
 +
position: absolute;
 +
background: none;
 +
color: black;
 +
}
 +
 
 +
.left-menu, .right-menu{
 +
position: absolute;
 +
background: none;
 +
color: white;
 +
}
 +
 
 +
.left-menu li, .right-menu li a {
 +
color: transparent !important;
 +
}
 +
 
 +
 
 +
.left-menu ul li, .right-menu ul li a{
 +
background: none;
 +
color: white;
 +
}
 +
 
 +
.right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
 +
    color: white !important;
 +
}
 +
 
 +
/***End minimal header***/
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</style>
 +
<style type="text/css">
 +
.description {padding-left: 40px;}
 +
h1 {
 +
padding-left: 20px;
 +
font:bold 16px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
 +
text-transform:uppercase;
 +
letter-spacing:.0.5em;
 +
padding-top: 5px;
 +
padding-bottom: 10px;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</style>
 +
<style type="text/css">
 +
.description {padding-left: 40px;}
 +
h1 {
 +
padding-left: 20px;
 +
font:bold 16px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
 +
text-transform:uppercase;
 +
letter-spacing:.0.5em;
 +
padding-top: 5px;
 +
padding-bottom: 10px;
 +
}
 +
</style>
<div class="jimgMenu">
<div class="jimgMenu">
   <ul>
   <ul>
-
     <li class="landscapes"><a href="#</a></li>
+
 
-
     <li class="people"><a href="#">People</a></li>
+
 
-
     <li class="nature"><a href="#">Nature</a></li>
+
     <li id="home"><a href="https://2011.igem.org/Team:GeorgiaState">Home</a></li>
-
     <li class="abstract"><a href="#">Abstract</a></li>
+
     <li id="team"><a href="https://2011.igem.org/Team:GeorgiaState/Team">Team</a></li>
-
     <li class="urban"><a href="#">Urban</a></li>
+
     <li id="project"><a href="https://2011.igem.org/Team:GeorgiaState/Project">project</a></li>
 +
     <li id="notebook"><a href="https://2011.igem.org/Team:GeorgiaState/Notebook">Notebook</a></li>
 +
     <li id="safety"><a href="https://2011.igem.org/Team:GeorgiaState/safety">Safety</a></li>
 +
    <li id="igem"><a href="https://2011.igem.org/Main_Page">iGEM</a></li>
   </ul>
   </ul>
</div>
</div>
 +
</script>
</script>
-
<script type="text/javascript" src="https://student.gsu.edu/~bmehta2/jquery.js"></script>
 
-
<script type="text/javascript" src="https://student.gsu.edu/~bmehta2/jquery-easing-1.3.pack.js"></script>
 
-
<script type="text/javascript" src="https://student.gsu.edu/~bmehta2/jquery-easing-compatibility.1.2.pack.js"></script>
 
-
<link href="https://student.gsu.edu/~bmehta2/jimgMenu.css" rel="stylesheet" type="text/css" />
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.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">
<script type="text/javascript">
-
$(document).ready(function () {
+
$().ready(function() {
-
  // find the elements to be eased and hook the hover event
+
$('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'});
-
  $('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>
</script>
 +
</head>
 +
 +
<body>
 +
 +
<style>
 +
body{background-image:url('https://student.gsu.edu/~bmehta2/background.jpg');
 +
background-position:top center;
 +
background-repeat:repeat-y
 +
}
 +
 +
</style>
 +
 +
<body bgcolor="#7f822b">
 +
</body>

Latest revision as of 15:31, 28 September 2011