Difference between revisions of "Team:Shanghaitech/Device"

m (sidebar-test0)
Line 68: Line 68:
 
<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 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>
 
+
<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 158: Line 164:
 
             }else{$("#top-header").removeClass("condensed").addClass("expanded")}
 
             }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>
 
</script>
 
</body>
 
</body>

Revision as of 07:45, 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.