Ir para conteúdo
LuizH.M

Menu responsivo

Recommended Posts

Então gente eu to com um menu mas não consigo deixar ele responsivo, eu sei q existe varios outros menus responsivo na internet mas meu site ja ta pronto so falta a parte do menu conto com a ajuda de vcs

 

HTML

<!-- Barra de Menu -->
<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:54px;
background-color: #333;
font-family:'Arial';
}

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

 /*css custom*/
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
}

.menu ul li{
width:50px auto;
float:left;

}

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

}

.menu ul ul{
position:absolute;
visibility:hidden;
}

.menu ul li:hover ul{
visibility:visible;
}

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

.menu ul ul li{
float:none;
border-bottom:1px solid #ccc;
}

.menu ul ul li a{
background-color:#069;
}

@media screen and (max-width: 640px){
.menu ul li{
        width: 100%;
        text-align:center;
    }
    .menu a{
        text-align:center;
    } 
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mano vou lhe ajudar, só com a <div> pois não utilizo <nav> no meu site, só espero que lhe ajude

<!-- Barra de Menu -->
<div class="container">
    <div class="menu-resp"></div>
  		<div 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>
  		</div>
    </div>

no seu CSS

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

.menu{
width:100%;
height:54px;
background-color: #333;
font-family:'Arial';
}
.menu ul{
list-style:none;
position:relative;
background-color: #333;
 /*css custom*/
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
}
.menu ul li{
width:50px auto;
float:left;
}
.menu a{
padding:15px;
display:block;
text-decoration:none;
text-align:center;
color:#fff;
}
.menu ul ul{
position:absolute;
visibility:hidden;
}
.menu ul li:hover ul{
visibility:visible;
}
.menu a:hover{
background-color:#f4f4f4;
color:#555;
}
.menu ul ul li{
float:none;
border-bottom:1px solid #ccc;
}
.menu ul ul li a{
background-color:#069;
}
@media screen and (max-width: 640px){
.menu ul li{
        width: 100%;
        text-align:center;
    }
    .menu a{
        text-align:center;
    } 
}
@media only screen and (max-width:980px) {
    .menu-resp {
        display: block;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAkAQMAAADM7JoSAAAABlBMVEUAAAC4ISjXAKt+AAAAAXRSTlMAQObYZgAAABdJREFUCNdjoBKQ////AYKiXANhlZQDAPelEe9cRNbRAAAAAElFTkSuQmCC') center no-repeat;
        padding: 20px;
        cursor: pointer;
    }
    .menu {
        display: none;
    }
    .menu li {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
        padding: 0px;
    }  

}

Mano tenta ver aí e depois avisa se deu certo ou errado pra eu ver onde está o erro!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por reginaldo123
      estou com dificuldade em criar uma url pernalizada exemplo
       
      href="www.bolacha,.com/novabolacha"
      value= "www.bolacha.com"
       
      quando o usuario copia a url para colocar em outra pagina quero que apareça o conteudo de value, e seja direcionado para o href.
       
    • Por Incompetech
      Então.. a um tempo atrás eu fiz um post pedindo ajuda em relação a tooltip mas não obtive resposta, então decidi deixar essa funcionalidade para depois.
      Como disse na minha primeira pergunta eu estou praticando HTML / CSS / JS ... então comecei a fazer uma entrada para MU ONLINE que foi um dos jogos que mais joguei em épocas de LAN HOUSE. Então o que quero perguntar a vocês é o seguinte:

      Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.
       
      No meu caso eu criei essa entrada no Photoshop: 
       
      E no caso gostaria de fazer a mesma coisa porém clicando nas setas que estão do lado da box como podem ver no centro da imagem.
      Para isto eu devo usar Js? E qual código devo usar, eu sou super perdido com Js.
      Agradeço desde já! :D

    • Por JeanTDZ
      Eu tenho um form com algumas informações etc. O form envia pro banco de dados e tudo mais, funcional.
       
      Alguém teria algum exemplo que após o submit, o form é transformado em pdf/doc e direcionado para uma pasta/ftp já criada.?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.