|
|
| Line 99: |
Line 99: |
| | background: #99c18e no-repeat 50% 50%; | | background: #99c18e no-repeat 50% 50%; |
| | background-size: cover; | | background-size: cover; |
| − | }
| |
| − | .js-sticky {
| |
| − | display:none;
| |
| − | }
| |
| − | .js-sticky.is-sticky {
| |
| − | position: fixed;
| |
| − | display:block;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | top: 0;
| |
| − | bottom: auto;
| |
| − | }
| |
| − | .site-header {
| |
| − | background: #323537;
| |
| − | padding: 1.25em 0;
| |
| − | z-index:100;
| |
| − | }
| |
| − | .site-header > .container {
| |
| − | height:50px;
| |
| − | display: -webkit-box;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | -webkit-box-pack: justify;
| |
| − | -ms-flex-pack: justify;
| |
| − | justify-content: space-between;
| |
| − | -webkit-box-align: center;
| |
| − | -ms-flex-align: center;
| |
| − | align-items: center;
| |
| | } | | } |
| | | | |
| − | .site-header__title {
| |
| − | vertical-align: middle;
| |
| − | margin: 0;
| |
| − | color: #eee;
| |
| − | text-decoration: none;
| |
| − | font: 700 1.5em/1.25 "Quicksand", sans-serif;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .site-header__logo{
| |
| − | margin-left:20px;
| |
| − | }
| |
| − |
| |
| − | .site-header__title:hover,
| |
| − | .site-header__title:focus {
| |
| − | color: #99c18e;
| |
| − | }
| |
| − | .site-menu__item {
| |
| − | color: #eee;
| |
| − | text-decoration: none;
| |
| − | font: 300 1.25em/1.25 "Quicksand", sans-serif;
| |
| − | display:inline-block;
| |
| − | }
| |
| − | .cat_name{
| |
| − | text-transform: uppercase;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | .site-menu__item:hover,
| |
| − | .site-menu__item:focus {
| |
| − | color: #99c18e;
| |
| − | }
| |
| − | .site-menu__item{
| |
| − | display:none;
| |
| − | position:relative;
| |
| − | width:17%;
| |
| − | }
| |
| − | .site-menu__item#scroll_down{
| |
| − | display:inline-block;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .js-sticky.is-sticky .site-menu__item{
| |
| − | display:inline-block;
| |
| − | }
| |
| − | .js-sticky.is-sticky .site-menu__item#scroll_down{
| |
| − | display:none;
| |
| − | }
| |
| − | .js-sticky.is-sticky nav.site-menu{
| |
| − | height:100%;
| |
| − | width:60%;
| |
| − | }
| |
| − |
| |
| − | .cat_name{
| |
| − | line-height: 50px;
| |
| − | height:50px;
| |
| − | }
| |
| − | .site-menu__item.no-subnav{
| |
| − | width:auto;
| |
| − | }
| |
| − |
| |
| − | ul.subnav{
| |
| − | position:absolute;
| |
| − | top:70px;
| |
| − | right:0px;
| |
| − | background:#323537;
| |
| − | width:100%;
| |
| − | max-height:0;
| |
| − | overflow: hidden;
| |
| − | transition: max-height 400ms ease;
| |
| − | }
| |
| − | ul.subnav li{
| |
| − | list-style-type: none;
| |
| − | padding:10px;
| |
| − | }
| |
| − | .site-menu__item a, .site-menu__item a:visited, .site-menu__item a:active{
| |
| − | text-decoration: none;
| |
| − | color:white;
| |
| − | }
| |
| − | .site-menu__item a:hover{
| |
| − | color: #99c18e;
| |
| − | }
| |
| − |
| |
| − | /* HAMBURGER RESPONSIVE MENU */
| |
| − |
| |
| − | .hamburger{
| |
| − | display:none;
| |
| − | color:#eee;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − | .hamburger:hover, .hamburger:active, .hamburger:focus{
| |
| − | color:#99c18e;
| |
| − | }
| |
| − | .site-menu.show-nav{
| |
| − | display:block;
| |
| − | width:400px !important;
| |
| − | background:#323537;
| |
| − | position:fixed;
| |
| − | top:90px;
| |
| − | right:0;
| |
| − | }
| |
| − | .site-menu.show-nav .site-menu__item{
| |
| − | display:block;
| |
| − | width:100%;
| |
| − | }
| |
| − | .site-menu.show-nav .subnav{
| |
| − | display:block;
| |
| − | position:static;
| |
| − | max-height: 0px;
| |
| − | }
| |
| − | .site-menu.show-nav .subnav.show-subnav{
| |
| − | max-height:1000px;
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1300px){
| |
| − | .hamburger{
| |
| − | display:block;
| |
| − | margin-right:20px;
| |
| − | }
| |
| − | .site-menu{
| |
| − | display: none;
| |
| − | }
| |
| − | }
| |
| | </style> | | </style> |
| | | | |
| Line 256: |
Line 108: |
| | | | |
| | | | |
| | + | {{INSA-UPS_France/Header2}} |
| | | | |
| − | <header class="site-header js-sticky">
| |
| | | | |
| − |
| |
| − |
| |
| − | <div class="container" style="position:relative; ">
| |
| − | <a href="#" class="site-header__logo">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/2/2a/T--INSA-UPS_France--Logo.png" alt="" style="width:70px;">
| |
| − | </a>
| |
| − | <div class="site-header__title">
| |
| − | Croc'n Cholera <br/>
| |
| − | <span style="font-size:12pt;">iGEM UPS-INSA Toulouse 2017</span>
| |
| − | </div>
| |
| − |
| |
| − | <nav class="site-menu" style="text-align: center;">
| |
| − |
| |
| − | <div class="site-menu__item no-subnav">
| |
| − | <a href="index3.html"><i class="fa fa-home"></i></a>
| |
| − | </div>
| |
| − | <div class="site-menu__item">
| |
| − | <div class="cat_name">Team <i class="fa fa-caret-down"></i></div>
| |
| − | <ul class="subnav">
| |
| − | <li><a href="members.html">Members</a></li>
| |
| − | <li><a href="supports.html">Supports</a></li>
| |
| − | <li><a href="attributions.html">Attributions</a></li>
| |
| − | <li><a href="funfacts.html">Fun facts</a></li>
| |
| − | <li><a href="collaborations.html">Collaborations</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <div class="site-menu__item">
| |
| − | <div class="cat_name">Project <i class="fa fa-caret-down"></i></div>
| |
| − | <ul class="subnav">
| |
| − | <li><a href="description.html">Description</a></li>
| |
| − | <li><a href="design.html">Design</a></li>
| |
| − | <li><a href="results.html">Results</a></li>
| |
| − | <li><a href="parts.html">Parts</a></li>
| |
| − | <li><a href="entrepreneurship.html">Entrepreneurship</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <div class="site-menu__item">
| |
| − | <div class="cat_name">Model <i class="fa fa-caret-down"></i></div>
| |
| − | <ul class="subnav">
| |
| − | <li><a href="modeloverview.html">Overview</a></li>
| |
| − | <li><a href="sbgnrepresentation.html">SBGN Representation</a></li>
| |
| − | <li><a href="odesystem.html">ODE System</a></li>
| |
| − | <li><a href="modelresults.html">Results</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <div class="site-menu__item">
| |
| − | <div class="cat_name">Notebook <i class="fa fa-caret-down"></i></div>
| |
| − | <ul class="subnav">
| |
| − | <li><a href="labbook.html">Lab Book</a></li>
| |
| − | <li><a href="experiments.html">Experiments</a></li>
| |
| − | <li><a href="safety.html">Safety</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <div class="site-menu__item">
| |
| − | <div class="cat_name">Outreach <i class="fa fa-caret-down"></i></div>
| |
| − | <ul class="subnav">
| |
| − | <li><a href="hpoverview.html">Overview</a></li>
| |
| − | <li><a href="publicengagement.html">Public Engagements</a></li>
| |
| − | <li><a href="hpsilver.html">Silver</a></li>
| |
| − | <li><a href="ihp">Integrated Human Practices</a></li>
| |
| − | <li><a href="press.html">Press</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <div class="site-menu__item no-subnav">
| |
| − | <a href="achievements.html"><i class="fa fa-trophy"></i></a>
| |
| − | </div>
| |
| − |
| |
| − | </nav>
| |
| − | <i class="fa fa-navicon fa-2x icon hamburger"></i>
| |
| − | </div>
| |
| − | </header>
| |
| | <main class="site-main"> | | <main class="site-main"> |
| | | | |
| Line 702: |
Line 483: |
| | </script> | | </script> |
| | | | |
| − | <script type="text/javascript">
| |
| | | | |
| − | // NAV BAR SUBNAV CLICK
| |
| − |
| |
| − | $(document).on("click",".cat_name", function(){
| |
| − | if($(this).parent().children('.subnav').css("max-height")=="0px"){
| |
| − | $('.subnav').css("max-height","0px");
| |
| − | $(this).parent().children('.subnav').css("max-height","1000px");
| |
| − | }
| |
| − | else{
| |
| − | $(this).parent().children('.subnav').css("max-height","0px");
| |
| − | }
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | // HAMBURGER MENU
| |
| − |
| |
| − | $('.hamburger').click(function(e){
| |
| − | $('.site-menu').toggleClass('show-nav');
| |
| − | });
| |
| − |
| |
| − |
| |
| − | $(document).on ("click", ".site-menu__item", function () {
| |
| − | if(!($(this).parent().children('.subnav').hasClass('show-subnav'))){
| |
| − | $('.show-subnav').removeClass('show-subnav');
| |
| − | $(this).parent().children('.subnav').addClass('show-subnav');
| |
| − | }
| |
| − | else{
| |
| − | $('.show-subnav').removeClass('show-subnav');
| |
| − | }
| |
| − | });
| |
| − | </script>
| |
| | | | |
| | | | |
| Line 758: |
Line 505: |
| | </script> | | </script> |
| | | | |
| − | | + | {{INSA-UPS_France/Header_script}} |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
