Difference between revisions of "Template:SCUT-FSE-CHINA"

(Fix: wiki style clear)
Line 1: Line 1:
 
<html>
 
<html>
−
<link rel="stylesheet" href="https://2017.igem.org/Template:SCUT-FSE-CHINA/Style/Bootstrap?action=raw&ctype=text/css" />
+
    <link rel="stylesheet" href="https://2017.igem.org/Template:SCUT-FSE-CHINA/Style/Bootstrap?action=raw&ctype=text/css" />
−
<link rel="stylesheet" href="https://2017.igem.org/Template:SCUT-FSE-CHINA/Style/Material?action=raw&ctype=text/css" />
+
    <link rel="stylesheet" href="https://2017.igem.org/Template:SCUT-FSE-CHINA/Style/Swiper?action=raw&ctype=text/css" />
−
<link rel="stylesheet" href="https://2017.igem.org/Template:SCUT-FSE-CHINA/Style/Navbar?action=raw&ctype=text/css" />
+
    <script src="https://2017.igem.org/Template:SCUT-FSE-CHINA/Javascript/JQuery21?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
<script src="https://2017.igem.org/Template:SCUT-FSE-CHINA/Javascript/Material?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
    <script src="https://2017.igem.org/Template:SCUT-FSE-CHINA/Javascript/BootstrapJs?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
<script src="https://2017.igem.org/Template:SCUT-FSE-CHINA/Javascript/JQuery21?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
    <script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
−
<script src="https://2017.igem.org/Template:SCUT-FSE-CHINA/Javascript/Navbar?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
    <script src="https://2017.igem.org/Template:SCUT-FSE-CHINA/Javascript/Swiper?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
<script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
+
    <meta name="viewport" content="width=device-width, initial-scale=1" />
−
<meta name="viewport" content="width=device-width, initial-scale=1" />
+
      
−
 
+
     <style>
−
<script>
+
    @font-face {
−
     $(document).ready(function() {
+
−
        $("#navbar").accordion();
+
−
     })
+
−
</script>
+
−
<style>
+
−
@font-face {
+
 
         font-family: 'Glyphicons Halflings';
 
         font-family: 'Glyphicons Halflings';
 
         src: url('https://static.igem.org/mediawiki/2017/2/2a/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.eot');
 
         src: url('https://static.igem.org/mediawiki/2017/2/2a/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.eot');
 
         src: url('https://static.igem.org/mediawiki/2017/2/2a/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.eot?#iefix]]') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2017/6/61/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.woff') format('woff'), url('https://static.igem.org/mediawiki/2017/a/a8/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.ttf') format('truetype'), url('https://static.igem.org/mediawiki/2017/d/dc/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 
         src: url('https://static.igem.org/mediawiki/2017/2/2a/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.eot?#iefix]]') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2017/6/61/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.woff') format('woff'), url('https://static.igem.org/mediawiki/2017/a/a8/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.ttf') format('truetype'), url('https://static.igem.org/mediawiki/2017/d/dc/T--SCUT-FSE-CHINA--glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 
     }
 
     }
−
     #navbar {
+
     .main-content {
−
         width: 300px;
+
         margin-top: 16px;
−
        position: fixed;
+
−
        right: 0px;
+
−
        top: 80px;
+
−
        float: right;
+
−
        z-index: 100;
+
 
     }
 
     }
 +
   
 +
        /* Clear wiki style */
 +
   
 +
        li {
 +
            margin-bottom: 0;
 +
        }
 +
   
 +
        ul, ol {
 +
            font-size: 12px;
 +
            line-height: 1.5em;
 +
        }
 +
   
 +
        a:active, a:focus, a:visited, a:hover {
 +
            text-decoration: none;
 +
            text-decoration-line: none;
 +
        }
 +
   
 +
        #top_menu_inside {
 +
            display: block;
 +
            position: relative;
 +
            width: 960px;
 +
            height: 100%;
 +
            margin: 0px auto;
 +
            padding: 0 10px;
 +
            border-left: 1px solid #c8c8c8;
 +
            border-right: 1px solid #c8c8c8;
 +
            font-family: 'arial',sans-serif;
 +
            font-size: 12px;
 +
            font-weight: 400;
 +
            color: #ffffff;
 +
            line-height: normal;
 +
        }
 +
   
 +
        #content {
 +
            padding: 0;
 +
            margin: 0;
 +
            width: 100%;
 +
            position: relative;
 +
        }
 +
   
 +
        #top_title, #sideMenu {
 +
            display: none;
 +
        }
 +
       
 +
       
 +
       
 +
        /********/   
 +
        /*
 +
        #f8d8b8
 +
        #ec9687
 +
        */
 +
       
 +
        .navbar-tmc {
 +
            background-color: none;
 +
            border-color: none;
 +
        }
 +
       
 +
        body {
 +
            background-color: #ffffef;
 +
            margin-top: 50px;
 +
        }
  
