diff options
| -rw-r--r-- | test/bar.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/test/bar.html b/test/bar.html new file mode 100644 index 0000000..6cceb92 --- /dev/null +++ b/test/bar.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<html> + +<head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> + <style> + body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + } + + .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 a.active { + background-color: #4CAF50; + color: white; + } + + .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" class="active">Home</a> + <a href="#news">News</a> + <a href="#contact">Contact</a> + <a href="#about">About</a> + <a href="javascript:void(0);" class="icon" onclick="myFunction()"> + <i class="fa fa-bars"></i> + </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> + +</html> |