(44 intermediate revisions by 2 users not shown) | |||
Line 11: | Line 11: | ||
<!-- Bootstrap theme stylesheet --> | <!-- Bootstrap theme stylesheet --> | ||
<link rel="stylesheet" href="https://2016.igem.org/Team:DTU-Denmark/bootstrap-theme?action=raw&ctype=text/css" type="text/css"> | <link rel="stylesheet" href="https://2016.igem.org/Team:DTU-Denmark/bootstrap-theme?action=raw&ctype=text/css" type="text/css"> | ||
− | <!-- Bootstrap js | + | <!-- Bootstrap js |
− | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/bootstrap-js?action=raw&ctype=text/javascript"></script> | + | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/bootstrap-js?action=raw&ctype=text/javascript"></script>--> |
<!-- Movile navigation stylesheet, include default and components, source: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ --> | <!-- Movile navigation stylesheet, include default and components, source: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ --> | ||
Line 20: | Line 20: | ||
<!-- Javascripts --> | <!-- Javascripts --> | ||
− | <!-- Hover | + | <!-- Hover |
− | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/hover-js?action=raw&ctype=text/javascript"></script> | + | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/hover-js?action=raw&ctype=text/javascript"></script> --> |
− | <!-- Navigationtion, Add to subbar visibility when hovering | + | <!-- Navigationtion, Add to subbar visibility when hovering |
− | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/nav-js?action=raw&ctype=text/javascript"></script> | + | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/nav-js?action=raw&ctype=text/javascript"></script> --> |
<!--MeanMenu stylesheet, source: http://www.meanthemes.com/plugins/meanmenu/--> | <!--MeanMenu stylesheet, source: http://www.meanthemes.com/plugins/meanmenu/--> | ||
Line 38: | Line 38: | ||
/* Navigation CSS */ | /* Navigation CSS */ | ||
+ | |||
+ | #active { | ||
+ | display: inline; | ||
+ | } | ||
#top-section { | #top-section { | ||
Line 74: | Line 78: | ||
} | } | ||
+ | #headerWrapper #current-navigation a { | ||
+ | background-color:#750000; /*#990000*/ | ||
+ | color:white; | ||
+ | } | ||
+ | |||
/*Dimensions and look of top nav*/ | /*Dimensions and look of top nav*/ | ||
#headerWrapper { | #headerWrapper { | ||
Line 110: | Line 119: | ||
#Topnav { | #Topnav { | ||
− | width: | + | width:90%; |
margin: auto; | margin: auto; | ||
} | } | ||
Line 117: | Line 126: | ||
#logo { | #logo { | ||
float: left; | float: left; | ||
− | width: | + | width: 5%; |
height: 75px; | height: 75px; | ||
padding-top: 15px; /* control that it is below the iGEM topbar*/ | padding-top: 15px; /* control that it is below the iGEM topbar*/ | ||
Line 140: | Line 149: | ||
#navigation { | #navigation { | ||
float: right; | float: right; | ||
− | font-size: | + | font-size: 1em; |
font-weight: 200; | font-weight: 200; | ||
− | width: | + | width: 94%; |
} | } | ||
#navigation ul{ | #navigation ul{ | ||
float: right; | float: right; | ||
− | |||
margin-bottom: 0px; | margin-bottom: 0px; | ||
} | } | ||
Line 154: | Line 162: | ||
padding-left:8px; | padding-left:8px; | ||
} | } | ||
+ | |||
+ | |||
#sub-navigation { | #sub-navigation { | ||
− | + | width: 94%; | |
− | text-align: | + | text-align: right; |
font-size: 0.9em; | font-size: 0.9em; | ||
position: fixed; | position: fixed; | ||
− | margin-top: | + | margin-top: -3px; |
font-weight:200; | font-weight:200; | ||
} | } | ||
#sub-navigation ul { | #sub-navigation ul { | ||
+ | float: right; | ||
+ | |||
+ | } | ||
+ | |||
+ | #sub-navigation > ul { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #sub-navigation ul.active-sub { | ||
display: inline; | display: inline; | ||
− | |||
− | |||
} | } | ||
/* This makes the "-" seperators between the subnavigation elements */ | /* This makes the "-" seperators between the subnavigation elements */ | ||
#sub-navigation li:before{ | #sub-navigation li:before{ | ||
− | content:" | + | content:"•";/*\00b7*/ |
− | padding-right: | + | padding-right:15px; |
− | color: | + | color:white; /*#B81414*/ |
} | } | ||
Line 212: | Line 229: | ||
#sub-navigation li { | #sub-navigation li { | ||
display: inline; | display: inline; | ||
− | |||
padding-left: 10px; | padding-left: 10px; | ||
} | } | ||
Line 218: | Line 234: | ||
#sub-navigation li li{ | #sub-navigation li li{ | ||
display: inline; | display: inline; | ||
− | |||
padding-left: 5px; | padding-left: 5px; | ||
font-style: italic; | font-style: italic; | ||
Line 225: | Line 240: | ||
#navigation ul li { | #navigation ul li { | ||
display: inline; | display: inline; | ||
− | + | ||
} | } | ||
Line 261: | Line 276: | ||
} | } | ||
− | #Topnav a:hover{ | + | /*#Topnav a:hover,*/ |
− | background-color: # | + | #Topnav a.hover{ |
+ | background-color: #990000; /*4A0000, 750000, | ||
B81414, DA3535*/ | B81414, DA3535*/ | ||
color: white; | color: white; | ||
} | } | ||
− | + | /* | |
#Topnav a.active{ | #Topnav a.active{ | ||
background-color: #990000; | background-color: #990000; | ||
− | |||
border-top-left-radius: 10px; | border-top-left-radius: 10px; | ||
border-top-right-radius: 10px; | border-top-right-radius: 10px; | ||
color: white; | color: white; | ||
} | } | ||
− | + | */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
body{ | body{ | ||
padding-top: 120px; | padding-top: 120px; | ||
Line 312: | Line 323: | ||
/*Anytime the screen is less than 991px wide everything within {} apply | /*Anytime the screen is less than 991px wide everything within {} apply | ||
This controls that the mobile navigation is shown when screen size is below 991px in width*/ | This controls that the mobile navigation is shown when screen size is below 991px in width*/ | ||
− | @media screen and (max-width: | + | @media screen and (max-width: 650px) { |
/*#dl-menu { | /*#dl-menu { | ||
Line 325: | Line 336: | ||
top: 0px; | top: 0px; | ||
}*/ | }*/ | ||
+ | |||
+ | #logo { | ||
+ | width: 100%; | ||
+ | height: 75px; | ||
+ | padding-top: 0px; /* control that it is below the iGEM topbar*/ | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
− | # | + | #headerWrapper { /*The normal header dissapear at this screen width*/ |
− | + | ||
} | } | ||
− | + | ||
− | + | #navigation { | |
− | + | float: none; | |
− | + | display: block; | |
+ | } | ||
+ | |||
+ | #navigation ul{ | ||
+ | float: none; | ||
+ | } | ||
+ | |||
+ | #navigation ul li { | ||
+ | display: block; | ||
+ | float:none; | ||
+ | } | ||
+ | |||
+ | .nav-item { | ||
+ | display: block; | ||
+ | background-size: 10px; | ||
+ | float: none; | ||
+ | line-height: 20px; | ||
+ | padding: 5px; | ||
+ | margin:2px; | ||
+ | |||
+ | } | ||
+ | /* | ||
+ | #navigation a{ | ||
+ | padding-left:8px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #sub-navigation { | ||
+ | width:960px; | ||
+ | text-align: left; | ||
+ | font-size: 0.9em; | ||
+ | position: fixed; | ||
+ | margin-top: -8px; | ||
+ | font-weight:200; | ||
+ | } | ||
+ | |||
+ | #sub-navigation ul { | ||
+ | display: inline; | ||
+ | float:left; | ||
+ | margin-right:10px; | ||
+ | } | ||
+ | |||
+ | #sub-navigation > ul { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #sub-navigation ul.active-sub { | ||
+ | display: inline; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sub-navigation li:before{ | ||
+ | content:"•"; | ||
+ | padding-right:15px; | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sub-navigation li li:before{ | ||
+ | content:" "; | ||
+ | padding-right:5px; | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | #sub-navigation li:first-child:before{ | ||
+ | content:""; | ||
+ | } | ||
+ | |||
+ | #sub-navigation li li:first-child:before{ | ||
+ | content:" "; | ||
+ | } | ||
} | } | ||
Line 388: | Line 477: | ||
}); | }); | ||
</script>--> | </script>--> | ||
− | + | ||
+ | <!-- jquery --> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | ||
+ | <!-- /jquery --> | ||
</head> <!-- --> | </head> <!-- --> | ||
<header> | <header> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<!-- Computer navigation --> | <!-- Computer navigation --> | ||
− | <div id="headerWrapper | + | <div id="headerWrapper"> |
<!-- Top navigation bar --> | <!-- Top navigation bar --> | ||
<div id="Topnav"> | <div id="Topnav"> | ||
+ | |||
<div id="logo"> | <div id="logo"> | ||
<a href="https://2016.igem.org/Team:DTU-Denmark"> | <a href="https://2016.igem.org/Team:DTU-Denmark"> | ||
<img class="BioBuilders" src="https://static.igem.org/mediawiki/2016/0/08/DTU-Denmark-Logo-150x80.png" alt="DTU-Denmark Logo"> | <img class="BioBuilders" src="https://static.igem.org/mediawiki/2016/0/08/DTU-Denmark-Logo-150x80.png" alt="DTU-Denmark Logo"> | ||
</a> | </a> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
Line 643: | Line 500: | ||
<div id="navigation"> | <div id="navigation"> | ||
<ul id="nav-items"> | <ul id="nav-items"> | ||
− | <li><a href=" | + | |
− | <li><a href=" | + | <!--<li><a href="https://2016.igem.org/Team:DTU-Denmark/bla" class="achievements nav-item" id="achievements">Achievements</a></li>--> |
− | <li><a href="#" class="results nav-item" id="parts"> | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/project" class="project nav-item" id="project">Project</a></li> |
− | <li><a href=" | + | <!--<li><a href="#" class="results nav-item" id="parts">Wetlab</a></li>--> |
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/wetlab" class="notebook nav-item" id="notebook">Wetlab</a></li> |
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/compute" class="hardware nav-item" id="hardware">Compute</a></li> |
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/team" class="modeling nav-item" id="modeling">Team</a></li> |
− | <li><a href="#" class="collaborations nav-item" id="collaborations" | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/outreach" class="practices nav-item" id="practices">Outreach</a></li> |
− | <li><a href="#" class="attributions nav-item" id="attributions" | + | <!-- |
− | <li><a href="#" class="interlab nav-item" id="interlab" | + | <li><a href="#" class="collaborations nav-item" id="collaborations">Collaboration</a></li> |
+ | <li><a href="#" class="attributions nav-item" id="attributions">Attributions</a></li> | ||
+ | <li><a href="#" class="interlab nav-item" id="interlab">InterLab</a></li> | ||
+ | --> | ||
</ul> | </ul> | ||
</div> | </div> | ||
</div> <!--/ Top navigation bar --> | </div> <!--/ Top navigation bar --> | ||
+ | |||
− | |||
− | |||
<div id="sub-navigation-wrapper"> | <div id="sub-navigation-wrapper"> | ||
− | + | <!-- Sub navigation bar --> | |
− | + | <div id="sub-navigation" class="col-12-sm"> | |
− | + | ||
− | + | <!-- | |
− | + | <ul id="achievements-sub" > | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/achievements">Medal Requirements</a></li> | |
− | + | </ul> | |
− | + | --> | |
− | + | ||
− | + | ||
− | + | <ul id="project-sub"> <!-- Projects --> | |
− | + | <li><a href="file:///C:/Users/Mikkel/Dropbox/iGem/Wiki/index.html#" class="sub-nav-item">Description</a></li> | |
− | + | <li><a href="file:///C:/Users/Mikkel/Dropbox/iGem/Wiki/index.html" class="sub-nav-item">Toolbox</a></li> | |
− | + | ||
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/achievements" class="sub-nav-item">Acievements</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Safety</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/parts" class="sub-nav-item">Parts</a></li> | |
− | + | </ul> | |
− | + | <!-- | |
− | + | <ul id="parts-sub"> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/substrate" class="sub-nav-item">Substrate</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/products" class="sub-nav-item">Products</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/molecular_toolbox" class="sub-nav-item">Molecular Toolbox</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Interlab</a></li> | |
− | + | </ul> | |
− | + | --> | |
− | + | ||
− | + | <ul id="notebook-sub"> <!-- Wetlab --> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/substrate" class="sub-nav-item">Substrate</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/products" class="sub-nav-item">Products</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/molecular_toolbox" class="sub-nav-item">Molecular Toolbox</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Interlab</a></li> | |
− | + | <!-- | |
− | + | <li><a href="#" class="sub-nav-item">Work Space</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Safety</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Day Notes</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Protocols</a></li> | |
− | + | --> | |
− | + | </ul> | |
− | + | ||
− | + | <ul id="hardware-sub"> <!-- Compute --> | |
− | + | <li><a href="#" class="sub-nav-item">Overview</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/overview" class="sub-nav-item">Codon Optimization</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/DIY_spectrometer" class="sub-nav-item">DIY Spectrometer</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/modelling" class="sub-nav-item">Modelling</a></li> | |
− | + | </ul> | |
− | + | ||
− | + | <ul id="modeling-sub"> <!-- Team --> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/team_members" class="sub-nav-item">Team Members</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/team_building" class="sub-nav-item">Team Building</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/team_roles" class="sub-nav-item">Team Roles</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/internal_wiki" class="sub-nav-item">Internal Wiki</a></li> | |
− | + | </ul> | |
− | + | ||
− | + | <ul id="practices-sub"> <!-- Outreach --> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/collaborations" class="sub-nav-item">Collaborations</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/meetups" class="sub-nav-item">Meetups</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/online_presence" class="sub-nav-item">Online Presence</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/sponsors" class="sub-nav-item">Sponsorts</a></li> | |
− | + | <li><a href="https://2016.igem.org/Team:DTU-Denmark/practices" class="sub-nav-item">Practices</a></li> | |
− | + | </ul> | |
− | + | ||
− | + | <!--<ul id="collaborations-sub"> | |
− | + | <li><a href="#" class="sub-nav-item">Overview</a></li> | |
− | + | <li><a href="#">Sharing CRISPR</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">DTU BioBrick Tutorial</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Cooperations</a></li> | |
− | + | </ul> | |
− | + | ||
− | + | <ul id="attributions-sub"> | |
− | + | <li><a href="#" class="sub-nav-item">Team Members</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Advisors</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Team Work Attributions</a></li> | |
− | + | <li><a href="#" class="sub-nav-item">Media</a></li> | |
+ | <li><a href="#" class="sub-nav-item">Sponsors</a></li> | ||
+ | <li><a href="#" class="sub-nav-item">Acknowledgements</a></li> | ||
+ | </ul> | ||
+ | |||
+ | <ul id="interlab-sub"> | ||
+ | <li><a href="#" class="sub-nav-item">Results</a></li> | ||
+ | <li><a href="#" class="sub-nav-item">Protocols</a></li> | ||
+ | </ul>--> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <!--/ Computer navigation --> | |
</header> | </header> | ||
+ | |||
+ | <!-- live update --> | ||
+ | <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> | ||
+ | <!-- /live update --> | ||
<body> | <body> | ||
− | <!-- JQuery source: https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js--> | + | <!-- JQuery source: https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js --> |
<script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/jQuery-js?action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/jQuery-js?action=raw&ctype=text/javascript"></script> | ||
− | + | ||
+ | |||
+ | <script> | ||
+ | // Function to find an show current head and sub menue. | ||
+ | var show_current_sub = function(){ | ||
+ | var current_url = window.location.href | ||
+ | var search_name = "a[href=\'" + current_url + "\']" | ||
+ | var position_link = document.querySelectorAll(search_name); | ||
+ | var link_p1 = $(position_link).parent(); | ||
+ | var link_p2 = $(link_p1).parent(); | ||
+ | var link_p3 = $(link_p2).parent(); | ||
+ | |||
+ | if(link_p2.attr('id') == "nav-items"){ | ||
+ | link_p1[0].id = "current-navigation"; | ||
+ | |||
+ | for (var i = 0; i < position_link.length; i++) { | ||
+ | var name = position_link[i].id; | ||
+ | } | ||
+ | |||
+ | var sub_name = name + "-sub"; | ||
+ | var current_sub_bar = document.getElementById(sub_name) | ||
+ | current_sub_bar.className = "active-sub"; | ||
+ | } | ||
+ | |||
+ | if(link_p3.attr('id') == "sub-navigation"){ | ||
+ | link_p2[0].className = "active-sub"; | ||
+ | position_link[0].style.fontWeight = "bold"; | ||
+ | |||
+ | var head_name = link_p2[0].id; | ||
+ | head_name = head_name.substring(0, head_name.length - 4); | ||
+ | var current_head = document.getElementById(head_name); | ||
+ | current_head = $(current_head).parent(); | ||
+ | current_head[0].id = "current-navigation"; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Clear sub menues | ||
+ | var empty_sub = function(){ | ||
+ | var last_sub_bar = document.getElementsByClassName("active-sub") | ||
+ | $(".active-sub").removeClass("active-sub"); | ||
+ | $(".hover").removeClass("hover"); | ||
+ | } | ||
+ | |||
+ | // Open sub menue function | ||
+ | var open_sub = function(cName){ | ||
+ | cName = cName.split(" ")[0] | ||
+ | navig = cName + "-sub" | ||
+ | var current_sub_bar = document.getElementById(navig) | ||
+ | |||
+ | if (current_sub_bar !== null){ | ||
+ | empty_sub() | ||
+ | $("." + cName).addClass("hover"); | ||
+ | current_sub_bar.className = "active-sub"; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // open submenues on hover with delay | ||
+ | var timer; | ||
+ | var delay = 400; | ||
+ | $(window).hover( function(event) { | ||
+ | // on mouse in, start a timeout | ||
+ | timer = setTimeout(function(){ | ||
+ | var cName = event.target.className | ||
+ | open_sub(cName) | ||
+ | }, delay); | ||
+ | |||
+ | }, function() { | ||
+ | // on mouse out, cancel the timer | ||
+ | clearTimeout(timer); | ||
+ | }); | ||
+ | |||
+ | |||
+ | // Header menue function on tuch screen | ||
+ | flag = false | ||
+ | $(window).bind('touchstart', function(event){ | ||
+ | if (!flag) { | ||
+ | // prevents multiple clicks | ||
+ | flag = true; | ||
+ | setTimeout(function(){ flag = false; }, 100); | ||
+ | |||
+ | // Find sub menue | ||
+ | var cName = event.target.className.split(" ")[0] | ||
+ | var subName = cName + "-sub" | ||
+ | var subClass = $("#" + subName).attr("class"); | ||
+ | |||
+ | // if sub is not open it is opened. Otherwise the link is used. | ||
+ | if(subClass !== "active-sub"){ | ||
+ | event.preventDefault(); | ||
+ | open_sub( cName ); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | |||
+ | // Open current sub menue when the window opens | ||
+ | window.onload = function (){ | ||
+ | show_current_sub() | ||
+ | } | ||
+ | |||
+ | // Go back to current sub menue | ||
+ | var timer_leave; | ||
+ | $("div#headerWrapper").hover( function() { | ||
+ | // on mouse in, start a timeout | ||
+ | clearTimeout(timer_leave); | ||
+ | |||
+ | }, function() { | ||
+ | // on mouse out, cancel the timer | ||
+ | timer_leave = setTimeout(function(){ | ||
+ | empty_sub() | ||
+ | show_current_sub() | ||
+ | }, delay); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
<!-- Codrops Mobile nav js source: | <!-- Codrops Mobile nav js source: | ||
<script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/mobile-nav-js?action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/mobile-nav-js?action=raw&ctype=text/javascript"></script> | ||
Line 780: | Line 770: | ||
}); | }); | ||
}); | }); | ||
− | </script | + | </script> |
</body> | </body> |
Latest revision as of 08:40, 12 August 2016