−
    .fixtop {
+
        h1, h2, h3, h4 {
−
        position: fixed;
+
            font-weight: 800;
−
        float: left;
+
            margin-top: 40px;
−
        top: 16px;
+
         }
−
         left: 0px;
+
−
        height: 72px;
+
−
        z-index: 101;
+
−
    }
+
  
−
    .main-content {
+
        p {
−
        margin-top: 80px;
+
            font-size: 1.2em;
−
        padding-left: 5%;
+
            line-height: 1.5em;
−
         padding-right: 5%;
+
            text-indent: 2em;
−
    }
+
            font-family: 'Raleway', sans-serif;
 +
         }
 +
   
 +
        .icon-bar {
 +
            background: black;
 +
        }
  
−
    @media(min-width: 1024px)
+
         .navbar-nav>li>a {
−
    {
+
             color: #804040;
−
         .main-content {
+
            font-weight: 600;
−
             margin-right: 450px;
+
            font-size: 1.3em;
 
         }
 
         }
−
     }
+
      
−
    @media(max-width: 1023px)
+
        .navbar-brand {
−
    {
+
            color: #804040;
−
        #navbar {
+
             float: right;
−
             right: 3%;
+
        }
−
             width: 50%;
+
   
 +
        .nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
 +
             background-color: #ffeedf;
 
         }
 
         }
−
    }
 
  
−
    /* Clear wiki style */
+
        .navbar {
 +
            border: solid 2px #b38c8c;
 +
            border-left: none;
 +
            border-right: none;
 +
        }
  
−
    li {
+
         .navbar, .navbar-header {
−
         margin-bottom: 0;
+
            height: 54px;
−
    }
+
        }
  
−
    ul, ol {
+
        #nav-body {
−
        font-size: 12px;
+
            position: absolute;
−
         line-height: 1.5em;
+
            right: 10%;
−
    }
+
            z-index: 500;
 +
         }
 +
        .nav-img {
 +
            height: 200px;
 +
            margin-top: -73px;
 +
        }
  
−
    a:active, a:focus, a:visited, a:hover {
+
        @media (max-width: 1420px) {
−
        text-decoration: none;
+
            #nav-body {
−
        text-decoration-line: none;
+
                right: 0%;
−
    }
+
            }
  
−
    #top_menu_inside {
+
            .nav-img {
−
        display: block;
+
                height: 100px;
−
        position: relative;
+
                margin-top: -23px;
−
        width: 960px;
+
            }
−
        height: 100%;
+
−
        margin: 0px auto;
+
−
        padding: 0 10px;
+
−
        border-left: 1px solid #c8c8c8;
+
−
        border-right: 1px solid #c8c8c8;
+
−
        font-family: 'arial',sans-serif;
+
−
        font-size: 12px;
+
−
        font-weight: 400;
+
−
        color: #ffffff;
+
−
        line-height: normal;
+
−
    }
+
  
−
    #content {
+
            .navbar-nav>li>a {
−
        padding: 0;
+
                font-size: 1.1em;
−
        margin: 0;
+
            }
−
         width: 100%;
+
         }
−
        position: relative;
+
−
    }
+
  
−
    #top_title, #sideMenu {
+
        @media (min-width: 768px) and (max-width: 1070px) {
−
         display: none;
+
            .nav-img {
−
     }
+
                display: none;
−
</style>
+
            }
−
<script>
+
        }
−
    function toggleNav()
+
 
