Difference between revisions of "Team:TAS Taipei"

Line 123: Line 123:
 
}
 
}
  
−
/* The side navigation menu */
+
body {
 +
    font-family: "Lato", sans-serif;
 +
    transition: background-color .5s;
 +
}
 +
 
 
.sidenav {
 
.sidenav {
−
     height: 100%; /* 100% Full-height */
+
     height: 100%;
−
     width: 0; /* 0 width - change this with JavaScript */
+
     width: 0;
−
     position: fixed; /* Stay in place */
+
     position: fixed;
−
     z-index: 1; /* Stay on top */
+
     z-index: 1;
−
     top: 0; /* Stay at the top */
+
     top: 0;
 
     left: 0;
 
     left: 0;
−
     background-color: #111; /* Black*/
+
     background-color: #111;
−
     overflow-x: hidden; /* Disable horizontal scroll */
+
     overflow-x: hidden;
−
     padding-top: 60px; /* Place content 60px from the top */
+
    transition: 0.5s;
−
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+
     padding-top: 60px;
 
}
 
}
  
−
/* The navigation menu links */
 
 
.sidenav a {
 
.sidenav a {
 
     padding: 8px 8px 8px 32px;
 
     padding: 8px 8px 8px 32px;
Line 147: Line 150:
 
}
 
}
  
−
/* When you mouse over the navigation links, change their color */
 
 
.sidenav a:hover {
 
.sidenav a:hover {
 
     color: #f1f1f1;
 
     color: #f1f1f1;
 
}
 
}
  
−
/* Position and style the close button (top right corner) */
 
 
.sidenav .closebtn {
 
.sidenav .closebtn {
 
     position: absolute;
 
     position: absolute;
Line 161: Line 162:
 
}
 
}
  
−
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
 
 
#main {
 
#main {
 
     transition: margin-left .5s;
 
     transition: margin-left .5s;
−
     padding: 20px;
+
     padding: 16px;
 
}
 
}
  
−
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 
 
@media screen and (max-height: 450px) {
 
@media screen and (max-height: 450px) {
−
    .sidenav {padding-top: 15px;}
+
  .sidenav {padding-top: 15px;}
−
    .sidenav a {font-size: 18px;}
+
  .sidenav a {font-size: 18px;}
 
}
 
}
  
 +
<script>
  
 +
function openNav() {
 +
    document.getElementById("mySidenav").style.width = "250px";
 +
    document.getElementById("main").style.marginLeft = "250px";
 +
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
 +
}
  
−
     </style>
+
function closeNav() {
−
 
+
     document.getElementById("mySidenav").style.width = "0";
−
</head>
+
    document.getElementById("main").style.marginLeft= "0";
−
 
+
    document.body.style.backgroundColor = "white";
−
<body>
+
}
−
 
+
−
<div id="mySidenav" class="sidenav">
+
−
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+
−
  <a href="#">About</a>
+
−
  <a href="#">Services</a>
+
−
  <a href="#">Clients</a>
+
−
  <a href="#">Contact</a>
+
−
</div>
+
−
 
+
−
<!-- Use any element to open the sidenav -->
+
−
<span onclick="openNav()">open</span>
+
−
 
+
−
<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
+
−
<div id="main">
+
−
  ...
+
−
</div>
+
−
 
+
  
  

Revision as of 02:45, 8 June 2018

TAS_Taipei