Difference between revisions of "Team:Linkoping Sweden/Description"
| Line 2: | Line 2: | ||
<html> | <html> | ||
| + | <head> | ||
| + | <style> | ||
| + | body {margin:0;} | ||
| + | |||
| + | .topnav { | ||
| + | overflow: hidden; | ||
| + | background-color: #333; | ||
| + | } | ||
| + | |||
| + | .topnav a { | ||
| + | float: left; | ||
| + | display: block; | ||
| + | color: #f2f2f2; | ||
| + | text-align: center; | ||
| + | padding: 14px 16px; | ||
| + | text-decoration: none; | ||
| + | font-size: 17px; | ||
| + | } | ||
| + | |||
| + | .topnav a:hover { | ||
| + | background-color: #ddd; | ||
| + | color: black; | ||
| + | } | ||
| + | |||
| + | .topnav .icon { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 600px) { | ||
| + | .topnav a:not(:first-child) {display: none;} | ||
| + | .topnav a.icon { | ||
| + | float: right; | ||
| + | display: block; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 600px) { | ||
| + | .topnav.responsive {position: relative;} | ||
| + | .topnav.responsive .icon { | ||
| + | position: absolute; | ||
| + | right: 0; | ||
| + | top: 0; | ||
| + | } | ||
| + | .topnav.responsive a { | ||
| + | float: none; | ||
| + | display: block; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | <div class="topnav" id="myTopnav"> | ||
| + | <a href="#home">Home</a> | ||
| + | <a href="#news">News</a> | ||
| + | <a href="#contact">Contact</a> | ||
| + | <a href="#about">About</a> | ||
| + | <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> | ||
| + | </div> | ||
| + | |||
| + | <div style="padding-left:16px"> | ||
| + | <h2>Responsive Topnav Example</h2> | ||
| + | <p>Resize the browser window to see how it works.</p> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | function myFunction() { | ||
| + | var x = document.getElementById("myTopnav"); | ||
| + | if (x.className === "topnav") { | ||
| + | x.className += " responsive"; | ||
| + | } else { | ||
| + | x.className = "topnav"; | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | </body> | ||
Revision as of 08:27, 19 June 2017
Linkoping_Sweden
Responsive Topnav Example
Resize the browser window to see how it works.
