Difference between revisions of "Template:Team:DTU-Denmark/index.html"

Line 1: Line 1:
−
<!--CSS template bootstrap, source: https://getbootstrap.com/-->
+
<html>
−
{{Team:DTU-Denmark/main.css}}
+
−
<!--CSS theme template bootstrap-->
+
−
{{Team:DTU-Denmark/main-theme.css}}
+
−
<!--JavaScript and jQuery template bootstrap-->
+
−
{{Team:DTU-Denmark/javascript.js}}
+
  
−
<!-- Mobile navigation css, source: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ -->
+
<style>
−
{{Team:DTU-Denmark/mobile-nav.css}}
+
/* Default sheet */
−
<!-- Mobile navigation js -->
+
/* General Demo Style */
−
{{Team:DTU-Denmark/mobile-nav.js}}
+
/*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
−
<!-- Modernizr addon for mobile navigation -->
+
−
{{Team:DTU-Denmark/modernizr.js}}
+
  
−
<!-- Hover -->
+
@font-face {
−
{{Team:DTU-Denmark/hover.js}}
+
font-family: 'fontawesome';
−
<!-- Navigation -->
+
src:url('../fonts/fontawesome.eot');
−
{{Team:DTU-Denmark/nav.js}} <!-- Add to subbar visibility when hovering-->
+
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
 +
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
 +
url('../fonts/fontawesome.woff') format('woff'),
 +
url('../fonts/fontawesome.ttf') format('truetype');
 +
font-weight: normal;
 +
font-style: normal;
 +
}*/
  
 +
body, html { font-size: 100%; padding: 0; margin: 0;}
  
−
<html lang="en">
+
/* Reset */
 +
*,
 +
*:after,
 +
*:before {
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
  
−
<head>
+
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
−
    <title>New HTML template for the wiki</title>
+
.clearfix:before,
−
    <!-- This tells the browser that your page is responsive, from iGEM wiki -->
+
.clearfix:after {
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
content: " ";
−
   
+
display: table;
−
        <style type="text/css">
+
}
−
            /* Wiki default settings */
+
  
−
            #sideMenu, #top_title, .logo_2016 {display:none;}
+
.clearfix:after {
−
            #content{ width: 100%; margin: 0; padding: 0;}
+
clear: both;
 +
}
  
−
            /* Navigation CSS */
+
body {
 +
font-family: 'Lato', Calibri, Arial, sans-serif;
 +
color: #b1aea6;
 +
background: #fffcf5;
 +
min-height: 800px;
 +
}
  
−
            #top-section {
+
a {
−
                border: 0 none;
+
color: #ccc;
−
                height: 14px;
+
text-decoration: none;
−
                z-index: 100;
+
}
−
                top: 0;
+
−
                position: fixed;
+
−
                width: 975px;
+
−
                left: 50%;
+
−
                margin-left: -487px;
+
−
            }
+
  
−
            #globalWrapper, #content {
+
a:hover {
−
                width: 100%;
+
color: #fff;
−
                height: 100%;
+
}
−
                border: 0px;
+
−
                background-color: transparent;
+
−
                margin: 0px;
+
−
                padding: 0px;
+
−
                font-size: 100%;
+
−
                z-index:0;
+
−
            }
+
  
−
            li {
+
.main,
−
                margin:0px;
+
.container > header {
−
            }
+
width: 100%;
−
           
+
margin: 0 auto;
−
            /*Text of top nav*/
+
padding: 0 1.875em 3.125em 1.875em;
−
            #headerWrapper a,
+
}
−
            #headerWrapper a:hover,
+
−
            #headerWrapper a:visited,
+
−
            #headerWrapper a:active {
+
−
                text-decoration:none;
+
−
                color:black;
+
−
            }
+
−
           
+
−
            /*Dimensions and look of top nav*/
+
−
            #headerWrapper {
+
−
                position:fixed;
+
−
                top:0px;
+
−
                height: 75px;
+
−
                width:100%;
+
−
                background-color:#ffffff;
+
−
                /*background-color: rgba(0, 0, 0, 0);*/
+
−
                z-index:30;
+
−
            }
+
−
           
+
−
           
+
−
            /*Text of sub nav*/
+
−
            #sub-navigation-wrapper a,
+
−
            #sub-navigation-wrapper a:hover,
+
−
            #sub-navigation-wrapper a:visited,
+
−
            #sub-navigation-wrapper a:active {
+
−
                text-decoration:none;
+
−
                color:white;
+
−
            }
+
−
           
+
−
            /*Dimensions and look of sub nav*/
+
−
            #sub-navigation-wrapper {
+
−
                clear:both;
+
−
                position:relative;
+
−
                background-color: #990000;
+
−
                color: white;
+
−
                width:100%;
+
−
                height: 30px;
+
−
                padding-top: 7px;
+
−
                -webkit-box-shadow: 0px 7px 5px -3px rgba(50, 50, 50, 0.75);
+
−
                -moz-box-shadow:    0px 7px 5px -3px rgba(50, 50, 50, 0.75);
+
−
                box-shadow:        0px 7px 5px -3px rgba(50, 50, 50, 0.75);
+
−
            }
+
−
           
+
−
            #Topnav {
+
−
                width:100%;
+
−
                margin: auto;
+
−
            }
+
  
