Difference between revisions of "Template:ASTWS-China"

Line 1: Line 1:
 
<html>
 
<html>
 
     <head>
 
     <head>
−
        <!--Implement Bootstrap-->
 
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
−
         <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
          
−
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
+
−
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
 
         <style>
 
         <style>
 
             #top_title{
 
             #top_title{
Line 12: Line 9:
 
             html{
 
             html{
 
                 height:100%;
 
                 height:100%;
 +
                width:100%;
 
             }
 
             }
 
             body {
 
             body {
 
                 height:100%;
 
                 height:100%;
 +
                width:100%;
 
                 background-color: white;
 
                 background-color: white;
 +
            }
 +
           
 +
            #globalWrapper {
 +
                height:100%;
 +
                padding:0;
 +
            }
 +
           
 +
            #nav_wrapper {
 +
                display: inline-block;
 +
                position: fixed;
 +
                top:18px;
 +
                width: 100%;
 +
                height: 80px;
 +
                text-align: center;
 +
                background-color:rgba(170,170,170,0.9);
 +
                box-shadow: 0 0 50px 0 rgba(0,0,0,0.35);
 +
                text-align: center;
 +
            }
 +
           
 +
            #team_name{
 +
                position: relative;
 +
                font-size: 32px;
 +
            }
 +
                 
 +
            .menu {
 +
                position: relative;
 +
                margin: 0;
 +
                padding: 0;
 +
                height: 100%;
 +
                font-size: 18px;
 +
                font-weight: bold;
 +
               
 +
            }
 +
            .menu::before {
 +
                float:left;
 +
                position: relative;
 +
                content:"";
 +
                width: 250px;
 +
                height: 100px;
 +
            }
 +
           
 +
            /* Button */
 +
            .menu li {
 +
                position: relative;
 +
            float:left;
 +
                height: 100%;
 +
                line-height: 80px;
 +
                list-style-type: none;
 +
                transition: background-color 0.2s ease-in-out;
 +
            }
 +
            .menu li a {
 +
                display: block;
 +
                color:black;
 +
                text-decoration: none;
 +
                padding: 0 15px 0 15px !important;
 +
            }
 +
            .menu li:hover {
 +
                background-color: rgb(100,149,237);
 +
            }
 +
 +
            .menu li:hover ul {
 +
                visibility: visible;
 +
                max-height: 700px;
 +
                opacity: 1.0;
 +
            }
 +
 +
            /* Container */
 +
            .menu li ul {
 +
                max-height: 0;
 +
                opacity: 0.0;
 +
                font-weight: normal;
 +
                position: absolute;
 +
                left:0;
 +
                padding:0;
 +
                visibility: hidden;
 +
                background-color: rgba(200,200,200, 0.87);
 +
                text-align: left;
 +
                overflow:hidden;
 +
                box-shadow: 0px 9px 20px 0px rgba(0,0,0,0.2), inset 0px 35px 45px -35px rgba(0,0,0,0.5);
 +
                transition: all 0.3s ease-in-out;
 +
            }
 +
 +
            /* Element */
 +
            .menu li ul li {
 +
                display: block;
 +
                padding: 0;
 +
                width: 100%;
 +
                min-width: 250px;
 +
                line-height: 55px;
 +
                white-space: nowrap;
 +
            }
 +
            .menu li ul li:hover {
 +
                background-color:unset;
 +
            }
 +
            .menu li ul li a {
 +
                transition: background-color 0.17s ease-in-out;
 +
            }
 +
            .menu li ul li a:hover {
 +
                background-color: rgb(100,149,237);
 
             }
 
             }
 
         </style>
 
         </style>
−
         <!--Navigation Bars-->
+
          
−
        <nav class="navbar navbar-default" role="navigation">
+
−
            <div class="container-fluid">
+
−
                <div class="navbar-header">
+
−
                    <a class="navbar-brand" href="https://2018.igem.org/Team:ASTWS-China">ASTWS-China</a>
+
−
                </div>
+
−
                <div>
+
−
                    <ul class="nav navbar-nav">
+
−
                        <li><a href="#">Team</a></li>
+
−
                        <li class="dropdown">
+
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project
+
−
                                <b class="caret"></b>
+
−
                            </a>
+
−
                            <ul class="dropdown-menu">
+
−
                                <li><a href="#">Description</a></li>
+
−
                                <li class="divider"></li>
+
−
                            </ul>
+
−
                        </li>
+
−
                        <li class="dropdown">
+
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lab Work
+
−
                                <b class="caret"></b>
+
−
                            </a>
+
−
                            <ul class="dropdown-menu">
+
−
                                <li><a href="#">Results</a></li>
+
−
                                <li class="divider"></li>
+
−
            <li><a href="#">Experiments</a></li>
+
−
                                <li class="divider"></li>
+
−
                                <li><a href="#">Safety</a></li>
+
−
                                <li class="divider"></li>
+
−
                                <li><a href="https://2018.igem.org/Team:ASTWS-China/InterLab">InterLab</a></li>
+
−
                            </ul>
+
−
                        </li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div>
+
−
        </nav>
+
 
     </head>
 
     </head>
 +
   
 
     <body>
 
     <body>
−
          
+
         <div id="nav_wrapper">
 +
            <div id="burger"></div>
 +
            <div class="menu_wrapper">
 +
                <ul class="menu" id="menu">
 +
                    <li id="team_name"><a href="#">ASTWS-China</a></li>
 +
                   
 +
                    <li><a href="#">Project▾</a>
 +
                        <ul>
 +
                            <li><a href="#">Demonstration</a></li>
 +
                            <li><a href="#">Description</a></li>
 +
                            <li><a href="#">Design</a></li>
 +
                            <li><a href="#">Experiment</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:ASTWS-China/InterLab">InterLab</a></li>
 +
                            <li><a href="#">Results</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li><a href="#">Team▾</a>
 +
                        <ul>
 +
                            <li><a href="#">Team Members</a></li>
 +
                            <li><a href="#">Collaborations</a></li>
 +
                        </ul>
 +
                    </li>
 +
                   
 +
                    <li><a href="#">Awards▾</a>
 +
<ul>
 +
<li><a href="#">Applied Design</a></li>
 +
<li><a href="#">Entrepreneurship</a></li>
 +
<li><a href="#">Hardware</a></li>
 +
<li><a href="#">Measurement</a></li>
 +
<li><a href="#">Model</a></li>
 +
<li><a href="#">Software</a></li>
 +
</ul>
 +
</li>
 +
                   
 +
                    <li><a href="#">Safety</a></li>
 +
                   
 +
                    <li><a href="#">Human Practices▾</a>
 +
                        <ul>
 +
                            <li><a href="#">Human Practices</a></li>
 +
                            <li><a href="#">Education &amp; Engagement</a></li>
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
        </div>
 
     </body>
 
     </body>
 
</html>
 
</html>

Revision as of 06:15, 3 August 2018