−
    {
+
        @media (max-width: 768px) {
−
         $("#navbar").toggle(400);
+
            body {
−
    }
+
                margin-top: 0;
−
    $(window).resize(function ()
+
            }
−
    {
+
 
−
        if (window.innerWidth > 1023)
+
            #nav-body {
 +
                position: relative;
 +
                background-color: #ffffef;
 +
            }
 +
        }
 +
 
 +
        .dropdown-menu {
 +
            transition: all 0.3s;
 +
            background-color: #fffff8;
 +
         }
 +
   
 +
        .dropdown-menu>li>a {
 +
            font-weight: 600;
 +
            font-size: 1.1em;
 +
            line-height: 30px;
 +
        }
 +
      
 +
        .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
 +
            background-color: #ffeedf;
 +
        }
 +
 
 +
        .center {
 +
            text-align: center;
 +
        }
 +
 
 +
    </style>
 +
    <script>
 +
        function animate(e) {
 +
            $(e).css("opacity", 0);
 +
            window.setTimeout(function () {
 +
                $(e).css("opacity", 1);
 +
            }, 50);
 +
        }
 +
         $(document).on("ready", function () {
 +
            $(".dropdown-toggle").on("click", function (e) {
 +
                animate($(e.target).next());
 +
            });
 +
            $(".dropdown-toggle").on("mouseenter", function (e) {
 +
                window.setTimeout(function () {
 +
                    var el = $(e.target).next();
 +
                    if (el.css("display") != "none")
 +
                        return;
 +
                    $(e.target).click();
 +
                }, 50);
 +
            });
 +
            $(".navbar-nav>li").on("mouseenter", function (e) {
 +
                $("body").click();
 +
                $(".dropdown-toggle").blur();
 +
            });
 +
        });
 +
 
 +
        function jumpTo(el, time)
 
         {
 
         {
−
             $("#navbar").css("display", "block");
+
             $('html body').animate({scrollTop: $(el).offset().top}, time);
−
        } else {
+
−
            $("#navbar").css("display", "none");
+
 
         }
 
         }
−
     });
+
     </script>
−
</script>
+
    <div class="main-content">
−
<div id="navbar" class="menu blue hidden-sm hidden-xs">
+
    <nav class="navbar navbar-tmc container-fluid">
−
    <div class="menu-header"> LOGO </div>
+
        <div class="row">
−
    <ul>
+
        <div class="navbar-header col-md-3">
−
         <li><a href="/Team:SCUT-FSE-CHINA">HOME</a></li>
+
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-body" aria-expanded="false">
−
        <li>
+
                <span class="sr-only">Toggle navigation</span>
−
            <a href="#">PROJECT</a>
+
                <span class="icon-bar"></span>
−
            <ul class="submenu">
+
                <span class="icon-bar"></span>
−
                <li><a href="/Team:SCUT-FSE-CHINA/Description">Description</a></li>
+
                <span class="icon-bar"></span>
−
                <li><a href="#">Proof</a></li>
+
            </button>
−
                 <li><a href="#">Results</a></li>
+
            <img class="nav-img" src="../src/Image/title.png" />
−
            </ul>
+
        </div>
−
        </li>
+
        <div class="collapse navbar-collapse col-md-8" id="nav-body">
−
        <li><a href="#">MODELING</a></li>
+
         <ul class="nav navbar-nav">
−
        <li>
+
            <li><a href="/Team:SCUT-FSE-CHINA">HOME</a></li>
−
             <a href="#">HUMAN PRACTICES</a>
+
            <li class="dropdown">
−
            <ul class="submenu">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT <span class="caret"></span></a>
−
                <li><a href="#">Education &amp; Public Engagement</a></li>
+
                <ul class="dropdown-menu">
−
                <li><a href="#">Integrated HP</a></li>
+
                    <li><a href="/Team:SCUT-FSE-CHINA/Description">Description</a></li>
−
                <li><a href="#">Collaboration</a></li>
+
                    <li><a href="#">Design</a></li>
−
            </ul>
+
                 </ul>
−
        </li>
+
            </li>
−
        <li>
+
            <li class="dropdown">
−
            <a href="#">TEAM</a>
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RESULTS<span class="caret"></span></a>
−
            <ul class="submenu">
+
                <ul class="dropdown-menu">
