Difference between revisions of "Template:Freiburg/MenubarTest"

 
(39 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
         <title>""</title>
 
         <title>""</title>
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
−
 
+
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
         <style>
 
         <style>
 
/* ============= BEGIN: Stylesheet for navigation menu ============= */
 
/* ============= BEGIN: Stylesheet for navigation menu ============= */
Line 21: Line 21:
 
/* ==== End General Settings ==== */
 
/* ==== End General Settings ==== */
  
 +
@media screen and (min-width: 911px){
  
 
#naviconwrapper {
 
#naviconwrapper {
Line 156: Line 157:
 
}
 
}
 
/* ==== End classes for icons ==== */
 
/* ==== End classes for icons ==== */
−
 
−
@media screen and (min-width: 850px){
 
  
 
/* ==== Begin running chip ==== */
 
/* ==== Begin running chip ==== */
Line 365: Line 364:
 
#notebook-sub{
 
#notebook-sub{
 
     display: none;
 
     display: none;
−
     left: 77.6%;
+
     left: 76%;
 +
    width: 120px;
 
}
 
}
  
Line 411: Line 411:
  
 
.navsub2 {
 
.navsub2 {
−
     background-color: #0051a2;
+
     background-color: #1962AB;
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
 
.navsub2before {
 
.navsub2before {
−
     background-color: #0051A2;
+
     background-color: #1962AB;
 
     border-top-right-radius: 8px;
 
     border-top-right-radius: 8px;
 
     opacity: 0.6;
 
     opacity: 0.6;
Line 436: Line 436:
  
 
/* ==== End Settings Submenu Level 2 ==== */
 
/* ==== End Settings Submenu Level 2 ==== */
 +
 +
#smallnav{
 +
    display: none;
 +
}
  
 
} /* end media query*/
 
} /* end media query*/
  
−
@media screen and (max-width: 849px){
+
@media screen and (max-width: 910px){
 +
    #header{
 +
        top: -9000px;
 +
        opacity: 0;
 +
    }
 +
 
 +
/* avoid space to content box */
 +
    .content_background_wrapper{
 +
        padding-top: 20px;
 +
    }
  
−
#header{
 
−
  top: -9000px;
 
−
  opacity: 0;
 
 
}
 
}
  
−
nav {
+
/* Styles for smallnav */
 +
 
 +
/* Clearfix */
 +
.clearfix:before,
 +
.clearfix:after {
 +
    content: " ";
 +
    display: table;
 +
}
 +
.clearfix:after {
 +
    clear: both;
 +
}
 +
.clearfix {
 +
    *zoom: 1;
 +
}
 +
 
 +
 
 +
/* Basic Styles */
 +
 
 +
#smallnav {
 
     height: 40px;
 
     height: 40px;
 
     width: 100%;
 
     width: 100%;
−
     background: #455868;
+
     background: #0051A2;
 
     font-size: 11pt;
 
     font-size: 11pt;
 +
    font-family: 'PT Sans', Arial, sans-serif;
 
     font-weight: bold;
 
     font-weight: bold;
−
     position: relative;
+
     position: fixed;
−
     border-bottom: 2px solid #283744;
+
     border-bottom: 2px solid #CFCFCF;
 +
    z-index: 3000;
 +
    opacity: 0.9;
 
}
 
}
−
 
+
#smallnav ul {
−
nav ul {
+
 
     padding: 0;
 
     padding: 0;
 
     margin: 0 auto;
 
     margin: 0 auto;
−
     width: 600px;
+
     width: 720px;
 
     height: 40px;
 
     height: 40px;
 
}
 
}
−
 
+
#smallnav li {
−
/* display list elements on the left */
+
−
nav li {
+
 
     display: inline;
 
     display: inline;
 
     float: left;
 
     float: left;
 
}
 
}
−
 
+
#smallnav a {
−
/* 6 elements in 600 px make 100px per element */
+
−
nav a {
+
 
     color: #fff;
 
     color: #fff;
 
     display: inline-block;
 
     display: inline-block;
−
     width: 100px;
+
     width: 120px;
 
     text-align: center;
 
     text-align: center;
 
     text-decoration: none;
 
     text-decoration: none;
 
     line-height: 40px;
 
     line-height: 40px;
−
    text-shadow: 1px 1px 0px #283744;
 
 
}
 
}
−
 
