|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | + | |
| | + | |
| | <script> | | <script> |
| − | /* Open when someone clicks on the span element */
| + | function on() { |
| − | function openNav() {
| + | document.getElementById("overlay").style.width = "100%"; |
| − | document.getElementById("myNav").style.width = "100%"; | + | |
| | } | | } |
| | | | |
| − | /* Close when someone clicks on the "x" symbol inside the overlay */
| + | function off() { |
| − | function closeNav() { | + | document.getElementById("overlay").style.width = "0%"; |
| − | document.getElementById("myNav").style.width = "0%"; | + | |
| | } | | } |
| | </script> | | </script> |
| − |
| |
| − |
| |
| | | | |
| | | | |
| | <style> | | <style> |
| − | /* The Overlay (background) */
| + | #overlay { |
| − | .overlay {
| + | position: fixed; /* Sit on top of the page content */ |
| − | /* Height & width depends on how you want to reveal the overlay (see JS below) */ | + | display: none; /* Hidden by default */ |
| − | height: 100%; | + | width: 100%; /* Full width (cover the whole page) */ |
| − | width: 0; | + | height: 100%; /* Full height (cover the whole page) */ |
| − | position: fixed; /* Stay in place */
| + | top: 0; |
| − | z-index: 1; /* Sit on top */ | + | |
| | left: 0; | | left: 0; |
| − | top: 0; | + | right: 0; |
| − | background-color: rgb(0,0,0); /* Black fallback color */ | + | bottom: 0; |
| − | background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ | + | background-color: rgba(0,0,0,0.5); /* Black background with opacity */ |
| − | overflow-x: hidden; /* Disable horizontal scroll */ | + | z-index: 2; /* Specify a stack order in case you're using a different order for other elements */ |
| − | transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ | + | cursor: pointer; /* Add a pointer on hover */ |
| | } | | } |
| − |
| |
| − | /* Position the content inside the overlay */
| |
| − | .overlay-content {
| |
| − | position: relative;
| |
| − | top: 25%; /* 25% from the top */
| |
| − | width: 100%; /* 100% width */
| |
| − | text-align: center; /* Centered text/links */
| |
| − | margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
| |
| − | }
| |
| − |
| |
| − | /* The navigation links inside the overlay */
| |
| − | .overlay a {
| |
| − | padding: 8px;
| |
| − | text-decoration: none;
| |
| − | font-size: 36px;
| |
| − | color: #818181;
| |
| − | display: block; /* Display block instead of inline */
| |
| − | transition: 0.3s; /* Transition effects on hover (color) */
| |
| − | }
| |
| − |
| |
| − | /* When you mouse over the navigation links, change their color */
| |
| − | .overlay a:hover, .overlay a:focus {
| |
| − | color: #f1f1f1;
| |
| − | }
| |
| − |
| |
| − | /* Position the close button (top right corner) */
| |
| − | .overlay .closebtn {
| |
| − | position: absolute;
| |
| − | top: 20px;
| |
| − | right: 45px;
| |
| − | font-size: 60px;
| |
| − | }
| |
| − |
| |
| − | /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
| |
| − | @media screen and (max-height: 450px) {
| |
| − | .overlay a {font-size: 20px}
| |
| − | .overlay .closebtn {
| |
| − | font-size: 40px;
| |
| − | top: 15px;
| |
| − | right: 35px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| | | | |
| | | | |
| Line 663: |
Line 617: |
| | | | |
| | <body> | | <body> |
| − | <div id="myNav" class="overlay">
| |
| − |
| |
| − | <!-- Button to close the overlay navigation -->
| |
| − | <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
| |
| | | | |
| − | <!-- Overlay content -->
| + | <div id="overlay"></div> |
| − | <div class="overlay -content"> | + | |
| − | <a href="#">About</a>
| + | |
| − | <a href="#">Services</a>
| + | |
| − | <a href="#">Clients</a>
| + | |
| − | <a href="#">Contact</a>
| + | |
| − | </div>
| + | |
| | | | |
| − | </div>
| |
| | | | |
| − | <!-- Use any element to open/show the overlay navigation menu -->
| |
| − | <span onclick="openNav()">open</span>
| |
| | | | |
| | <div class="igem_2018_team_content"> | | <div class="igem_2018_team_content"> |
