Jump to content
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;
    } 
}

Share this post


Link to post
Share on other 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!

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 barrigademel
      <head> <!-- Favicon --> <link href='http://www.iconj.com/ico/e/9/e993nwoswx.ico' rel='shortcut icon' type='image/x-icon'/> Não importa como eu adicione ou mude o campo favicon, ele simplesmente não sobe. já tentei re-fazer umas 15x, e mandar as 15 pro head todas sobem sem erro, mas não muda o favicon
    • By bleszerd
      Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro.
       
      Como podem ver até pela imagem, design não é meu ponto forte.
       
      Código do JSX (Componente do React):
      <div className="login-container"> <section className="form"> <form> <h1>Bem vindo!</h1> <input type="text" placeholder="Login" /> <input type="password" placeholder="Senha" /> <p>Possuo um Token</p> <input type="text" placeholder="Token" className="token-input" /> </form> </section> </div>  
      Código do CSS:
      .login-container{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1120px; height: 100vh; margin: 0 auto; } .login-container section.form{ width: 100%; max-width: 350px; } .login-container section.form form{ display: flex; justify-content: center; width: 100%; max-width: 1250px; height: 100%; max-height: 700px; } .login-container section.form form h1{ color: #fff; font-weight: bolder; text-shadow: #1B182E 2px 2px 8px; font-size: 42px; margin-bottom: 32px; position: absolute; margin-top: -65px; background: transparent; } .login-container section.form form input{ display: flex; justify-content: space-between; margin: 5px; width: 180px; height: 40px; max-width: 100%; font-weight: bold; padding: 8px; border-radius: 5px; color: white; background: #0A0816; border: solid #0D0929 2px; } .login-container section.form form p{ } .login-container section.form form input + p + input{ background: black; border: solid yellow 2px; }  
      Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)

    • By sander147
      Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/
      Deveria ficar assim:
       https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825
       
      Ficou assim:

    • By vcapelli
      Eu sei o que eu vou pedir é meio loucura mas espero que ao menos seja possível. É o seguinte: eu quero fixar um valor X e sempre depois das 18 horas esse valor atualizasse aumentando ou diminuindo de acordo com a bolsa de valores. Exemplo:
      Orçamento 100bi, hoje a bolsa fechou em queda de 2,73% então ela atualizaria para 97,27bi.
      Eu sei que é loucura mas se for possível realizar agradeceria imensamente, não precisam ter pressa também
×

Important Information

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