+
#smallnav li a {
−
nav li a {
+
−
    border-right: 1px solid #576979;
+
 
     box-sizing:border-box;
 
     box-sizing:border-box;
 
     -moz-box-sizing:border-box;
 
     -moz-box-sizing:border-box;
 
     -webkit-box-sizing:border-box;
 
     -webkit-box-sizing:border-box;
 
}
 
}
−
nav li:last-child a {
+
#smallnav li:last-child a {
 
     border-right: 0;
 
     border-right: 0;
 +
}
 +
#smallnav a:hover, #smallnav a:active {
 +
    background-color: #1D629F;
 +
}
 +
#smallnav a#pull {
 +
    display: none;
 +
}
 +
 +
/*Styles for screen 600px and lower*/
 +
@media screen and (max-width: 720px) {
 +
    #smallnav {
 +
        height: auto;
 +
        background: #3B7EBF;
 +
    }
 +
    #smallnav ul {
 +
        width: 100%;
 +
        display: block;
 +
        height: auto;
 +
    }
 +
    #smallnav li {
 +
        width: 50%;
 +
        float: left;
 +
        position: relative;
 +
        margin-bottom: 0;
 +
    }
 +
 +
    #smallnav a {
 +
        text-align: left;
 +
        width: 100%;
 +
        text-indent: 25px;
 +
    }
 +
 +
    #smallnav {
 +
        border-bottom: 0;
 +
    }
 +
    #smallnav ul {
 +
        display: none;
 +
        height: auto;
 +
    }
 +
    #smallnav a#pull {
 +
        display: block;
 +
        background-color: #0051A2;
 +
        width: 100%;
 +
        position: relative;
 +
    }
 +
    #smallnav a#pull:after {
 +
        content:"";
 +
        background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat;
 +
        background-size: auto 90%;
 +
        width: 30px;
 +
        height: 30px;
 +
        display: inline-block;
 +
        position: absolute;
 +
        right: 15px;
 +
        top: 5px;
 +
    }
 +
 +
 +
/* ==== classes for icons ==== */
 +
#home_small {
 +
    background-color: #3673AF;
  
−
nav a:hover, nav a:active {
 
−
    background-color: #8c99a4;
 
 
}
 
}
  
−
nav a#pull {
+
#home_small a {
−
     display: none;
+
     background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat;
−
}
+
    background-position: left;
 +
    background-size: auto 100%;
 +
    background-repeat: no-repeat;
 +
    padding-left: 40px;
 +
    color: #FFF;
 +
}
  
−
/* clears float around elemnts with this class */
+
#project_small {
−
/* class clearfix should be used on all elements containing floats */
+
    background-color: #3673AF;
  
−
.clearfix:before,
 
−
.clearfix:after {
 
−
    content: " ";
 
−
    display: table;
 
 
}
 
}
−
.clearfix:after {
+
 
−
     clear: both;
+
#project_small a {
 +
    background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat;
 +
    background-position: left;
 +
    background-size: auto 90%;
 +
    background-repeat: no-repeat;
 +
    padding-left: 40px;
 +
     color: #FFF;
 
}
 
}
−
.clearfix {
+
 
−
     *zoom: 1;
+
#team_small {
 +
    background-color: #3673AF;
 +
 
 +
}
 +
 
 +
#team_small a {
 +
    background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat;
 +
    background-position: left;
 +
    background-size: auto 90%;
 +
    background-repeat: no-repeat;
 +
    padding-left: 40px;
 +
    color: #FFF;
 +
}
 +
 
 +
#results_small {
 +
     background-color: #3673AF;
 +
 
 +
}
 +
 
 +
#results_small a {
 +
    background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat;  
 +
    background-position: left;
 +
    background-size: auto 90%;
 +
    background-repeat: no-repeat;
 +
    padding-left: 40px;
 +
    color: #FFF;
 +
}
 +
 
 +