−
                <li><a href="#">Team</a></li>
+
                    <li><a href="#">N&amp;P Pathways</a></li>
−
                <li><a href="#">Attribution</a></li>
+
                    <li><a href="#">CRISPR/Cas9</a></li>
−
            </ul>
+
                </ul>
−
        </li>
+
            </li>
−
        <li>
+
             <li class="dropdown">
−
             <a href="#">PARTS</a>
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MODELING<span class="caret"></span></a>
−
            <ul class="submenu">
+
                <ul class="dropdown-menu">
−
                <li><a href="#">Basic parts</a></li>
+
                    <li><a href="#">Growth Model</a></li>
−
                <li><a href="#">Composite parts</a></li>
+
                    <li><a href="#">Metabolic Model</a></li>
−
            </ul>
+
                    <li><a href="#">Scale Up</a></li>
−
        </li>
+
                </ul>
−
        <li>
+
            </li>
−
            <a href="#">LAB</a>
+
            <li class="dropdown">
−
            <ul class="submenu">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICE<span class="caret"></span></a>
−
                <li><a href="#">Safety</a></li>
+
                <ul class="dropdown-menu">
−
                <li><a href="#">Sponsor</a></li>
+
                    <li><a href="#">Integrated HP</a></li>
−
            </ul>
+
                    <li><a href="#">Education &amp; Public Engagement</a></li>
−
        </li>
+
                    <li><a href="#">Collaboration</a></li>
−
        <li>
+
                </ul>
−
            <a href="#">MEDAL</a>
+
            </li>
−
            <ul class="submenu">
+
            <li><a href="#">INTERLAB</a></li>
−
                <li><a href="#">Silver Criteria</a></li>
+
             <li class="dropdown">
−
                <li><a href="#">Gold Criteria</a></li>
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM<span class="caret"></span></a>
−
            </ul>
+
                <ul class="dropdown-menu">
−
        </li>
+
                    <li><a href="#">Team</a></li>
−
    </ul>
+
                    <li><a href="#">Attribution</a></li>
−
    <div class="menu-footer"> @ SCUT</div>
+
                </ul>
−
</div>
+
            </li>
−
<div class="mdl-layout mdl-layout--fixed-header fixtop">
+
            <li class="dropdown">
−
    <header class="mdl-layout__header">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS<span class="caret"></span></a>
−
    <div class="mdl-layout__header-row">
+
                <ul class="dropdown-menu">
−
        <!-- Title -->
+
                    <li><a href="#">Basic Parts</a></li>
−
        <span class="mdl-layout-title" style="font-weight: bold; font-size: 26px;">SCUT-FSE-CHINA</span>
+
                    <li><a href="#">Composite Parts</a></li>
−
        <!-- Add spacer, to align navigation to the right -->
+
                </ul>
−
        <div class="mdl-layout-spacer"></div>
+
            </li>
−
        <!-- Navigation -->
+
            <li class="dropdown">
−
        <nav class="mdl-navigation">
+
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LAB<span class="caret"></span></a>
−
            <a style="font-size: 26px; height: 30px; color: white; vertical-align: center;" href="javascript: toggleNav();"><span class="glyphicon glyphicon-menu-hamburger"></span><span style="padding-left: 10px; font-size: 30px;">Menu</span></a>
+
                <ul class="dropdown-menu">
−
         </nav>
+
                    <li><a href="#">Lab Notes</a></li>
−
    </div>
+
                    <li><a href="#">Protocol</a></li>
−
    </header>
+
                    <li><a href="#">Safety</a></li>
−
</div>
+
                    <li><a href="#">Sponsor</a></li>
 +
                </ul>
 +
            </li>
 +
            <li class="dropdown">
 +
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MEDAL<span class="caret"></span></a>
 +
                <ul class="dropdown-menu">
 +
                    <li><a href="#">Bronze Criteria</a></li>
 +
                    <li><a href="#">Silver Criteria</a></li>
 +
                    <li><a href="#">Gold Criteria</a></li>
 +
                </ul>
 +
            </li>
 +
         </ul>
 +
        </div>
 +
        </div>
 +
    </nav>
 +
 
 +
<!--########################TEMPLATE TOP END##############################-->

Revision as of 14:44, 25 October 2017