−
            /*Dimensions and placement of logo*/
+
.main {
−
            #logo {
+
max-width: 69em;
−
                float: left;
+
padding-top: 2em;
−
                width: 20%;
+
}
−
                height: 75px;
+
−
                padding-top: 15px; /* control that it is below the iGEM topbar*/
+
−
                margin-bottom: 0px;
+
−
            }
+
−
           
+
−
            #logo div {
+
−
                float: left;
+
−
            }
+
−
           
+
−
            #logo img.BioBuilders{
+
−
                width: 110px;
+
−
                background: white;
+
−
                margin-top: 2px;
+
−
                margin-bottom: 2px;
+
−
                padding-right: 20px;
+
−
                border-top: 0px;
+
−
                border-right: -30px;
+
−
                border-color: white;
+
−
            }       
+
−
           
+
−
            #navigation {
+
−
                float: right;
+
−
                font-size: 0.93em;
+
−
                font-weight: 200;
+
−
                width: 80%;
+
−
            }
+
  
−
            #navigation ul{
+
.column {
−
                float: right;
+
float: left;
−
                max-margin-right: 20px;
+
width: 50%;
−
                margin-bottom: 0px;
+
padding: 0 2em;
−
            }
+
min-height: 300px;
 +
min-width: 320px;
 +
position: relative;
 +
}
  
−
            #navigation a{
+
.column:nth-child(2) {
−
                padding-left:8px;
+
min-height: 400px;
−
            }
+
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
 +
background: url(../images/clickhere.png) 90px 0 no-repeat;
 +
}
  
−
            #sub-navigation {
+
.column:last-child:before {
−
                width:960px;
+
content: '';
−
                text-align: left;
+
position: absolute;
−
                font-size: 0.9em;
+
height: 7px;
−
                margin:auto;
+
background: #ceccc6;
−
                font-weight:200;
+
top: 100px;
−
            }
+
left: 10px;
 +
}
  
−
            #sub-navigation ul {
+
.column p {
−
                display: inline;
+
font-weight: 300;
−
                float:left;
+
font-size: 2em;
−
                margin-right:10px;
+
padding: 0;
−
            }
+
margin: 0;
 +
text-align: right;
 +
line-height: 1.5;
 +
}
  
−
            /* This makes the "-" seperators between the subnavigation elements */
+
.container > header {
−
            #sub-navigation li:before{
+
padding: 2.875em 1.875em 2.875em;
−
                content:"-";
+
text-align: center;
−
                padding-right:10px;
+
background: rgba(0,0,0,0.01);
−
                color:white;
+
}
−
            }
+
  
−
            /*These next four elements make space between the "-" and the list elements*/
+
.container > header h1 {
−
            #sub-navigation li li:before{
+
font-size: 2.625em;
−
                content:" ";
+
line-height: 1.3;
−
                padding-right:5px;
+
margin: 0;
−
                color:white;
+
color: #89867e;
−
            }
+
font-weight: 300;
 +
}
  
−
            #sub-navigation li:first-child:before{
+
.container > header span {
−
                content:"";
+
display: block;
−
            }
+
font-size: 60%;
 +
color: #ceccc6;
 +
padding: 0 0 0.6em 0.1em;
 +
}
  
−
            #sub-navigation li li:first-child:before{
+
/* Header Style */
−
                content:" ";
+
.codrops-top {
−
            }
+
background: #fff;
 +
background: rgba(255, 255, 255, 0.95);
 +
text-transform: uppercase;
 +
position: relative;
 +
font-size: 0.68em;
 +
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
 +
line-height: 2.2;
 +
}
  
−
            #sub-navigation li.active-item > a{
+
.codrops-top a {
−
                font-weight: bold;
+
padding: 0 1em;
−
                border-top:2px solid;
+
letter-spacing: 0.1em;
−
            }
+
color: #333;
 +
display: inline-block;
 +
}
  
−
            /*#sub-navigation ul ul {
+
.codrops-top a:hover {
−
                display: none;
+
background: rgba(255,255,255,0.99);
−
            }*/
+
color: #000;
 +
}
  
−
            #sub-navigation li.current ul {
+
.codrops-top span.right {
−
                display: inline;
+
float: right;
−
            }
+
}
  
−
            #sub-navigation ul ul {
+
.codrops-top span.right a {
−
                color:white;
+
float: left;
−
                padding-left:0px;
+
display: block;
−
            }
+
}
  
−
            #sub-navigation li {
+
/* Demo Buttons Style */
−
                display: inline;
+
.codrops-demos {
−
                float: left;
+
padding-top: 1em;
−
                padding-left: 10px;
+
font-size: 0.9em;
−
            }
+
}
  
−
            #sub-navigation li li{
+
.codrops-demos a {
−
                display: inline;
+
display: inline-block;
−
                float: left;
+
margin: 0.5em;
−
                padding-left: 5px;
+
padding: 0.7em 1.1em;
−
                font-style: italic;
+
border: 3px solid #b1aea6;
−
            }
+
color: #b1aea6;
 +
font-weight: 700;
 +
}
  
−
            #navigation ul li {
+
.codrops-demos a:hover,
−
                display: inline;
+
.codrops-demos a.current-demo,
−
                float:left;
+
.codrops-demos a.current-demo:hover {
−
            }
+
border-color: #89867e;
 +
