Jump to content
  • 0

Question

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>

 

--->

Captura de Tela (388).png

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Olá!

Eu não entendi o que quis dizer com "não se adapta".

Quer que ao acessar através de um dispositivo mobile, ele se torne "3 barrinhas" com drop down?

Share this post


Link to post
Share on other sites
  • 0

Pode-se adicionar isso a tag head

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Assim você indica a escala inicial da página, que browsers vão se orientar por isso para aplicar o media query.

Sem isso o browser nunca irá saber em qual escala de resolução está a página.

 

Exemplo:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Título da Página</title>
</head>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By luiz monteiro
      Tudo bem pessoal!
      Estou há alguns dias pesquisando e usando diferentes dicas para resolver o problema para que a borda inferior de 1px aplicada em quatro boxes sejam exibidas igualmente no chrome, safari, mozilla, opera e IE.
      A estrutura é a seguinte:
       
      ==========CSS
       
      html, body, span, p, form, img, a, ul, ol, li, table, tr, td, div
      {
          margin: 0px;
          padding: 0px; 
          border:none; 
          outline:none;
          list-style-type:none;
          box-sizing: border-box;
      }
       
      *
      {
          font-size: 14px;
          font-family: verdana, arial;
      }
       
      .container
      {
          width: 608px;
          height: 421px;
          margin: auto;
          margin-top: 50px;
          overflow: hidden;
      }
       
      .box_one, .box_two
      {
          display: inline-block;
          width: 300px;
          height: 250px;
          overflow: hidden;
      }
       
      .border_bottom
      {
          border-bottom: #f5f5f5 solid 1px;
      }
       
      .border_bottom_white
      {
          border-bottom: #fff solid 1px;
      }
       
      .espaco
      {
          margin-right: 2px;
      }
       
      .box_tree, .box_four, .box_fift
      {
          display: inline-block;
          width: 198px;
          height: 149px;
          margin-top: 20px;
          overflow: hidden;
      }
       
      .vertical
      {
          vertical-align: top;
      }
       
       
       
      ============HTML
       
         <content>

              <div class="container">
       
                  <div class="box_one border_bottom_white espaco vertical">box one in first line</div>
                  <div class="box_two border_bottom vertical">box two in first line</div>
                  <div class="box_tree espaco border_bottom vertical">box tree in second line</div>
                  <div class="box_four espaco border_bottom vertical">box four in second line</div>
                  <div class="box_fift border_bottom vertical">box fift in second line</div>
            
          </div>
       
       </content>
       
      O que ocorre é que cada navegador exibe de uma maneira diferente, mesmo resetando o box-sizing: border-box;  o font-size e o font-family.
      Essa configuração do CSS foi a mais próxima do desejável.
      A estrutura do HTML precisa ser essa aí.
      Agradeço desde já.
       
       
       
       
    • By Marlonsantos
      Olá pessoal, eu estou começando meu curso de programação Full Stack e tive a tarefa de fazer uma página mais parecida possível com essa. Mas estou com muita dificuldade na hora de colocar essa <DIV> branca dentro dessa <DiV> preta. Eu já consegui colocar os links nas imagens do Facebook e do Instagram, porém não consigo alinhar elas no canto direito, meu <h1> vem junto... Muito obrigado pela atenção galera

    • By thailangodoy
      Boa tarde amigos,
       
      Quero copiar o efeito hover, que aparece na foto de perfil do login, o qual consiste em uma borda externa, que não influencia no tamanho.
       
      Tentei atribuiu o box-sizing:border-box; // ele diminui a imagem e traz a borda para dentro.
       


    • By leandro123456789
      <div id="direito">
             
             <?php 
                      
                 $link = filter_input(INPUT_GET, 'link');
                 
                 $pag[1] = "../admin/home.php";
                 $pag[2] = "../admin/classes/Lista.php";
                 
              
              
                 if(!empty($link)){
                     
                     if(file_exists($pag[$link]))
                        
                      {
                         include $pag[$link];
                      
                      }
                        
                      else
                      { 
                         
                          include "home.php";
                      
                      }
                     
                 }else{
                     include "home.php";
                 }
              
              ?>
             
          </div>
       
       
      Estou tentando colocar a paginação do meu banco em $ pag [2] na minha página: ../admin/classes/Lista.php tem o seguinte código de paginação:

      <? php
          
          include_once ("../ admin / classes / ClassConexao.php");
          
          
          // verifique a página atual se informado no URL, caso contrário, ela será atribuída como 1ª página
          $ pagina = (isset ($ _ GET ['link = 2']))? $ _GET ['link = 2']: 1;
       
          // seleciona todos os itens da tabela
          $ cmd = "selecione * da categoria";
          $ produtos = mysqli_query ($ conn, $ cmd);
          
          // conta o total de itens
          $ total = mysqli_num_rows ($ produtos);
       
          // seta o número de itens por página, neste caso, 2 itens
          $ registros = 2;
       
          // calcula o número de páginas arredondando o resultado
          $ numPaginas = teto ($ total / $ registros);
       
          // variável para calcular o início da visualização com base na página atual
          $ inicio = ($ registros * $ pagina) - $ registros;
       
          // seleciona itens por página
          $ cmd = "selecione * da categoria limite $ inicio, $ registros";
          $ produtos = mysqli_query ($ conn, $ cmd);
          $ total = mysqli_num_rows ($ produtos);
           
          // exibe produtos selecionados
          while ($ produto = mysqli_fetch_array ($ produtos)) {
              echo $ produto ['id_categoria']. "-";
              echo $ produto ['categoria']. "-";
              echo $ produto ['ativo_categoria']. "<br />";
          }

      // Não sei como consertar esta parte para mostrar a paginação nesse $ pag [2] = "../admin/classes/Lista.php";
           
          // exibe paginação
          para ($ i = 1; $ i <$ numPaginas + 1; $ i ++) {
              
             echo "<a href='?pagina=$i'>". $ i. "</a>";
          }
                  
      ?>
      Meu menu fica assim:

      <div id = "sessao"> Categoria </div>
         <ul>
             
            
             <li> <a href="index.php?link=3"> Cadastro </a> </li>
             <li> <a href="index.php?link=2"> Listar / Editar </a> </li>
         
        </ul>
×

Important Information

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