Team:TU Eindhoven/Template:NavPanel

From 2014.igem.org

(Difference between revisions)
 
(281 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
 
<html>
<html>
 +
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
  <meta charset='utf-8'>
-
<title>A "stick-to-top" navigation menu with jQuery - Backslash</title>
+
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
  <link href="https://2014.igem.org/Team:TU_Eindhoven/Style:NavPanel?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all" />
 +
  <script src="https://2014.igem.org/Team:TU_Eindhoven/Template:NavPanel/jquery-latest.min?action=raw&ctype=text/js" type="text/javascript"></script>
 +
  <script src="https://2014.igem.org/Team:TU_Eindhoven/Template:NavPanel/script?action=raw&ctype=text/js"></script>
 +
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
 +
</head>
-
<link href="css/demo.css" rel="stylesheet" type="text/css" />
 
-
<!--[if lt IE 9]>
 
-
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
-
<![endif]-->
 
-
<!-- required for this demo -->
+
<body>
-
<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>
+
<div id='cssmenu'>
-
$(function() {
+
<ul>
-
// grab the initial top offset of the navigation
+
  <li><a href='https://2014.igem.org/Team:TU_Eindhoven'><span>Home</span></a></li>
-
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
+
 
-
+
  <li class='has-sub'><a><span>Team ▼</span></a>
-
// our function that decides weather the navigation bar should have "fixed" css position or not.
+
      <ul>
-
var sticky_navigation = function(){
+
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Team'><span>Team Members</span></a></li>
-
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
+
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Attributions'><span>Attributions</span></a></li>
-
+
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Team_Supervisors'><span>Supervisors</span></a></li>
-
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
+
        <li class='last'><a href='https://2014.igem.org/Team:TU_Eindhoven/Acknowledgements'><span>Acknowledgements</span></a></li>
-
if (scroll_top > sticky_navigation_offset_top) {
+
      </ul>
-
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
+
  </li>
-
} 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>
+
 +
  <li class='has-sub'><a><span>Project ▼</span></a>
 +
      <ul>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Abstract'><span>Abstract</span></a></li>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Overview'><span>Overview</span></a></li>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project'><span>Project Description</span></a></li>
 +
        <li class='has-sub'><a href='https://2014.igem.org/Team:TU_Eindhoven/Background'><span>Background ►</span></a>
 +
            <ul>
 +
              <li><a href='https://2014.igem.org/Team:TU_Eindhoven/SPAAC'><span>SPAAC Reaction</span></a></li>
 +
              <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Background_Anchors'><span>Anchors</span></a></li>
 +
              <li class='last'><a href='https://2014.igem.org/Team:TU_Eindhoven/FACS'><span>FACS</span></a></li>
 +
            </ul>
 +
        </li>
 +
        <li class='has-sub'><a href='https://2014.igem.org/Team:TU_Eindhoven/Design'><span>Design ►</span></a>
 +
            <ul>
 +
              <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Design_Anchors'><span>Membrane Anchors</span></a></li>
 +
              <li class='last'><a href='https://2014.igem.org/Team:TU_Eindhoven/Plamid_Design'><span>Plasmid Design</span></a></li>
 +
            </ul>
 +
        </li>
 +
        <li class='has-sub'><a href='https://2014.igem.org/Team:TU_Eindhoven/Click_Reaction'><span>Click Reaction ►</span></a>
 +
        </li>
 +
        <li class='has-sub'><a><span>RCA ►</span></a>
 +
            <ul>
 +
              <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Introduction'><span>Introduction</span></a></li>
 +
              <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Mechanism'><span>Mechanism</span></a></li>
 +
              <li class='last'><a href='https://2014.igem.org/Team:TU_Eindhoven/Plamid_Design'><span>Results</span></a></li>
 +
            </ul>
 +
        </li>
 +
        <li class='has-sub'><a href='https://2014.igem.org/Team:TU_Eindhoven/ZAP'><span>ZAP</span></a></li>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Main_results'><span>Main Results</span></a></li>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Parts'><span>Submitted Parts</span></a></li>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Medal_motivation'><span>Medal Motivation</span></a></li>
 +
        <li class='last'><a href='https://2014.igem.org/Team:TU_Eindhoven/Future_Perspectives'><span>Future Perspectives</span></a></li>
 +
      </ul>
 +
  </li>
 +
 
 +
  <li class='has-sub'><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Microfluidics'><span>Microfluidics ▼</span></a>
 +
      <ul>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Microfluidics_introduction'><span>Introduction</span></a></li>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Microfluidics_Dropletdevice'><span>Droplet Device</span></a></li>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Microfluidics_cellencapsulation'><span>Cell Encapsulation</span></a></li>
 +
        <li class='last'><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Microfluidics_results'><span>Results</span></a></li>
 +
      </ul>
 +
  </li>
-
</head>
+
  <li class='has-sub'><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Modeling'><span>Modeling</span></a></li>
-
<body>
+
-
<div id="demo_top_wrapper">
 
-
<div id="demo_top">
+
  <li class="has-sub"><a href='https://2014.igem.org/Team:TU_Eindhoven/Notebook'><span>Notebook ▼</span></a>
-
<div class="demo_container">
+
      <ul>
-
<div id="my_logo">Our logo</div>
+
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/protocols'><span>Timeline</span></a></li>
-
</div>
+
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/protocols'><span>Protocols</span></a></li>
-
</div>
+
        <li class='last'><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/protocols'><span>Logbook</span></a></li>
 +
      </ul>
 +
  </li>
 +
 
 +
  <li class="has-sub"><a><span>Society ▼</span></a>
 +
      <ul>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Synergene'><span>Synergene</span></a></li>
 +
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Outreach'><span>Outreach</span></a></li>
 +
        <li class='last'><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Policyandpractices'><span>Policy & Practices</span></a></li>
 +
      </ul>
 +
  </li>'
-
<div id="sticky_navigation_wrapper">
+
  <li class="has-sub"><a href='https://2014.igem.org/Team:TU_Eindhoven/Safety'><span>Safety ▼</span></a>
-
<div id="sticky_navigation">
+
      <ul>
-
<div class="demo_container">
+
        <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Our_lab'><span>Our Lab</span></a></li>
-
<ul>
+
        <li class='last'><a href='https://2014.igem.org/Team:TU_Eindhoven/Project/Biosafety'><span>Biosafety</span></a></li>
-
<li><a href="#" class="selected">HOME</a></li>
+
      </ul>
-
<li><a href="#">ABOUT US</a></li>
+
  </li>
-
<li><a href="#">SERVICES</a></li>
+
-
<li><a href="#">CLIENTS</a></li>
+
  <li><a href='https://2014.igem.org/Team:TU_Eindhoven/Sponsors'><span>Sponsors</span></a></li>
-
<li><a href="#">PARTNERS</a></li>
+
-
<li><a href="#">CONTACT</a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
+
  <li style="margin-left:275px;padding:0;"><a href='https://2014.igem.org' target="_blank" style="padding:0;"><img src="https://static.igem.org/mediawiki/2014/0/0e/TU_Eindhoven_iGEM.png" height="80"></a></li>
 +
</ul>
 +
 +
</div>
</body>
</body>
-
</html>
+
 
 +
<html>

Latest revision as of 18:08, 21 September 2014