Team:GeorgiaState/Header

From 2011.igem.org

(Difference between revisions)
 
(50 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>
</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>
-
    <li id="landscapes"><a href="#">Landscapes</a></li>
 
-
    <li id="people"><a href="#">People</a></li>
 
-
    <li id="nature"><a href="#">Nature</a></li>
 
-
     <li id="abstract"><a href="#">Abstract</a></li>
+
 
-
     <li id="urban"><a href="#">Urban</a></li>
+
     <li id="home"><a href="https://2011.igem.org/Team:GeorgiaState">Home</a></li>
 +
     <li id="team"><a href="https://2011.igem.org/Team:GeorgiaState/Team">Team</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>
-
<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>
-
<script type="text/javascript" src="https://www.student.gsu.edu/~bmehta2/jquery.js"></script>
+
<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-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-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>
<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" />
<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

Retrieved from "http://2011.igem.org/Team:GeorgiaState/Header"