×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: PHP
Posted by: Lee Laing
Added: Apr 8, 2018 6:07 PM
Modified: Apr 9, 2018 6:57 PM
Views: 3
Tags: no tags
Responsive Topnav Example-w3schools - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
  1. <style>
  2. body {
  3.   margin: 0;
  4.   font-family: Arial, Helvetica, sans-serif;
  5. }
  6.  
  7. .topnav {
  8.   overflow: hidden;
  9.   background-color: #333;
  10. }
  11.  
  12. .topnav a {
  13.   float: left;
  14.   display: block;
  15.   color: #f2f2f2;
  16.  text-align: center;
  17.   padding: 14px 16px;
  18.   text-decoration: none;
  19.   font-size: 17px;
  20. }
  21.  
  22. .topnav a:hover {
  23.   background-color: #ddd;
  24.  color: black;
  25. }
  26.  
  27. .active {
  28.   background-color: #4CAF50;
  29.  color: white;
  30. }
  31.  
  32. .topnav .icon {
  33.   display: none;
  34. }
  35.  
  36. @media screen and (max-width: 600px) {
  37.   .topnav a:not(:first-child) {display: none;}
  38.   .topnav a.icon {
  39.     float: right;
  40.     display: block;
  41.   }
  42. }
  43.  
  44. @media screen and (max-width: 600px) {
  45.   .topnav.responsive {position: relative;}
  46.   .topnav.responsive .icon {
  47.     position: absolute;
  48.     right: 0;
  49.     top: 0;
  50.   }
  51.   .topnav.responsive a {
  52.     float: none;
  53.     display: block;
  54.     text-align: left;
  55.   }
  56. }
  57. <div class="topnav" id="myTopnav">
  58.   <a href="#home" class="active">Home</a>
  59.   <a href="#news">News</a>
  60.   <a href="#contact">Contact</a>
  61.   <a href="#about">About</a>
  62.   <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  63. </div>
  64.  
  65. <div style="padding-left:16px">
  66.   <h2>Responsive Topnav Example</h2>
  67.   <p>Resize the browser window to see how it works.</p>
  68. </div>
  69.  
  70. <script>
  71. function myFunction() {
  72.     var x = document.getElementById("myTopnav");
  73.     if (x.className === "topnav") {
  74.         x.className += " responsive";
  75.     } else {
  76.         x.className = "topnav";
  77.     }
  78. }
  79. </style>
  80. </script>