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 Mauricio Molina
      Ola,
       
      Podem me dar uma força, estou elaborando um dashord onde terá algumas funções, uma delas é chamar uma listagem de usuário no banco.
       
      Preciso chamar o css e js para o menu e a tabela.
       
      Sei que é fácil mas sinceramente me perdi, alguém pode dar uma força para chamar os arquivos.
       
      Seguem as imagem de como fica a página
       
      MENU:
       
      <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <script src="js/ie-emulation-modes-warning.js"></script> Tabelas
       
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> Como chamo tudo junto sem um interferir no outro?
       
      No aguardo...
       
      Obrigado!
       
       
       
       
    • By Mucio Willamys
      olá, gostaria da ajuda de vcs :
      este código traz as informações do banco de dados e as coloca dentro de um select html
      é parte de um projeto de um sistema de uma clínica médica, onde ao cadastrar os médicos posso escolher a especialidade do mesmo.
      <select name="especialidade" required="">                 <option value="" >--Escolha uma especialidade--</option>          <?php              $result_especialidade = "select * from especialidade";              $result_especialidade = mysqli_query($bd, $result_especialidade);              while ($row_especialidade = mysqli_fetch_assoc($result_especialidade)){ ?>                    <option value="<?php echo $row_especialidade['id']; ?>"><?php echo  $row_especialidade['nome']; ?> </option> public function editar($id){ include "Bd.class.php"; $nome = $this->nome; $cpf = $this->cpf; $crm = $this->crm; $especialidade = $this->especialidade; $query = "update medico set nome = '$nome', cpf = '$cpf', crm = '$crm', especialidade_id = '$especialidade' where id = $id"; $status = $bd->query($query); return $status; } Acima ^ está a função editar...
       
       
       
      abaixo está o form com as informações do médico.
      <form method="POST" action="../controller/Controller-medico.php?op=e"> <input type="hidden" name="id" size="5" value="<?php echo $id; ?>" > <div class="campo"> <label for="nome">Nome: </label> <input type="nome" name="nome" size="30" value="<?php echo $m->getNome() ?>"> </div> <div class="campo"> <label for="cpf">CPF: </label> <input type="text" name="cpf" size="30" value="<?php echo $m->getCpf() ?>"> </div> <div class="campo"> <label for="rg">CRM: </label> <input type="text" name="crm" size="30" value="<?php echo $m->getCrm() ?>"> </div> <div class="campo"> <label for="especialidade"> Especialidade: </label> </div> <div class="campo"> <input type="submit" value="Atualizar"> </div> </form> Gostaria de saber como faço pra setar um input ou um select no caso para a alteração do dado(especialidade)?
    • By Tommoraes
      Pessoal preciso de ajudar! Queria implementar no meu site um gerador de texto,  tipo ao clicar no botão "gerar" mostraria  texto aleatórios. Como faço isso no HTML? Fiz uma imagem de exemplo. 
       
       


    • By ciceroolira
      olá, gostaria que alguém possa me ajudar, tenho um iframe com um link por exemplo do site da rede tv, na mesma aba tem o player para assistir ao vivo, gostaria de saber como colocar apenas o player para aparecer e o restante do site ficar oculto.
      ou seja, a unica coisa que vai aparecer no meio do iframe é o player ao vivo, estou começando a aprender agora é não tenho muita experiência.
       
      <!doctype html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <body> <iframe src="https://www.redetv.uol.com.br/aovivo" width="680" scrolling="no" height="400" allowfullscreen></iframe> </body> </html>  
×

Important Information

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