color: #89867e;
 +
}
  
−
            .nav-item {
+
@media screen and (max-width: 46.0625em) {
−
                display: block;
+
−
                background-size: 32px;
+
−
                float: left;
+
−
                /*width:80px;*/
+
−
                background-position: center 15px ;
+
−
                background-repeat: no-repeat;
+
−
                line-height: 61px;
+
−
                text-align:center;
+
−
                padding-top: 10px;
+
−
                padding-right:10px;
+
−
                padding-left:10px;
+
−
                text-transform: uppercase;
+
−
            }
+
−
            .carousel-indicators {
+
−
                text-align:center;
+
−
            }
+
−
            .team {
+
−
                background-image: url();
+
−
            }
+
  
−
            .project {
+
.main {
−
                background-image: url();
+
padding: 0;
−
            }
+
}
  
−
            .results {
+
.column {
−
                background-image: url();
+
width: 100%;
−
            }
+
min-width: auto;
 +
min-height: auto;
 +
padding: 3em 2em;  
 +
}
  
−
            .outreach {
+
.column p {
−
                background-image: url();
+
text-align: left;
−
            }
+
font-size: 1.5em;
−
            #Topnav a:hover{
+
}
−
                background-color: #990000;
+
−
                color: white;
+
−
            }
+
  
−
            #Topnav a.active{
+
.column:nth-child(2) {
−
                background-color: #990000;
+
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
−
                color: white;
+
background-position: 90px 3em;
−
            }
+
}
 +
}
  
−
            #sub-navigation > ul {
+
/* Component styles */
−
                display:none;
+
−
            }
+
  
−
            body{
+
/*@font-face {
−
                padding-top: 120px;
+
font-family: 'icomoon';
−
            }
+
src:url('../fonts/icomoon.eot');
 +
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
 +
url('../fonts/icomoon.woff') format('woff'),
 +
url('../fonts/icomoon.ttf') format('truetype'),
 +
url('../fonts/icomoon.svg#icomoon') format('svg');
 +
font-weight: normal;
 +
font-style: normal;
 +
}*/
  
−
            .anchor{
+
/* Common styles of menus */
−
                display: block;
+
−
                height: 120px; /*same height as Topnav+subnav*/
+
−
                margin-top: -120px; /*same height as Topnav+subnav*/
+
−
                visibility: hidden;
+
−
            }
+
  
−
            #mobile-navigation {
+
.dl-menuwrapper {
−
                display:none;
+
width: 100%;
−
            }
+
max-width: 991px;
−
           
+
position: fixed; /* position the hamburger menu at the right*/
−
            /*#dl-menu {
+
    right: 0;
−
                display: none;
+
top: 20px; /**/
−
            }
+
-webkit-perspective: 1000px;
−
           
+
perspective: 1000px;
−
            .dl-menuwrapper {
+
-webkit-perspective-origin: 50% 200%;
−
                display: none;
+
perspective-origin: 50% 200%;
−
            }*/
+
}
−
           
+
−
            /*.slicknav_menu {
+
−
                display:none;
+
−
            }*/
+
−
           
+
−
            /*Control that the mobile navigation is shown when screen size is below 991px in width*/
+
−
            @media screen and (max-width: 991px) {
+
−
               
+
−
                /*.slicknav_menu {
+
−
                    display:block;
+
−
                }*/
+
−
                /*#dl-menu {
+
−
                    display: block;
+
−
                }
+
−
                .dl-menuwrapper {
+
−
                    display: block;
+
−
                }*/
+
−
               
+
−
                #mobile-navigation {
+
−
                    display: block;
+
−
                    top: 0px;
+
−
                }
+
−
               
+
−
            }
+
−
           
+
−
           
+
−
            /*For TU delft facebook and twitter logos*/
+
−
            div#afixLeft{
+
−
                width:50px;
+
−
                position:fixed;
+
−
                bottom:10%;
+
−
                left:0;
+
−
                z-index:11;
+
−
            }
+
  
−
            div#afixRight{
+
.dl-menuwrapper:first-child {
−
                width:50px;
+
margin-right: 100px;
−
                position:fixed;
+
}
−
                bottom:10%;
+
−
                right:0;
+
−
                z-index:11;
+
−
            }
+
−
                       
+
−
    </style>
+
−
    <script>
+
−
        // Source: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
+
−
        //The plugin for calling the dl-menu, aka the mobile_nav.
+
−
        $(document).ready(initiateDLmenu);
+
−
       
+
−
        $(function initiateDLmenu() {
+
−
            $( '#dl-menu' ).dlmenu({
+
−
animationClasses : {
+
−
                        classin : 'dl-animate-in-2',
+
−
                        classout : 'dl-animate-out-2'
+
−
                    }
+
−
});
+
−
            $( '#dl-menu' ).hide();
+
−
            $('.dl-menuwrapper').addClass('hidden-md');
+
−
            $('.dl-menuwrapper').addClass('hidden-lg');
+
−
});
+
−
    </script>
+
−
    <!--
+
−
    <script>
+
−
        //Source: http://slicknav.com/
+
−
        $(document).ready(initiateMobileView);
+
  
