ph4x35ccb

menu mobile

Dec 8th, 2021 (edited)
516
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body{
  12.             display: flex;
  13.             justify-content: center;
  14.         }
  15.         nav{
  16.             max-width: 900px;
  17.             width: 100%;
  18.             min-height: 30px;
  19.             margin-top: 30px;
  20.             display: flex;
  21.         }
  22.         ul{
  23.             display: flex;
  24.             list-style:none;
  25.             margin-left: 30px;
  26.         }
  27.         li{
  28.  
  29.         }
  30.         li+li{
  31.             margin-left: 10px;
  32.         }
  33.         a{
  34.             font-size: 20px;
  35.             text-decoration: none;
  36.             color: #696969;
  37.             font-family: 'Trebuchet MS';
  38.             font-weight: bold;
  39.             padding: 5px 10px;
  40.         }
  41.         .ativo{
  42.             background: #696969;
  43.             color: #fff;
  44.             border-radius: 5px;
  45.             transition: .3s;
  46.         }
  47.         .toggle{
  48.             width: 50px;
  49.             height: 10px;
  50.             background: #696969;
  51.             display: none;
  52.         }
  53.         .toggle:after,.toggle:before{
  54.             content: "";
  55.             display: block;
  56.             width: 50px;
  57.             height: 8px;
  58.             background: #696969;
  59.             margin-top: 17px;
  60.         }
  61.         .toggle:before{
  62.             margin-top: -12px;
  63.         }
  64.         @media(max-width: 600px){
  65.             nav{
  66.                 display: grid;
  67.             }
  68.             .menu{
  69.                 display: none;
  70.                 order: 2;
  71.             }
  72.             .toggle{
  73.                 display: block;
  74.                 margin-left: 20px;
  75.                 order: 1;
  76.             }
  77.         }
  78.     </style>
  79.     <title>Document</title>
  80. </head>
  81. <body>
  82.     <nav>
  83.         <ul class="menu">
  84.             <li class="link"><a href="#">Home</a></li>
  85.             <li class="link"><a href="#">Produtos</a></li>
  86.             <li class="link"><a href="#">Sobre</a></li>
  87.             <li class="link"><a href="#">Contato</a></li>
  88.             <li class="link"><a href="#">Faq</a></li>
  89.         </ul>
  90.         <div class="toggle"></div>
  91.     </nav>
  92.     <script>
  93.         const links = document.querySelectorAll('a[href^="#"]');
  94.         function handleLink(event){
  95.             links.forEach((link)=>{
  96.                 link.classList.remove('ativo');
  97.             });
  98.             event.currentTarget.classList.add('ativo');
  99.         }
  100.         links.forEach((link)=>{
  101.             link.addEventListener('click',handleLink);
  102.         })
  103.         var togglemenu = document.querySelector('.toggle');
  104.         togglemenu.addEventListener('click',()=>{
  105.             var menu = document.querySelector('.menu');
  106.             menu.classList.toggle('.menu-active');
  107.         });
  108.     </script>
  109. </body>
  110. </html>
RAW Paste Data