Team:TU Eindhoven/Template:NavPanel

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!DOCTYPE html>
 
<html>
<html>
 +
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-
<title>A "stick-to-top" navigation menu with jQuery - Backslash</title>
+
  <title>TU Eindhoven iGEM</title>
-
 
+
  <link href="https://2014.igem.org/Team:TU_Eindhoven/Style:NavPanel?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all" />
-
<link href="css/demo.css" rel="stylesheet" type="text/css" />
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
-
<!--[if lt IE 9]>
+
-
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+
-
<![endif]-->
+
-
 
+
-
<!-- required for this demo -->
+
-
<link rel="stylesheet" href="css/sticky-navigation.css" />
+
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+
-
 
+
-
<script>
+
-
$(function() {
+
-
 
+
-
// grab the initial top offset of the navigation
+
-
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
+
-
+
-
// our function that decides weather the navigation bar should have "fixed" css position or not.
+
-
var sticky_navigation = function(){
+
-
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
+
-
+
-
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
+
-
if (scroll_top > sticky_navigation_offset_top) {
+
-
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
+
-
} else {
+
-
$('#sticky_navigation').css({ 'position': 'relative' });
+
-
} 
+
-
};
+
-
+
-
// run our function on load
+
-
sticky_navigation();
+
-
+
-
// and run it again every time you scroll
+
-
$(window).scroll(function() {
+
-
sticky_navigation();
+
-
});
+
-
+
-
// NOT required:
+
-
// for this demo disable all links that point to "#"
+
-
$('a[href="#"]').click(function(event){
+
-
event.preventDefault();
+
-
});
+
-
+
-
});
+
-
</script>
+
-
 
+
-
 
+
</head>
</head>
-
<body>
 
-
<div id="demo_top_wrapper">
 
-
<div id="demo_top">
+
<div class="header_btm">
-
<div class="demo_container">
+
<div class="wrap">
-
<div id="my_logo">Our logo</div>
+
<div class="header_sub">
 +
<div class="h_menu">
 +
<ul>
 +
<li><a href="https://2014.igem.org/Team:TU_Eindhoven">Home</a></li>
 +
<li><a href="https://2014.igem.org/Team:TU_Eindhoven/Team">Team</a></li>
 +
<li><a href="https://2014.igem.org/Team:TU_Eindhoven/Project">Project</a></li>
 +
<li><a href="https://2014.igem.org/Team:TU_Eindhoven/Notebook">Notebook</a></li>
 +
<li><a href="#">Safety</a></li>
 +
</ul>
</div>
</div>
-
</div>
+
<script type="text/javascript">
-
 
+
$(".menu,.search").hide();
-
<div id="sticky_navigation_wrapper">
+
$("#menu").click(function(){
-
<div id="sticky_navigation">
+
$(".menu").toggle();
-
<div class="demo_container">
+
$(".search").hide();
-
<ul>
+
$("#search").removeClass("active");
-
<li><a href="#" class="selected">HOME</a></li>
+
$("#menu").toggleClass("active");
-
<li><a href="#">ABOUT US</a></li>
+
});
-
<li><a href="#">SERVICES</a></li>
+
$("#search").click(function(){
-
 
+
$(".search").toggle();
-
<li><a href="#">CLIENTS</a></li>
+
$(".menu").hide();
-
<li><a href="#">PARTNERS</a></li>
+
$("#menu").removeClass("active");
-
<li><a href="#">CONTACT</a></li>
+
$("#search").toggleClass("active");
-
</ul>
+
$(".text").focus();
-
</div>
+
});
-
</div>
+
</script>
-
</div>
+
<script type="text/javascript" src="https://2014.igem.org/Team:TU_Eindhoven/jquery.script?action=raw&ctype=text/js"></script>
-
 
+
<div class="clear"></div>  
-
+
<div class="clear"></div>    
 +
   
 +
</div>
 +
</div>
 +
</div>
-
</body>
 
</html>
</html>

Revision as of 08:55, 16 July 2014

TU Eindhoven iGEM

Retrieved from "http://2014.igem.org/Team:TU_Eindhoven/Template:NavPanel"