Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="pt-br">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- body{
- display: flex;
- justify-content: center;
- }
- nav{
- max-width: 900px;
- width: 100%;
- min-height: 30px;
- margin-top: 30px;
- display: flex;
- }
- ul{
- display: flex;
- list-style:none;
- margin-left: 30px;
- }
- li{
- }
- li+li{
- margin-left: 10px;
- }
- a{
- font-size: 20px;
- text-decoration: none;
- color: #696969;
- font-family: 'Trebuchet MS';
- font-weight: bold;
- padding: 5px 10px;
- }
- .ativo{
- background: #696969;
- color: #fff;
- border-radius: 5px;
- transition: .3s;
- }
- .toggle{
- width: 50px;
- height: 10px;
- background: #696969;
- display: none;
- }
- .toggle:after,.toggle:before{
- content: "";
- display: block;
- width: 50px;
- height: 8px;
- background: #696969;
- margin-top: 17px;
- }
- .toggle:before{
- margin-top: -12px;
- }
- @media(max-width: 600px){
- nav{
- display: grid;
- }
- .menu{
- display: none;
- order: 2;
- }
- .toggle{
- display: block;
- margin-left: 20px;
- order: 1;
- }
- }
- </style>
- <title>Document</title>
- </head>
- <body>
- <nav>
- <ul class="menu">
- <li class="link"><a href="#">Home</a></li>
- <li class="link"><a href="#">Produtos</a></li>
- <li class="link"><a href="#">Sobre</a></li>
- <li class="link"><a href="#">Contato</a></li>
- <li class="link"><a href="#">Faq</a></li>
- </ul>
- <div class="toggle"></div>
- </nav>
- <script>
- const links = document.querySelectorAll('a[href^="#"]');
- function handleLink(event){
- links.forEach((link)=>{
- link.classList.remove('ativo');
- });
- event.currentTarget.classList.add('ativo');
- }
- links.forEach((link)=>{
- link.addEventListener('click',handleLink);
- })
- var togglemenu = document.querySelector('.toggle');
- togglemenu.addEventListener('click',()=>{
- var menu = document.querySelector('.menu');
- menu.classList.toggle('.menu-active');
- });
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment