| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| body{ | |
| background-color: black; | |
| } | |
| .navbar{ | |
| overflow: hidden; | |
| background-color: red; | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| .navbar a{ | |
| float: left; | |
| font-size: 16px; | |
| color: white; | |
| text-align: center; | |
| padding: 14px 16px; | |
| text-decoration: none; | |
| } | |
| .dropdown{ | |
| float: left; | |
| overflow: hidden; | |
| } | |
| .dropdown .dropBtn{ | |
| cursor: pointer; | |
| font-size: 16px; | |
| border: none; | |
| color: white; | |
| padding: 14px 16px; | |
| background-color: inherit; | |
| font-family: inherit; | |
| margin: 0; | |
| } | |
| .navbar a:hover,.dropdown:hover, | |
| .dropBtn,.dropdown:focus{ | |
| background-color: purple; | |
| } | |
| .dropdown-content{ | |
| display: none; | |
| position: absolute; | |
| background-color: yellow; | |
| min-width: 160px; | |
| box-shadow: 0px 8px 16px 0px; | |
| z-index: 1; | |
| } | |
| .dropdown-content a{ | |
| float: none; | |
| color: black; | |
| padding: 12px 16px; | |
| text-decoration: none; | |
| display: block; | |
| text-align: left; | |
| } | |
| .dropdown-content a:hover{ | |
| background-color: greenyellow; | |
| } | |
| /* Utility class */ | |
| .show{ | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="navbar"> | |
| <a href="#">Home</a> | |
| <a href="#">News</a> | |
| <div class="dropdown"> | |
| <button class="dropBtn" onclick="drop()">Clients <i></i></button> | |
| <div class="dropdown-content" id="myDropdown"> | |
| <a href="#">Twitter</a> | |
| <a href="">Facebook</a> | |
| <a href="">Canva</a> | |
| </div> | |
| </div> | |
| </div> | |
| <h1 style="color: white; font-size: 50px;"> | |
| Sync Programming Dropdown Tutorial | |
| </h1> | |
| <script> | |
| function drop(){ | |
| document.getElementById('myDropdown').classList.toggle("show") | |
| } | |
| window.onclick = function(e){ | |
| if(!e.target.matches('.dropBtn')){ | |
| var myDropdown = document.getElementById('myDropdown') | |
| if(myDropdown.classList.contains('show')){ | |
| myDropdown.classList.remove('show') | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
No comments:
Post a Comment