−
        function initiateMobileView() {
+
.dl-menuwrapper button {
−
            //$('#sidr').sidr();
+
background: #990000;
−
            $('#mobile-navigation').slicknav({
+
border: none;
−
                label:'',
+
width: 48px;
−
                closeOnClick:true,
+
height: 45px;
−
                allowParentLinks:true,
+
text-indent: -900em;
−
                prependTo:'#slick-navigation'
+
overflow: hidden;
−
            });
+
position: relative;
−
            $('#mobile-navigation').hide();
+
    float:left;
−
            $('.slicknav_menu').addClass('hidden-md');
+
cursor: pointer;
−
            $('.slicknav_menu').addClass('hidden-lg');
+
outline: none;
−
            $('.thumbinner').each(function() {
+
}
−
                $(this).width($(this).width() + 6);
+
−
            });
+
−
        }
+
−
    </script>
+
−
    -->
+
−
</head> <!-- -->
+
  
−
<header>
+
.dl-menuwrapper button:hover,
−
   
+
.dl-menuwrapper button.dl-active,
−
    <!-- Mobile navigation -->
+
.dl-menuwrapper ul {
−
   
+
background: #750000;
−
    <div id="mobile-navigation">
+
}
−
    <div id="dl-menu" class="dl-menuwrapper">
+
−
            <div class="container-fluid demo-2"> <!--Not certain if needed-->
+
−
                <button class="dl-trigger">Open Menu</button>
+
−
                        <ul class="dl-menu">
+
−
                            <li>
+
−
                                <a href="#">Achievements</a>
+
−
                                    <ul class="dl-submenu">
+
−
                                        <li><a href="#">Medal Requirements</a></li>
+
−
                                    </ul>
+
−
                            </li>
+
  
−
                            <li><a href="#">Project</a>
+
.dl-menuwrapper button:after {
−
                                <ul class="dl-submenu">
+
content: '';
−
                                    <li><a href="#" class="sub-nav-item">Description</a></li>
+
position: absolute;
−
                                    <li><a href="#" class="sub-nav-item">Toolbox</a></li>
+
width: 68%;
−
                                    <li><a href="#" class="sub-nav-item">Substrates</a></li>
+
height: 5px;
−
                                    <li><a href="#" class="sub-nav-item">Production</a></li>
+
background: #fff;
−
                                    <li><a href="#" class="sub-nav-item">References</a></li> 
+
top: 10px;
−
                                </ul>
+
left: 16%;
−
                            </li>
+
box-shadow:
 +
0 10px 0 #fff,
 +
0 20px 0 #fff;
 +
}
  
−
                            <li><a href="#">Parts</a>
+
.dl-menuwrapper ul {
−
                                <ul class="dl-submenu">
+
padding: 0;
−
                                    <li><a href="#" class="sub-nav-item">Overview</a></li>
+
list-style: none;
−
                                    <li><a href="#" class="sub-nav-item">Parts</a></li>
+
-webkit-transform-style: preserve-3d;
−
                                    <li><a href="#" class="sub-nav-item">Part Collection</a></li>
+
transform-style: preserve-3d;
−
                                </ul>
+
}
−
                            </li>
+
−
                       
+
−
                            <li><a href="#">Notebook</a>
+
−
                                <ul class="dl-submenu">
+
−
                                    <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>
+
−
                            </li>
+
  
−
                            <li><a href="#">Hardware</a>
+
.dl-menuwrapper li {
−
                                <ul class="dl-submenu">
+
position: relative;
−
                                    <li><a href="#" class="sub-nav-item">Overview</a></li>
+
}
−
                                    <li><a href="#" class="sub-nav-item">Measuring Growth</a></li>
+
−
                                    <li><a href="#" class="sub-nav-item">The Spectrometer</a></li>
+
−
                                    <li><a href="#" class="sub-nav-item">Design and Integration</a></li>
+
−
                                    <li><a href="#" class="sub-nav-item">DIY Manuals</a></li>
+
−
                                    <li><a href="#" class="sub-nav-item">Protocols</a></li>
+
−
                                </ul>
+
−
                            </li>
+
  
−
                            <li><a href="#">Modeling</a>
+
.dl-menuwrapper li a {
−
                                <ul class="dl-submenu">
+
display: block;
−
                                    <li><a href="#" class="sub-nav-item">Overview</a></li>
+
position: relative;
−
                                    <li><a href="#" class="sub-nav-item">Metabolic Modeling</a></li>
+
padding: 15px 20px;
−
                                </ul>
+
font-size: 16px;
−
                            </li>
+
line-height: 20px;
−
                           
+
font-weight: 300;
−
                            <li><a href="#">Practices</a>
+
color: #fff;
−
                                <ul class="dl-submenu">
+
outline: none;
−
                                    <li><a href="#" class="sub-nav-item">Overview</a></li>
+
}
−
                                    <li><a href="#" class="sub-nav-item">Regulations</a></li>
+
−
                                    <li><a href="#" class="sub-nav-item">Ethics</a></li>
+
−
                                    <li><a href="#" class="sub-nav-item">Experts' Opinions</a></li>
+
−
                                    <li><a href="#" class="sub-nav-item">iGEM Community</a></li>
+
−
                                    <li><a href="#" class="sub-nav-item">Outreach</a></li>
+
−
                                </ul>
+
−
                            </li>
+
−
                                 
+
−
                            <li><a href="#">Collaboration</a>
+
−
                                <ul class="dl-submenu">
