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 Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por allancisneiro
      pessoal boa tarde, estou construindo um arquivo HTML, porém estou com um problema de alinhamento do texto apartir do segundo<H1>.  já tentei  usar o comando align:"left". mas não funcionu.
      quem puder ajudar agradeço. a ideia é alinhar tudo à esquerda
       
      este arquivo contém este código-fonte:
       
      <!DOCTYPE html>
      <html>
      <head>
      <title>Título da página</title>
      <meta charset="utf-8"/>
      </head>
      <body>
      <h1>Lista não ordenada</h1>
      <ul>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      <h1 align="left">Lista ordenada</h1>
      <OL>
      <li>LIVERPOOL</li>
      <li>CHELSEA</li>
      <li>MANCHESTER CITY</li>
      <li>MANCHESTER UNITED</li>
      <li>ARSENAL</li>
      <li>TOTTENHAM</li>

      </OL>
          
      </body>
      </html>

    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
×

Informação importante

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