Team:KU Leuven/Template:Menu

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<html>
 +
<head>
 +
    <meta charset="utf-8">
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <title>iGem</title>
-
<body>
+
    <link href="http://www.designingtest.org/iGem/bootstrap.min.css" rel="stylesheet">
 +
    <link href="http://www.designingtest.org/iGem/bootstrap-responsive.min.css" rel="stylesheet">
 +
    <link href="http://www.designingtest.org/iGem/style.css" rel="stylesheet">
 +
<link href="http://www.designingtest.org/iGem/bjqs.css"rel="Stylesheet"/>
 +
   
 +
    <!--[if lt IE 9]>
 +
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
 +
<![endif]-->
-
  <center>
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
-
  <table width="800" border="1" background="#326B24">
+
<script src="http://www.designingtest.org/iGem/raphael-min.js"></script>
-
  <tr height="50">
+
<script src="http://www.designingtest.org/iGem/livicons-1.2.min.js"></script>
-
    <td><center><a href="https://2013.igem.org/Team:KU_Leuven" title="Team:KU_leuven">Home</center></a td>
+
<script src="http://www.designingtest.org/iGem/bjqs.min.js"></script>
-
     <td><center><a href="https://2013.igem.org/Team:KU_Leuven/Team" title="Team:KU_leuven">Team</center></a td>
+
-
    <td><center><a href="https://2013.igem.org/Team:KU_Leuven/Project" title="Project">Project</center></a td>
+
<!--[if lt IE 8]>
-
     <td><center><a href="https://2013.igem.org/Team:KU_Leuven/Human_Practices" title="Human Practices">Human Practices</center></a td>
+
<script src="http://www.designingtest.org/iGem/json2.min.js"></script>
-
    <td><center><a href="https://2013.igem.org/Team:KU_Leuven/Notebook" title="Notebook">Notebook</center></a td>
+
<![endif]-->
-
    <td><center><a href="https://2013.igem.org/Team:KU_Leuven/Safety" title="Safety">Safety</center></a td>
+
 
-
    <td><center><a href="https://2013.igem.org/Team:KU_Leuven/Human_Outreach" title ="Human Outreach">Human Outreach</center></a td>
+
  <script>
-
     <td><center><a href="https://2013.igem.org/Team:KU_Leuven/Sponsors" title="Sponsors">Sponsors</center></a td>
+
var ww = document.body.clientWidth;
-
     <td><center><a href="https://igem.org/Main_Page" title="iGEM">iGEM</center></a td>
+
-
  </tr>
+
$(document).ready(function() {
-
  </table>
+
$('#banner-fade').bjqs({
-
  </center>
+
        'height' : 200,
 +
        'width' : 340,
 +
        'responsive' : true,
 +
        'showcontrols' : false,
 +
        'showmarkers' : false,
 +
        'usecaptions' : false,
 +
        'animspeed' : 6000
 +
    });
 +
 
 +
 +
$(".nav li a").each(function() {
 +
if ($(this).next().length > 0) {
 +
$(this).addClass("parent");
 +
};
 +
})
 +
 +
$(".toggleMenu").click(function(e) {
 +
e.preventDefault();
 +
$(this).toggleClass("active");
 +
$(".nav").toggle();
 +
});
 +
adjustMenu();
 +
})
 +
 +
$(window).bind('resize orientationchange', function() {
 +
ww = document.body.clientWidth;
 +
adjustMenu();
 +
});
 +
 +
var adjustMenu = function() {
 +
if (ww < 768) {
 +
$(".toggleMenu").css("display", "inline-block");
 +
if (!$(".toggleMenu").hasClass("active")) {
 +
$(".nav").hide();
 +
} else {
 +
$(".nav").show();
 +
}
 +
$(".nav li").unbind('mouseenter mouseleave');
 +
$(".nav li a.parent").unbind('click').bind('click', function(e) {
 +
// must be attached to anchor element to prevent bubbling
 +
e.preventDefault();
 +
$(this).parent("li").toggleClass("hover");
 +
});
 +
}
 +
else if (ww >= 768) {
 +
$(".toggleMenu").css("display", "none");
 +
$(".nav").show();
 +
$(".nav li").removeClass("hover");
 +
$(".nav li a").unbind('click');
 +
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
 +
// must be attached to li so that mouseleave is not triggered when hover over submenu
 +
$(this).toggleClass('hover');
 +
});
 +
}
 +
}
 +
  </script>
 +
 
 +
     <script type="text/javascript">
 +
  WebFontConfig = {
 +
    google: { families: [ 'PT+Sans::latin' ] }
 +
  };
 +
  (function() {
 +
    var wf = document.createElement('script');
 +
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
 +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
 +
    wf.type = 'text/javascript';
 +
    wf.async = 'true';
 +
    var s = document.getElementsByTagName('script')[0];
 +
    s.parentNode.insertBefore(wf, s);
 +
  })();
 +
</script>
 +
 +
  </head>
 +
 
 +
<body>
 +
<div id="container">
 +
  <div class="container">
 +
  <div class="row-fluid">
 +
    <div id="logo"><img src="http://www.designingtest.org/iGem/Logo.png" alt="Logo" /></div>
 +
   
 +
  <div id="menu">
 +
    <a class="toggleMenu" href="#">Menu</a>
 +
     <ul class="nav">
 +
    <li class="test">
 +
    <a href="#">Home</a>
 +
    </li>
 +
    <li>
 +
    <a href="#">Team</a>
 +
    <ul class="sub">
 +
      <li>
 +
      <a href="#">Link1</a>
 +
      </li>
 +
      <li>
 +
      <a href="#">Link2</a>
 +
      </li>
 +
    </ul>
 +
    </li>
 +
    <li>
 +
    <a href="#">Project</a>
 +
    <ul class="sub">
 +
      <li>
 +
      <a href="#">Link1</a>
 +
      </li>
 +
      <li>
 +
      <a href="#">Link2</a>
 +
      </li>
 +
    </ul>
 +
    </li>
 +
    <li>
 +
    <a href="#">Parts</a>
 +
    <ul class="sub">
 +
      <li>
 +
      <a href="#">Link1</a>
 +
      </li>
 +
      <li>
 +
      <a href="#">Link2</a>
 +
      </li>
 +
    </ul>
 +
    </li>
 +
    <li>
 +
    <a href="#">Notebook</a>
 +
    </li>
 +
     <li>
 +
    <a href="#">Ethics</a>
 +
    </li>
 +
    <li>
 +
    <a href="#">Education</a>
 +
    </li>
 +
     <li>
 +
    <a href="#">Sponsors</a>
 +
    </li>
 +
  </ul>
 +
  <div class="clear-both">&nbsp;</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</body>
</html>
</html>

Revision as of 13:06, 26 August 2013

iGem