+
−
                                    <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> 
+
−
                            </li>
+
−
                           
+
−
                            <li><a href="#">Attributions</a>
+
−
                                <ul class="dl-submenu">
+
−
                                    <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>
+
−
                            </li>
+
−
                           
+
−
                            <li><a href="#">Interlab</a>
+
−
                                <ul class="dl-submenu">
+
−
                                    <li><a href="#" class="sub-nav-item">Results</a></li>
+
−
                                    <li><a href="#" class="sub-nav-item">Protocols</a></li>
+
−
                                </ul>
+
−
                            </li>     
+
−
                        </ul>
+
−
                </div><!-- /dl-menuwrapper -->
+
−
        </div>
+
−
   
+
−
    </div><!-- /Mobile navigation -->
+
  
−
    <!-- Computer navigation -->
+
.no-touch .dl-menuwrapper li a:hover {
−
    <div id="headerWrapper" class="hidden-xs hidden-sm">
+
background: rgba(255,248,213,0.1);
−
        <!-- Top navigation bar -->
+
}
−
        <div id="Topnav">
+
−
            <div id="logo">
+
−
                <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">
+
−
                </a>
+
−
               
+
−
               
+
−
                <!--<div class=col2> Social media logos and links
+
−
                    <div class="row1">
+
−
                        <p>FOLLOW US</p>
+
−
                    </div>
+
  
−
                    <div class="row2">                   
+
.dl-menuwrapper li.dl-back > a {
−
                        <div class="col2-1">
+
padding-left: 30px;
−
                            <a href="https://www.facebook.com/dtubiobuilders">
+
background: rgba(0,0,0,0.1);
−
                                <img class="SocialMedia" src="https://static.igem.org/mediawiki/2016/6/6c/T--DTU-Denmark--FB_logo_60px.png" alt="Facebook link">
+
}
−
                            </a>
+
−
                        </div>
+
−
                        <div class="col2-2">
+
−
                            <a href="https://twitter.com/igem_dtu">
+
−
                                <img class="SocialMedia" src="https://static.igem.org/mediawiki/2016/d/db/T--DTU-Denmark--Twitter-logo_60px.png" alt="Twitter link">
+
−
                            </a>
+
−
                        </div>
+
−
                    </div>
+
−
                </div>-->
+
−
               
+
−
            </div>
+
−
           
+
−
            <div id="navigation">
+
−
                <ul id="nav-items">
+
−
                    <li><a href="#" class="achievements nav-item" id="achievements"><strong>Achievements</strong></a></li>
+
−
                    <li><a href="#" class="project nav-item" id="project"><strong>Project</strong></a></li>
+
−
                    <li><a href="#" class="results nav-item" id="parts"><strong>Parts</strong></a></li>
+
−
                    <li><a href="#" class="notebook nav-item" id="notebook"><strong>Notebook</strong></a></li>
+
−
                    <li><a href="#" class="hardware nav-item" id="hardware"><strong>Hardware</strong></a></li>
+
−
                    <li><a href="#" class="modeling nav-item" id="modeling"><strong>Modeling</strong></a></li>
+
−
                    <li><a href="#" class="practices nav-item" id="practices"><strong>Practices</strong></a></li>
+
−
                    <li><a href="#" class="collaborations nav-item" id="collaborations"><strong>Collaboration</strong></a></li>
+
−
                    <li><a href="#" class="attributions nav-item" id="attributions"><strong>Attributions</strong></a></li>
+
−
                    <li><a href="#" class="interlab nav-item" id="interlab"><strong>InterLab</strong></a></li>
+
−
                </ul>
+
−
            </div>
+
−
        </div> <!--/ Top navigation bar -->
+
−
       
+
−
       
+
−
        <!-- Sub navigation bar -->
+
−
        <div id="sub-navigation-wrapper">
+
−
            <div id="sub-navigation">
+
−
               
+
−
                <ul id="achievements-sub">
+
−
                  <li><a href="#" class="sub-nav-item">Medal Requirements</a></li>
+
−
                </ul>
+
−
               
+
−
                <ul id="project-sub">
+
−
                    <li><a href="#" class="sub-nav-item">Description</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Toolbox</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Substrates</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Production</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">References</a></li> 
+
−
                </ul>
+
−
               
+
−
                <ul id="parts-sub">
+
−
                    <li><a href="#" class="sub-nav-item">Overview</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Parts</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Part Collection</a></li>
+
−
                </ul>
+
−
               
+
−
                <ul id="notebook-sub">
+
−
                    <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">
+
−
                    <li><a href="#" class="sub-nav-item">Overview</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Measuring Growth</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">The Spectrometer</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Design and Integration</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">DIY Manuals</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Protocols</a></li>
+
−
                </ul>
+
−
               
+
−
                <ul id="modeling-sub">
+
−
                    <li><a href="#" class="sub-nav-item">Overview</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Metabolic Modeling</a></li>
+
−
                </ul>
+
−
               
+
−
                <ul id="practices-sub">
+
−
                    <li><a href="#" class="sub-nav-item">Overview</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Regulations</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Ethics</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Experts' Opinions</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">iGEM Community</a></li>
+
−
                    <li><a href="#" class="sub-nav-item">Outreach</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 -->
+
  
 +
.dl-menuwrapper li.dl-back:after,
 +
