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 Usleydocarmo
      Estou com o seguinte erro:
      Ao acessar o meu site na pagina principal tudo ok. Porém quando acesso em um menu que vai carregar um arquivo que está em uma pasta e não na pasta raiz, ai o arquivo css não é carregado.
       
      <a href="usuarios"> home</a> chamo o arquivo funcionarios na mesma pasta onde está o arquivo index.php -funciona
      <a href="usuarios/usuarios"> home</a>  Pasta 'usuarios' e dentro dela chamo o arquivo 'usuarios' - ai não funciona
       
      Descobri que quando entro na pasta usuários fica assim, com a basta no diretório do arquivo. Como corrigir?
      <link rel="stylesheet" href="http://localhost/keiri/admin/usuarios/plugins/fontawesome-free/css/all.min.css&nbsp;">
       
      Meu htaccess
      RewriteRule ^([a-z]+)\/?$ dashboard.php?arquivo=$1 [NC,L]
      RewriteRule ^([a-z]+)\/([a-z]+)$ dashboard.php?pasta=$1&arquivo=$2 [NC,L]
      RewriteRule ^([a-z]+)\/([a-z]+)\/([0-9]+)$ dashboard.php?pasta=$1&arquivo=$2&item=$3 [NC,L]
    • By lezão
      Ola boa tarde!
      Td bem com vcs?
       
      Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3.
       
       
      obrigado pela atenção.

    • By RukasuNiiChan
      ========== Meu Projeto ==========
      * Introdução
      Bem , eu estou no ultimo ano do E.M , e com essa pandemia , algumas adaptações foram tomadas , como todos sabem , a AULA ONLINE , porem , na minha escola não se utiliza a verificação de presença ( Chamada ) por Vídeo , através de um WebCam , e sim a confirmação por digitalização , todos os alunos devem escrever " ok " quando o respectivo professor digitar " chamada " no chat:
      Exemplo 1: https://prnt.sc/uiw9jy
      * Ideia
      Então o que eu pensei , A Ideia Inicial era criar um BOT para identificar a palavra " Chamada " no chat , e então , automaticamente , ele escrevesse " ok " ou " Presente " para assim automatizar o processo e facilitar a minha vida.
      Porem eu descobri uma funcionalidade no Google que são as extensões para o Google Meet que até então eu não sabia que existiam
      Entretanto se alguém que não tem experiencia em extensões mas tem em engenharia de software , me ajudaria da mesma forma
      * Conclusão
      Enfim , a minha ideia é automatizar o processo de " Responder a chamada " durante a aula online ,  como sou um estudante de programação queria muito a ajuda de vocês pra isso , pois meu conhecimento é leigo , qualquer duvida sobre o projeto , podem responder a este tópico pois , irei responder dentro de 24 horas , ou se o interesse nele for grande , me chamem na DM do Discord ( Rukasu#7321 ) 
      ===============================
       
    • By Leonel57
      Prezados,
      Fiz um menu lateral mas ao colocar várias imagens ao lado elas ficam na parte de baixo.
      Ele é um menu de produtos.
      Poderiam me ajudar?
      <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <style type="text/css"> .container { border: 1px solid gray; display: inline-block; float: right; margin-right: 150px; margin-left: 300px; border-spacing: 5px; padding: :5px; } p { text-align:center; } .menulateral{ background-color:#5F9EA0; width: 250px; height: 1000px; } ul{ list-style: none; } ul li a{ display: block; font-size: 18px; font-family: 'Arial'; padding: 10px; border-bottom: solid 1px #FFFFF0; color: #ccc; text-decoration: none; } ul li span{ float: right; padding-right: 10px; } ul li a:hover{ background-color: #5b859a; } .conteudo{ display: table; } </style> </head> <body> <nav class = menulateral> <ul> <li><a href="racao-cachorro.html">Ração para Cachorros</a></li> <li><a href="">Peticos e Ossos</a></li> <li><a href="">Casas e Tocas</a></li> <li><a href="">Coleiras</a></li> <li><a href="">Tapetes e Fraldas</a></li> <li><a href="">Briquendos</a></li> <li><a href="">Camas e Cobertores</a></li> <li><a href="">Portões</a></li> <li><a href="">Grades</a></li> </ul> <ul> <li><a href="petisco-gato.html">Petiscos para Gatos</a></li> <li><a href="areia-gato.html">Areia</a></li> <li><a href="">Beleza e Limpeza</a></li> <li><a href="">Arranhadores e Brinquedos</a></li> <li><a href="">Coleiras e Peitorais</a></li> <li><a href="">Roupas</a></li> </ul> <ul> <li><a href="alimentacao-passaro.html">Alimentacao</a></li> <li><a href="gaiola-passaro.html">Gaiolas</a></li> <li><a href="">Puleiro</a></li> <li><a href="">Acessorios</a></li> <li><a href="">Farmácia</a></li> </ul> <ul> <li><a href="alimentacao-peixe.html">Alimentacao</a></li> <li><a href="aquario-peixe.html">Aquários</a></li> <li><a href="">Decoração</a></li> </ul> </nav> <nav class = "conteudo"> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> </div> </nav> </body> </html>  



    • By emmanuelsiqueira30
      Pessoal boa tarde.
      Gostaria de saber como posso pegar os valores da linha na tabela <table> que eu clicar no link visualizar dados na coluna opções e aparecer dados do banco daquela linha.
       
       
       
       
×

Important Information

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