Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lunnie

Ajuda com menu responsivo

Por , em Desenvolvimento frontend

Recommended Posts

Lunnie    0

Lunnie
Postado

Olá, peço a ajuda de vocês.

O menu responsivo quando eu clico, ele abre em baixo do slider.
Ja tentei usar z-index, mas não funcionou.

Segue abaixo o código:

(Lembrando que estou começando a estudar agora, então se tiver gambiarra e erros de código me desculpem. Aceito sugestões para melhorar também!)

<div class="container">

<div class="menu">

<nav>

<div>

<i class="fa fa-bars"></i>

</div>

<ul class="menuUL">

<li><a href="#">Home</a></li>

<li><a href="#">Cursos</a></li>

<li><a href="#">Galeria</a></li>

<li><a href="#">Clientes</a></li> <li>

<a href="#">Contato</a></li>

</ul>

</nav>

</div>

<div class="container-position">

<div class="slider">

<img class="mySlides" src="images/1.jpg">

<img class="mySlides" src="images/2.jpg">

<img class="mySlides" src="images/3.jpg">

<img class="mySlides" src="images/4.jpg">

<span onclick="plusDivs(-1)">

<i class="fas fa-angle-left"></i>

</span>

<span onclick="plusDivs(+1)">

<i class="fas fa-angle-right"></i>

</span>

</div>

</div>

</div>

 

<script type="text/javascript">

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {

showDivs(slideIndex += n); }

 

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

if (n > x.length) {

slideIndex = 1;

}

if (n < 1) {

slideIndex = x.length; } ;

for (i = 0; i < x.length; i++) {

x.style.display = "none"; }

x[slideIndex - 1].style.display = "block"; }

 

</script>

 

<script type="text/javascript">

$("nav div").click(function () {

$("ul").slideToggle();

$("ul ul").css("display", "none"); });

$(window).resize(function () {

if ($(window).width() > 768) {

$("ul").removeAttr('style'); } });

</script>

 

 

 

 

css:

body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{position: relative;}

/* ----------------------MENU-----------------------*/

.menu{

position: fixed; width: 100%; box-shadow: 1px 1px 2px #333; -webkit-box-shadow: 1px 1px 2px #333; -moz-box-shadow: 1px 1px 2px #333;

}

.menuUL{

list-style: none; background: #003333 ; text-align: right; margin: 0; padding-right: 110px;

}

.menuUL li{

display: inline-block;

}

.menuUL li a{

color: #fff; text-decoration: none; padding: 25px 35px; font-size: 1.2em; display: block;

}

.menuUL li:hover{

background: #006666;

}

nav div{
display: none;
background: #003333;
color: #fff;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
}

/SLIDER_/

.slider{
width: 100%;
position: relative;
top: 72px;

}

.slider img{

width: 100%; position: relative;

}
.fa-angle-left{
color: white;
position: absolute;
top: 45%;
left: 3%;
font-size: 35px;
cursor: pointer;
}

.fa-angle-right{
color: white;
position: absolute;
font-size: 35px;
top: 45%;
left: 96%;
cursor: pointer;

}

/------------------Responsivo---------------------/

@media(max-width: 768px) {

nav div { display: block; } .menuUL { width: 100%; display: none; padding: 0; } .menuUL li{ padding: 0; display: block; } .menuUL li a{ text-align: center; } .fa-angle-right{ left: 93%; }

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lunnie    0

Lunnie
Postado
3 horas atrás, Lunnie disse:

Olá, peço a ajuda de vocês.

O menu responsivo quando eu clico, ele abre em baixo do slider.
Ja tentei usar z-index, mas não funcionou.

Segue abaixo o código:

(Lembrando que estou começando a estudar agora, então se tiver gambiarra e erros de código me desculpem. Aceito sugestões para melhorar também!)

<div class="container">

<div class="menu">

<nav>

<div>

<i class="fa fa-bars"></i>

</div>

<ul class="menuUL">

<li><a href="#">Home</a></li>

<li><a href="#">Cursos</a></li>

<li><a href="#">Galeria</a></li>

<li><a href="#">Clientes</a></li> <li>

<a href="#">Contato</a></li>

</ul>

</nav>

</div>

<div class="container-position">

<div class="slider">

<img class="mySlides" src="images/1.jpg">

<img class="mySlides" src="images/2.jpg">

<img class="mySlides" src="images/3.jpg">

<img class="mySlides" src="images/4.jpg">

<span onclick="plusDivs(-1)">

<i class="fas fa-angle-left"></i>

</span>

<span onclick="plusDivs(+1)">

<i class="fas fa-angle-right"></i>

</span>

</div>

</div>

</div>

 

<script type="text/javascript">

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {

showDivs(slideIndex += n); }

 

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

if (n > x.length) {

slideIndex = 1;

}

if (n < 1) {

slideIndex = x.length; } ;

for (i = 0; i < x.length; i++) {

x.style.display = "none"; }

x[slideIndex - 1].style.display = "block"; }

 

