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> | ||
- | < | + | <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]--> | ||
- | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
- | + | <script src="http://www.designingtest.org/iGem/raphael-min.js"></script> | |
- | + | <script src="http://www.designingtest.org/iGem/livicons-1.2.min.js"></script> | |
- | + | <script src="http://www.designingtest.org/iGem/bjqs.min.js"></script> | |
- | < | + | |
- | + | <!--[if lt IE 8]> | |
- | < | + | <script src="http://www.designingtest.org/iGem/json2.min.js"></script> |
- | + | <![endif]--> | |
- | + | ||
- | + | <script> | |
- | < | + | var ww = document.body.clientWidth; |
- | < | + | |
- | + | $(document).ready(function() { | |
- | + | $('#banner-fade').bjqs({ | |
- | + | '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"> </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 13:06, 26 August 2013