Jump to content
LuizH.M

Gostaria de deixar esse menu responsivo na vertical mas não consigo

Recommended Posts

Gostaria q pudessem me ajudar

HTML

<div class="container">
    <nav class="menu">
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="agenda.php">Agenda</a></li>
            <li><a href="departamento.php">Departamento</a></li>
            <li><a href="https://www.flickr.com/photos/142117425@N02/" target="blanck">Fotos</a></li>
            <li><a href="#localizacao">Localização</a></li>
            <li><a href="https://www.facebook.com/deives.duarte.9"  target="blanck" class="fa fa-facebook"></a></li>
            <li><a href="#" target="blanck" class="fa fa-twitter"></a>
            <li><a href="#" class="fa fa-youtube"></a>
        </ul>
    </nav>
</div>

 

 

 

CSS

 

.container {
    position: absolute;
    margin: 20px;
    width: auto;
}

.menu{
    width:100%;
    height:auto;
    background-color: #333;
    font-family:'Arial';
}

.menu ul{
    list-style:none;
    position:relative;
    background-color: #333;
}

.menu ul li{
    width: auto;
    height:auto;
    float:left;
}

.menu a{
    padding:15px;
    text-decoration:none;
    text-align:center;
    color:#fff;

}

.menu a:hover{
    background-color:#f4f4f4;
    color:#555;
}
 

 

Edited by LuizH.M
Ficou melhor

Share this post


Link to post
Share on other sites

Oi meu caro fiz uma modificação no seu css, não sei bem como você quer deixar responsivo mas vou deixar o link da implementação

1- pesquise sobre media query em css

2-bootstrap, materials(biblioteca) 

 

bootstrap ja tem o menu nav implementado:

versão 3: https://getbootstrap.com/docs/3.3/components/#navbar

versão 4: https://getbootstrap.com/docs/4.1/components/navbar/

 

jsbin: https://jsbin.com/migoyayati/edit?html,css,output

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 Jack Oliveira
      Ola pessoal quero fazer que quando digitar em um campo textarea aparecer em outro textarea com  ckeditor.
       
      Se eu deixar o segundo textarea que receberá o que foi digitado sem ckeditor ele aparece ja com o ckeditor não aparece..
       
      <script> window.oninput = function(event){ var campo = event.target.id; if(campo == "textarea"){ document.querySelector('#textarea-1').value = document.querySelector('#textarea').value; }else if(campo == "textarea-1"){ document.querySelector('#textarea').value = document.querySelector('#textarea-1').value; } }; </script> <div class="col-md-12"> <div class="form-group"> <label>Resumo:</label> <textarea id="textarea" class="form-control" name="resumo" maxlength="250"></textarea> <em>Max. 250 Caracteres</em> </div> <label>Conteúdo:</label> <textarea id="textarea-1" class="form-control ckeditor" name="conteudo"></textarea> <center><hr> <button class="btn btn-primary">Adicionar</button> <br><br> </center> </div>  
    • By vmenezes
      ola galera . tenho uma aplicação com asp  e utilizo javascript para bater foto do cliente . consigo apos a foto batida salvar no pc com o ID do cliente,
      porem gostaria que assim que a foto fosse batida salvasse na raiz do proprio site.
      tem como fazer isso ?
      obg
    • By juliosonic
      Boa noite..
      Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica Curitiba
      Tantra em Curitiba

      Obrigado
      Att
      Julio Cezar
       
       
       
    • By kernmatheus
      Boa noite,
       
      Galera, utilizo uma aplicação que me permite inserir arquivos JavaScript customizados em algumas páginas, e por vezes quando realizo alguma alteração considerável no JS, preciso solicitar aos usuários da ferramenta para limparem o cache, evitando que eles fiquem com as regras antigas do JS e gere algum erro.
       
      Existe alguma forma de esporadicamente quando eu realizar alterações no JS, forçar a limpeza de cache nas máquinas clientes? Ou então de não permitir que o navegador salve cache deste JS que eu customizo as regras?
×

Important Information

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