Jump to content

EdPaulino

Members
  • Content count

    1
  • Joined

  • Last visited

Community Reputation

0 Comum

About EdPaulino

  1. EdPaulino

    Responsividade

    Bom dia pessoal, estou tentando inserir um menu responsivo no meu projeto, mas quando acesso pelo celular ele não se adapta, continua do mesmo jeito que no computador, o que deve-se fazer pra forçar-lo a se adaptar? segue codigo: <!-- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu RESPONSIVO</title> <!---<link rel="stylesheet" href="style.css">--> </head> <style> *{ margin: 0; padding: 0; } .menu{ width: 100%; height: 50px; background-color: #f0f0f0; font-family:'Arial'; } .menu ul{ list-style:none; position: relative; } .menu ul li{ width: 150px; float: left; } .menu ul ul{ position: absolute; visibility: hidden; } .menu ul li:hover ul{ visibility: visible; display:block; } .menu a{ text-decoration: none; display: block; padding: 15px; text-align: center; background-color: #f6f6f6; color: #000; } .menu a:hover{ background-color: #f4f4f4; } .menu ul ul li{ float: none; border-bottom: 1px solid #000; } .menu ul ul li a{ background-color: #f0f0f0; } label[for="bt_menu"]{ padding: 5px; background-color: #d0d0d0; font-family: 'Arial'; text-align: center; font-size: 30px; width: 50px; height: 50px; } #bt_menu{ display: none ; } label[for="bt_menu"]{ display: none; } @media (max-width: 800px){ label[for="bt_menu"]{ display:block; margin-left: 0; } #bt_menu:checked ~ .menu{ margin-left: 0; display: block; } .menu{ margin-top:5px; margin-left: -100%; transition: all .4s } .menu ul li{ width:100%; float: none; } .menu ul ul{ position:static; overflow: hidden; max-height: 0; transition: all 2s; } .menu ul li:hover ul{ height:auto; max-height: 200px; } } </style> <body> <input type="checkbox" id="bt_menu"> <label for="bt_menu">&#9776;</label> <nav class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a> <ul> <li><a href="#">Criação de Sites</a></li> <li><a href="#">Artes Visuais</a></li> </ul> </li> <li><a href="#">Cursos</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">HTML/CSS</a></li> </ul> </li> <li><a href="#">Contato</a></li> </ul> </nav> </body> </html> --->
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.