kicktv · November 17, 2024 14:26 · kicktv · Nov 17, 2024
diff --git a/Menu-Responsive-No-Javascript.html b/Menu-Responsive-No-Javascript.html
 <!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Menu Responsive No Javascript</title>
 <style>
 body {margin: 0; font-family: Helvetica, sans-serif; background-color: #e3dede;}

 a {color: #ffffff; //white}

 /* header */
 .header {
  background-color: #000000; //#fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
 }

 .header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: black; //#fff;
 }

 .header li a {
  display: block;
  padding: 20px 20px;
  //border-right: 1px solid #f4f4f4;
  border-left: 0.5px solid #ccc; //#f4f4f4;
  text-decoration: none;
 }

 .header li a:hover,
 .header .menu-btn:hover {
 background-color: red; //#f4f4f4;
 }

 .header .logo {display: block; float: left; font-size: 2em; padding: 10px 20px;
  text-decoration: none;
 }
 .header .logo:hover { background-color: red; //#f4f4f4;}

 /* menu */
 .header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
 }

 /* menu icon */
 .header .menu-icon {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
 }

 .header .menu-icon .nav-icon {
  background: white; //#333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
 }

 .header .menu-icon .nav-icon:before,
 .header .menu-icon .nav-icon:after {
  background: white; //#333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
 }

 .header .menu-icon .nav-icon:before {
  top: 5px;
 }

 .header .menu-icon .nav-icon:after {
  top: -5px;
 }

 /* menu btn */

 .header .menu-btn {
  display: none;
 }

 .header .menu-btn:checked ~ .menu {
  max-height: 240px;
 }

 .header .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
 }

 .header .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
 }

 .header .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
 }

 /* 48em = 768px @ 16pt font */
 @media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {padding: 20px 30px; }
  
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  
 .header .menu-icon {display: none; }
 }
 h1 {color: red; }
 </style>
 </head><body>
 <header class="header">
 <a href="/" class="logo">My Website</a>
 <input class="menu-btn" type="checkbox" id="menu-btn" />
 <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>

 <ul class="menu">

 <li><a href="#"> Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contact</a></li>

 </ul>
 </header><br><br><br><br><br>

 <center><h1>Welcome to My Website</h1></center>

 </body>
 </html>