Difference between revisions of "Team:Shanghaitech/Device"

m (sidebar-test0)
(test-template)
Line 1: Line 1:
{{Shanghaitech}}
+
{{Shanghaitech/custom}}
 
{{Shanghaitech/css}}
 
{{Shanghaitech/css}}
 
<html>
 
<html>
 
<body class='dev'>
 
<body class='dev'>
<div id="bg-casual" class="background"></div>
 
<div id="header-bg-duplicate" class="background"></div>
 
<header id="top-header" class='expanded'>
 
<div id='header-container' class='normalized'>
 
    <div id="header-bg" class="background"></div>
 
    <div id="logo-container" class="container"><img src="logo.png" alt="logo" class="img-contain" /></div>
 
    <ul class="container horizontal normalized" id="menu-bar">
 
        <li><a href="https://2017.igem.org/Team:Shanghaitech/"><span>Home</span></a></li>
 
        <li><a href="https://2017.igem.org/Team:Shanghaitech/"><span>Project</span></a>
 
            <ul class="dropdown-list">
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Overview</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Background</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Experiment and Modeling</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Device</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="#"><span>Drylab</span></a>
 
            <ul class="dropdown-list">
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Hardware</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Software</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Drylab</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="https://2017.igem.org/Team:Shanghaitech/Modeling"><span>Modeling</span></a>
 
            <ul class="dropdown-list">
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Introduction</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Model of parameter filling and simulation</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Theoretical Calculation of Modeling</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Model for Our Project</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="#"><span>Human Practice</span></a>
 
            <ul class="dropdown-list">
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Overview</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Public Education</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Workshop</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Interview</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="#"><span>Collaboration</span></a>
 
            <ul class="dropdown-list">
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Safety</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Library</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Meet-Up</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="#"><span>Notebook</span></a>
 
            <ul class="dropdown-list">
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Calendar">Calendar</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Protocol">Protocol</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Parts">Parts</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/RawMaterial">Raw Material</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="#"><span>Team</span></a>
 
            <ul class="dropdown-list">
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/TeamMember">Team Members</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Attributions">Attribution</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Acknowledgement">Acknowledgement</a></li>
 
            </ul>
 
        </li>
 
    </ul></div>
 
</header>
 
<div style="position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%);z-index: 999;"><a href="javascript:change()" style="padding: 100px; display:block;">change header layout</a><a href="javascript:change2()" style="padding: 100px;  display:block;">change opacity</a>
 
</div>
 
<div id="mySidenav" class="sidenav shown">
 
        <a href="javascript:void(0)" id="hide-botton" onclick="closeNav()"><span id='hide-botton-icon'>&gt;</span><span id='hide-botton-hint'>Hide</span></a>
 
        <a href="#">A</a>
 
        <a href="#">S</a>
 
        <a href="#">Cl</a>
 
        <a href="#">Co</a>
 
</div>
 
 
<p>This is a following paragraph.</p>
 
<p>This is a following paragraph.</p>
 
<p>This is a following paragraph.</p>
 
<p>This is a following paragraph.</p>
Line 140: Line 68:
 
<p>This is a following paragraph.</p>
 
<p>This is a following paragraph.</p>
 
<p>This is a following paragraph.</p>
 
<p>This is a following paragraph.</p>
<script>
 
    function change(){
 
        var a = document.getElementById('top-header');
 
        if (a.className == "expanded") {
 
            a.className='condensed';
 
        } else {
 
            a.className='expanded';
 
        }
 
    }
 
    function change2(){
 
        var b = document.body;
 
        if (b.className == "dev") {
 
            b.className='';
 
        } else {
 
            b.className='dev';
 
        }
 
    }
 
</script>
 
<script>
 
    $(window).scroll(function(){
 
            if($(window).scrollTop()>100){
 
                $("#top-header").removeClass("expanded").addClass("condensed")
 
            }else{$("#top-header").removeClass("condensed").addClass("expanded")}
 
    })
 
function closeNav(){
 
        if ($("#mySidenav").hasClass('shown')){
 
            $("#mySidenav").removeClass('shown').addClass('hide');
 
 
        }else{
 
            $("#mySidenav").removeClass('hide').addClass('shown');
 
        }
 
    }
 
</script>
 
 
</body>
 
</body>

Revision as of 09:00, 28 October 2017

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.