#policy_small {
 +
    background-color: #3673AF;
 +
}
 +
 
 +
#policy_small a {
 +
    color: #FFF;
 +
    padding-left: 40px;
 +
    background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png);
 +
    background-position: left;
 +
    background-size: auto 90%;
 +
    background-repeat: no-repeat;
 +
}
 +
 
 +
#notebook_small {
 +
    background-color: #3673AF;
 +
}
 +
 
 +
#notebook_small a {
 +
    background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat;
 +
    background-position: left;
 +
    background-size: auto 90%;
 +
    background-repeat: no-repeat;
 +
    padding-left: 40px;
 +
    color: #FFF;
 +
}
 +
/* ==== End classes for icons ==== */
 +
 
 +
 
 +
}/* end media query
 +
 
 +
/*Smartphone*/
 +
@media only screen and (max-width : 320px) {
 +
    #smallnav li {
 +
        display: block;
 +
        float: none;
 +
        width: 100%;
 +
    }
 
}
 
}
  
−
} /* end of media query dont delete */
 
  
 
</style>
 
</style>
 +
  
 
<!-- BEGIN: jQuery -->
 
<!-- BEGIN: jQuery -->
 +
 +
 +
<script>
 +
// FOR SMALLNAV
 +
    $(function() {
 +
        var pull        = $('#pull');
 +
            menu        = $('#smallnav ul');
 +
            menuHeight  = menu.height();
 +
 +
        $(pull).on('click', function(e) {
 +
            e.preventDefault();
 +
            menu.slideToggle();
 +
        });
 +
 +
        $(window).resize(function(){
 +
            var w = $(window).width();
 +
            if(w > 320) {
 +
                if (menu.is(':hidden')) {
 +
                menu.removeAttr('style');
 +
                }
 +
            }
 +
        });
 +
    });
 +
</script>
  
 
<script type="text/javascript">
 
<script type="text/javascript">
Line 650: Line 827:
  
 
             });
 
             });
−
 
+
/*Fix for when a link targets an id -> check the position on pageload*/
 +
$(window).scroll();
  
 
         });
 
         });
Line 703: Line 881:
 
                         <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview"></a></li>
 
                         <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview"></a></li>
 
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Introduction</a></li>
 
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Introduction</a></li>
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/System">System Overview</a></li>
+
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/System">Overview</a></li>
 
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Diagnostics">Diagnostics today</a></li>
 
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Diagnostics">Diagnostics today</a></li>
 
                         <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
 
                         <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
Line 755: Line 933:
 
                             <ul>
 
                             <ul>
 
                                 <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson">Gibson</a></li>
 
                                 <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson">Gibson</a></li>
−
                                 <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Coli_Strains"><i>E.coli</i> Strains</a></li>
+
                                 <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Coli_Strains">E.coli Strains</a></li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 777: Line 955:
 
<!-- BEGIN: Mobile Navigation -->
 
<!-- BEGIN: Mobile Navigation -->
  
−
         <nav class="clearfix">
+
         <div class="clearfix" id="smallnav">
 
             <ul class="clearfix">
 
             <ul class="clearfix">
−
                 <li><a href="#">Home</a></li>
+
                 <li id="home_small"><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a></li>
−
                 <li><a href="#">How-to</a></li>
+
                 <li id="project_small"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a></li>
−
                 <li><a href="#">Icons</a></li>
+
                 <li id="results_small"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a></li>
−
                 <li><a href="#">Design</a></li>
+
                 <li id="team_small"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a></li>
−
                 <li><a href="#">Web 2.0</a></li>
+
                 <li id="policy_small"><a href="https://2015.igem.org/Team:Freiburg/Practices">Practice</a></li>
−
                 <li><a href="#">Tools</a></li>   
+
                 <li id="notebook_small"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a></li>   
 
             </ul>
 
             </ul>
 
             <a href="#" id="pull">Menu</a>
 
             <a href="#" id="pull">Menu</a>
−
         </nav>
+
         </div>
  
 
<!-- END: Mobile Navigation -->
 
<!-- END: Mobile Navigation -->

Latest revision as of 22:07, 16 September 2015

""