aboutsummaryrefslogtreecommitdiff
path: root/test/bar.html
diff options
context:
space:
mode:
authorMateja <mail@matejamaric.com>2020-11-08 13:29:17 +0100
committerMateja <mail@matejamaric.com>2020-11-08 13:29:17 +0100
commit9ebddc305380051f4c1db2ff68f8b02e879d35f9 (patch)
tree855a82dceecaf30576e5fbb431f59ce1842c56e8 /test/bar.html
parentfa679bddf7a5930bc9f0482165b290a2946cff5f (diff)
downloadold-php-yota-9ebddc305380051f4c1db2ff68f8b02e879d35f9.tar.gz
old-php-yota-9ebddc305380051f4c1db2ff68f8b02e879d35f9.zip
w3schools responsive navbar...
Diffstat (limited to 'test/bar.html')
-rw-r--r--test/bar.html103
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>