.dl-menuwrapper li > a:not(:only-child):after {
 +
position: absolute;
 +
top: 0;
 +
line-height: 50px;
 +
font-family: 'icomoon';
 +
speak: none;
 +
-webkit-font-smoothing: antialiased;
 +
content: "\e000";
 +
}
  
−
</header>
+
.dl-menuwrapper li.dl-back:after {
 +
left: 10px;
 +
color: rgba(212,204,198,0.3);
 +
-webkit-transform: rotate(180deg);
 +
transform: rotate(180deg);
 +
}
  
−
<body>
+
.dl-menuwrapper li > a:after {
 +
right: 10px;
 +
color: rgba(0,0,0,0.15);
 +
}
  
−
</body>
+
.dl-menuwrapper .dl-menu {
 +
margin: 5px 0 0 0;
 +
position: absolute;
 +
width: 100%;
 +
opacity: 0;
 +
pointer-events: none;
 +
-webkit-transform: translateY(10px);
 +
transform: translateY(10px);
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
  
−
<footer>
+
.dl-menuwrapper .dl-menu.dl-menu-toggle {
−
   
+
transition: all 0.3s ease;
−
</footer>
+
}
  
−
<!--<script>
+
.dl-menuwrapper .dl-menu.dl-menuopen {
−
var jumboHeight = $('.jumbotron#cover').outerHeight();
+
opacity: 1;
 +
pointer-events: auto;
 +
-webkit-transform: translateY(0px);
 +
transform: translateY(0px);
 +
}
  
−
function parallax() {
+
/* Hide the inner submenus */
−
  var scrolled = $(window).scrollTop();
+
.dl-menuwrapper li .dl-submenu {
−
  $('.bg').css('height', (jumboHeight - scrolled) + 'px');
+
display: none;
 
}
 
}
  
−
$(window).scroll(function(e) {
+
/*
−
  parallax();
+
When a submenu is openend, we will hide all li siblings.
−
});
+
For that we give a class to the parent menu called "dl-subview".
 +
We also hide the submenu link.
 +
The opened submenu will get the class "dl-subviewopen".
 +
All this is done for any sub-level being entered.
 +
*/
 +
.dl-menu.dl-subview li,
 +
.dl-menu.dl-subview li.dl-subviewopen > a,
 +
.dl-menu.dl-subview li.dl-subview > a {
 +
display: none;
 +
}
  
−
</script>
+
.dl-menu.dl-subview li.dl-subview,
−
<script>
+
.dl-menu.dl-subview li.dl-subview .dl-submenu,
−
function centerModal() {
+
.dl-menu.dl-subview li.dl-subviewopen,
−
    $(this).css('display', 'block');
+
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
−
    var $dialog = $(this).find(".modal-dialog");
+
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
−
    var offset = ($(window).height() - $dialog.height()) / 2;
+
display: block;
−
    // Center modal vertically in window
+
−
    $dialog.css("margin-top", offset);
+
 
}
 
}
  
−
$('.modal').on('show.bs.modal', centerModal);
+
/* Dynamically added submenu outside of the menu context */
−
$(window).on("resize", function () {
+
.dl-menuwrapper > .dl-submenu {
−
    $('.modal:visible').each(centerModal);
+
position: absolute;
−
});
+
width: 100%;
−
</script>-->
+
top: 50px;
 +
left: 0;
 +
margin: 0;
 +
}
 +
 
 +
/* Animation classes for moving out and in */
 +
 
 +
.dl-menu.dl-animate-out-1 {
 +
-webkit-animation: MenuAnimOut1 0.4s;
 +
animation: MenuAnimOut1 0.4s;
 +
}
 +
 
 +
.dl-menu.dl-animate-out-2 {
 +
-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
 +
animation: MenuAnimOut2 0.3s ease-in-out;
 +
}
 +
 
 +
.dl-menu.dl-animate-out-3 {
 +
-webkit-animation: MenuAnimOut3 0.4s ease;
 +
animation: MenuAnimOut3 0.4s ease;
 +
}
 +
 
 +
.dl-menu.dl-animate-out-4 {
 +
-webkit-animation: MenuAnimOut4 0.4s ease;
 +
animation: MenuAnimOut4 0.4s ease;
 +
}
 +
 
 +
.dl-menu.dl-animate-out-5 {
 +
-webkit-animation: MenuAnimOut5 0.4s ease;
 +
animation: MenuAnimOut5 0.4s ease;
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimOut1 {
 +
0% { }
 +
50% {
 +
-webkit-transform: translateZ(-250px) rotateY(30deg);
 +
}
 +
75% {
 +
-webkit-transform: translateZ(-372.5px) rotateY(15deg);
 +
opacity: .5;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(-500px) rotateY(0deg);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimOut2 {
 +
0% { }
 +
100% {
 +
-webkit-transform: translateX(-100%);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimOut3 {
 +
0% { }
 +
100% {
 +
-webkit-transform: translateZ(300px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimOut4 {
 +
0% { }
 +
100% {
 +
-webkit-transform: translateZ(-300px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimOut5 {
 +
0% { }
 +
100% {
 +
-webkit-transform: translateY(40%);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimOut1 {
 +
0% { }
 +
50% {
 +
-webkit-transform: translateZ(-250px) rotateY(30deg);
 +
transform: translateZ(-250px) rotateY(30deg);
 +
}
 +
75% {
 +
-webkit-transform: translateZ(-372.5px) rotateY(15deg);
 +
transform: translateZ(-372.5px) rotateY(15deg);
 +
opacity: .5;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(-500px) rotateY(0deg);
 +
transform: translateZ(-500px) rotateY(0deg);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimOut2 {
 +
0% { }
 +
100% {
 +
-webkit-transform: translateX(-100%);
 +
transform: translateX(-100%);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimOut3 {
 +
0% { }
 +
100% {
 +
-webkit-transform: translateZ(300px);
 +
transform: translateZ(300px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimOut4 {
 +
0% { }
 +
100% {
 +
-webkit-transform: translateZ(-300px);
 +
transform: translateZ(-300px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimOut5 {
 +
0% { }
 +
100% {
 +
-webkit-transform: translateY(40%);
 +
transform: translateY(40%);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
.dl-menu.dl-animate-in-1 {
 +
-webkit-animation: MenuAnimIn1 0.3s;
 +
animation: MenuAnimIn1 0.3s;
 +
}
 +
 
 +
.dl-menu.dl-animate-in-2 {
 +
-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
 +
animation: MenuAnimIn2 0.3s ease-in-out;
 +
}
 +
 
 +
.dl-menu.dl-animate-in-3 {
 +
-webkit-animation: MenuAnimIn3 0.4s ease;
 +
animation: MenuAnimIn3 0.4s ease;
 +
}
 +
 
 +
.dl-menu.dl-animate-in-4 {
 +
-webkit-animation: MenuAnimIn4 0.4s ease;
 +
animation: MenuAnimIn4 0.4s ease;
 +
}
 +
 
 +
.dl-menu.dl-animate-in-5 {
 +
-webkit-animation: MenuAnimIn5 0.4s ease;
 +
animation: MenuAnimIn5 0.4s ease;
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimIn1 {
 +
0% {
 +
-webkit-transform: translateZ(-500px) rotateY(0deg);
 +
opacity: 0;
 +
}
 +
20% {
 +
-webkit-transform: translateZ(-250px) rotateY(30deg);
 +
opacity: 0.5;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px) rotateY(0deg);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimIn2 {
 +
0% {
 +
-webkit-transform: translateX(-100%);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateX(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimIn3 {
 +
0% {
 +
-webkit-transform: translateZ(300px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimIn4 {
 +
0% {
 +
-webkit-transform: translateZ(-300px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes MenuAnimIn5 {
 +
0% {
 +
-webkit-transform: translateY(40%);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateY(0);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimIn1 {
 +
0% {
 +
-webkit-transform: translateZ(-500px) rotateY(0deg);
 +
transform: translateZ(-500px) rotateY(0deg);
 +
opacity: 0;
 +
}
 +
20% {
 +
-webkit-transform: translateZ(-250px) rotateY(30deg);
 +
transform: translateZ(-250px) rotateY(30deg);
 +
opacity: 0.5;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px) rotateY(0deg);
 +
transform: translateZ(0px) rotateY(0deg);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimIn2 {
 +
0% {
 +
-webkit-transform: translateX(-100%);
 +
transform: translateX(-100%);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateX(0px);
 +
transform: translateX(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimIn3 {
 +
0% {
 +
-webkit-transform: translateZ(300px);
 +
transform: translateZ(300px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px);
 +
transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimIn4 {
 +
0% {
 +
-webkit-transform: translateZ(-300px);
 +
transform: translateZ(-300px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px);
 +
transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes MenuAnimIn5 {
 +
0% {
 +
-webkit-transform: translateY(40%);
 +
transform: translateY(40%);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
 +
-webkit-animation: SubMenuAnimIn1 0.4s ease;
 +
animation: SubMenuAnimIn1 0.4s ease;
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
 +
-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
 +
animation: SubMenuAnimIn2 0.3s ease-in-out;
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
 +
-webkit-animation: SubMenuAnimIn3 0.4s ease;
 +
animation: SubMenuAnimIn3 0.4s ease;
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
 +
-webkit-animation: SubMenuAnimIn4 0.4s ease;
 +
animation: SubMenuAnimIn4 0.4s ease;
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
 +
-webkit-animation: SubMenuAnimIn5 0.4s ease;
 +
animation: SubMenuAnimIn5 0.4s ease;
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimIn1 {
 +
0% {
 +
-webkit-transform: translateX(50%);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateX(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimIn2 {
 +
0% {
 +
-webkit-transform: translateX(100%);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateX(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimIn3 {
 +
0% {
 +
-webkit-transform: translateZ(-300px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimIn4 {
 +
0% {
 +
-webkit-transform: translateZ(300px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimIn5 {
 +
0% {
 +
-webkit-transform: translateZ(-200px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimIn1 {
 +
0% {
 +
-webkit-transform: translateX(50%);
 +
transform: translateX(50%);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateX(0px);
 +
transform: translateX(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimIn2 {
 +
0% {
 +
-webkit-transform: translateX(100%);
 +
transform: translateX(100%);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateX(0px);
 +
transform: translateX(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimIn3 {
 +
0% {
 +
-webkit-transform: translateZ(-300px);
 +
transform: translateZ(-300px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px);
 +
transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimIn4 {
 +
0% {
 +
-webkit-transform: translateZ(300px);
 +
transform: translateZ(300px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0px);
 +
transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimIn5 {
 +
0% {
 +
-webkit-transform: translateZ(-200px);
 +
transform: translateZ(-200px);
 +
opacity: 0;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(0);
 +
transform: translateZ(0);
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
 +
-webkit-animation: SubMenuAnimOut1 0.4s ease;
 +
animation: SubMenuAnimOut1 0.4s ease;
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
 +
-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
 +
animation: SubMenuAnimOut2 0.3s ease-in-out;
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
 +
-webkit-animation: SubMenuAnimOut3 0.4s ease;
 +
animation: SubMenuAnimOut3 0.4s ease;
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
 +
-webkit-animation: SubMenuAnimOut4 0.4s ease;
 +
animation: SubMenuAnimOut4 0.4s ease;
 +
}
 +
 
 +
.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
 +
-webkit-animation: SubMenuAnimOut5 0.4s ease;
 +
animation: SubMenuAnimOut5 0.4s ease;
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimOut1 {
 +
0% {
 +
-webkit-transform: translateX(0%);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateX(50%);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimOut2 {
 +
0% {
 +
-webkit-transform: translateX(0%);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateX(100%);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimOut3 {
 +
0% {
 +
-webkit-transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(-300px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimOut4 {
 +
0% {
 +
-webkit-transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(300px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes SubMenuAnimOut5 {
 +
0% {
 +
-webkit-transform: translateZ(0);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(-200px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimOut1 {
 +
0% {
 +
-webkit-transform: translateX(0%);
 +
transform: translateX(0%);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateX(50%);
 +
transform: translateX(50%);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimOut2 {
 +
0% {
 +
-webkit-transform: translateX(0%);
 +
transform: translateX(0%);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateX(100%);
 +
transform: translateX(100%);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimOut3 {
 +
0% {
 +
-webkit-transform: translateZ(0px);
 +
transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(-300px);
 +
transform: translateZ(-300px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimOut4 {
 +
0% {
 +
-webkit-transform: translateZ(0px);
 +
transform: translateZ(0px);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(300px);
 +
transform: translateZ(300px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
@keyframes SubMenuAnimOut5 {
 +
0% {
 +
-webkit-transform: translateZ(0);
 +
transform: translateZ(0);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: translateZ(-200px);
 +
transform: translateZ(-200px);
 +
opacity: 0;
 +
}
 +
}
 +
 
 +
/* No JS Fallback */
 +
.no-js .dl-menuwrapper .dl-menu {
 +
position: relative;
 +
opacity: 1;
 +
-webkit-transform: none;
 +
transform: none;
 +
}
 +
 
 +
.no-js .dl-menuwrapper li .dl-submenu {
 +
display: block;
 +
}
 +
 
 +
.no-js .dl-menuwrapper li.dl-back {
 +
display: none;
 +
}
 +
 
 +
.no-js .dl-menuwrapper li > a:not(:only-child) {
 +
background: rgba(0,0,0,0.1);
 +
}
 +
 
 +
.no-js .dl-menuwrapper li > a:not(:only-child):after {
 +
content: '';
 +
}
 +
 
 +
/* Colors for demos */
 +
 
 +
/* Demo 1 */
 +
.demo-1 .dl-menuwrapper button {
 +
background: #c62860;
 +
}
 +
 
 +
.demo-1 .dl-menuwrapper button:hover,
 +
.demo-1 .dl-menuwrapper button.dl-active,
 +
.demo-1 .dl-menuwrapper ul {
 +
background: #9e1847;
 +
}
 +
 
 +
/* Demo 2 */
 +
.demo-2 .dl-menuwrapper button {
 +
background: #990000;
 +
}
 +
 
 +
.demo-2 .dl-menuwrapper button:hover,
 +
.demo-2 .dl-menuwrapper button.dl-active,
 +
.demo-2 .dl-menuwrapper ul {
 +
background: #990000;
 +
}
 +
 
 +
/* Demo 3 */
 +
.demo-3 .dl-menuwrapper button {
 +
background: #08cbc4;
 +
}
 +
 
 +
.demo-3 .dl-menuwrapper button:hover,
 +
.demo-3 .dl-menuwrapper button.dl-active,
 +
.demo-3 .dl-menuwrapper ul {
 +
background: #00b4ae;
 +
}
 +
 
 +
/* Demo 4 */
 +
.demo-4 .dl-menuwrapper button {
 +
background: #90b912;
 +
}
 +
 
 +
.demo-4 .dl-menuwrapper button:hover,
 +
.demo-4 .dl-menuwrapper button.dl-active,
 +
.demo-4 .dl-menuwrapper ul {
 +
background: #79a002;
 +
}
 +
 
 +
/* Demo 5 */
 +
.demo-5 .dl-menuwrapper button {
 +
background: #744783;
 +
}
 +
 
 +
.demo-5 .dl-menuwrapper button:hover,
 +
.demo-5 .dl-menuwrapper button.dl-active,
 +
.demo-5 .dl-menuwrapper ul {
 +
background: #643771;
 +
}
 +
 
 +
</style>
 +
 
 
</html>
 
</html>

Revision as of 10:22, 27 July 2016