</script>

 

<script type="text/javascript">

$("nav div").click(function () {

$("ul").slideToggle();

$("ul ul").css("display", "none"); });

$(window).resize(function () {

if ($(window).width() > 768) {

$("ul").removeAttr('style'); } });

</script>

 

 

 

 

css:

body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{position: relative;}

/* ----------------------MENU-----------------------*/

.menu{

position: fixed; width: 100%; box-shadow: 1px 1px 2px #333; -webkit-box-shadow: 1px 1px 2px #333; -moz-box-shadow: 1px 1px 2px #333;

}

.menuUL{

list-style: none; background: #003333 ; text-align: right; margin: 0; padding-right: 110px;

}

.menuUL li{

display: inline-block;

}

.menuUL li a{

color: #fff; text-decoration: none; padding: 25px 35px; font-size: 1.2em; display: block;

}

.menuUL li:hover{

background: #006666;

}

nav div{
display: none;
background: #003333;
color: #fff;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
}

/SLIDER_/

.slider{
width: 100%;
position: relative;
top: 72px;

}

.slider img{

width: 100%; position: relative;

}
.fa-angle-left{
color: white;
position: absolute;
top: 45%;
left: 3%;
font-size: 35px;
cursor: pointer;
}

.fa-angle-right{
color: white;
position: absolute;
font-size: 35px;
top: 45%;
left: 96%;
cursor: pointer;

}

/------------------Responsivo---------------------/

@media(max-width: 768px) {

nav div { display: block; } .menuUL { width: 100%; display: none; padding: 0; } .menuUL li{ padding: 0; display: block; } .menuUL li a{ text-align: center; } .fa-angle-right{ left: 93%; }

}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

Olá Lunnie,

 

Bom não estava com a tela atualizada então, postei e vi que conseguiu, mas não consigo apagar o post.

 

Haviam 2 problemas na sua implementação

-Eu resolvi colocando o z-index:1 na classe ".menu" rs, é o z-index ai resolveu o problema, assim ele sobrepoem o slider em telas menores 

.menu {
  position: fixed; 
  width: 100%; 
  box-shadow: 1px 1px 2px #333; 
  -webkit-box-shadow: 1px 1px 2px #333; 
  -moz-box-shadow: 1px 1px 2px #333;
  
  /*missing z-index*/
  z-index: 1; 

}

-O segundo problema era no script você não havia colocado o index na iteração do for assim os items de imagem não receberiam o display none e todas as imagens ficavam visiveis. 

for (i = 0; i < x.length; i++) {
  // error indice was missing
  // x.style.display = "none";
    
  x[i].style.display = "none";
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • ment0r
      Menu hamburguer com submenu - bootstrap
      Por ment0r
      Boa tarde caros amigos do fórum.
       
      Comecei a trabalhar com sites responsivos (bootstrap) há pouco tempo e ainda não tenho pleno domínio no assunto.
       
      Bom, desenvolvi um site (não responsivo) pra um cliente há alguns meses e o proprietário pediu recentemente para que eu o torna-se responsivo. Acontece que o site tem um sub-menu pra o link Produtos. Causam-me dois problemas:
       
      1) Quando o site é visualizado em aparelhos móveis os links não ficam um embaixo do outro, como deveriam ficar;
      2) Os links do sub-menu não pode aparecer da forma que está aparecendo, pois dessa maneira só os dois primeiros são mostrados.
       
      Pra ajudar vou disponibilizar o link do site. Peço que vejam ele no 'Responsive Mode Design', pois o problema é só quando ele é exibido em dispositivos móveis. Importante: para fazer o sub-menu, utilizei um arquivo CSS (menu.css), provavelmente é isso que está dando o problema, mas não consigo descobrir como corrigir.
       
      Link para o site
       
      Qualquer ajuda é bem vinda e agradeço desde já à todos que se propuserem a ajudar.
    • arthurcastro
      [RESOLVIDO] Menu responsivo não funciona no Firefox
      Por arthurcastro
      Resolvido
    • carlaborginha
      Menu responsivo não fecha depois do clique
      Por carlaborginha
      Oi, pessoal!
       
      Estou com um problema em um site que estou tentando desenvolver. Quando clico em algum item/ link constido dentro do meu menu responsivo, ele não fecha automaticamente após o clique, mas eu gostaria que isso acontecesse. Alguém consegue me ajudar?
      Agradeço muito.
      Segue parte do código:
      <header id="header"> <nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""/></a> </div> <div class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li class="scroll active"><a href="#home">Home</a></li> <li class="scroll"><a href="#proposta">Proposta</a></li> <li class="scroll"><a href="#beneficios">Diferenciais</a></li> <li class="scroll"><a href="#escolas">Escolas</a></li> <li class="scroll"><a href="#services">Produtos</a></li> <li class="scroll"><a href="#get-in-touch">Contato</a></li> </ul> </div> </div><!--/.container--> </nav><!--/nav--> </header><!--/header-->
×

Informação importante

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

  Aceito