Ir para conteúdo

Arquivado

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

  • 0
Caio Maselli

COMO DESFIXAR UM MENU DE HTML EM JS (Animated Border Menu)

Pergunta

Oi

 

Não estou conseguindo desfixar o menu dessa template de menu chamada Animated Border Menu

 

Preciso que o menu não fique fixo na tela e que continue abrindo e fechando com o JS

https://codepen.io/Y--p--Y/pen/GfIrm

 

Esse é o código 

 

Quando altero o css pra tirar a ''position: fixed" essas três barras somem simplesmente e não entendo porque.

 

Alguém sabe me dizer como fazer isso?

 

 

 

 

 

https://codepen.io/Y--p--Y/pen/GfIrm

Compartilhar este post


Link para o post
Compartilhar em outros sites

1 resposta a esta questão

Recommended Posts


  • Conteúdo Similar

    • Por FabianoSouza
      Galera, por padrão, cada LI que se cria (via jscript), vai parar na parte inferior da UL, né?
      Há uma maneira de fazer a LI criada pela minha function ir para o topo da lista dentro da UL?
       
       
    • Por s3c0
      Olá pessoal,
       
      boa tarde. Tem alguma forma da DIV pai acompanhar a altura da ul filho?
       
      <div class="navPages-container" > <div class="container"> <nav class="navPages" style="text-align:left;"> <ul class="navPages-list"> <li class="navPages-item" style="z-index:3; width:122px;" onmouseover="mostra_fundo();" onmouseout="esconde_fundo();"><a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a> <div id="menu2"> <ul class="parent-menu"> <li onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'"><a href="#1">Home & Kitchen</a> <div class="categoria"> <ul> <li><a href="#11">item1</a></li> <li><a href="#12" onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'">item2</a></li> <li><a href="#13"><i class="fa fa-list"></i> <span>Item 1</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:35px;"></i></a> <div class="subcategoria"> <ul > <li><a href="#111">item</a></li> <li><a href="#112">Even more</a></li> <li><a href="#113">item</a></li> <li><a href="#114">item</a></li> <li><a href="#115">item</a></li> </ul> </div> </li> <li><a href="#14">item4</a></li> <li><a href="#15">item5</a></li> <li><a href="#16">item6</a></li> </ul> </div> </li> #menu2{position:absolute;z-index:3;margin-top:16px; width:1170px; margin-left:-19px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);border:1px solid #d0d0d0;border-radius:0 0 3px 3px; min-height:300px;display:none;font-size:14px;font-weight: bold;} .parent-menu{list-style-type:none;padding:15px 0px;width:270px;float:left;margin-top:0;position:absolute;line-height:35px;} .parent-menu li:hover{background:#ccc;cursor:pointer;} .categoria{display:none;width:270px;left:255px;line-height:35px;list-style-type:none;position: absolute;top: 15px;a {line-height: 35px;}} .categoria ul li:hover{background:#ccc;cursor:pointer;} .categoria ul{list-style-type:none;width:270px;} .categoria ul li{list-style-type:none;width:270px;} .subcategoria{display:none;width:270px;left:270px;line-height:35px;list-style-type:none;position: absolute;top: 0px;a {line-height: 35px;}} .subcategoria ul{list-style-type:none;width:270px;} .subcategoria ul li{list-style-type:none;width:270px;} .subcategoria ul li:hover{background:#ccc;cursor:pointer;} .navPages-item:hover #menu2{display:block;} .parent-menu li:hover .categoria{display:block;} .categoria ul li:hover .subcategoria{display:block;} #menu2 ul a { margin: 0px; display: block; width: 100%; height: 100%; } #menu2 ul li a { margin: 0px; display: block; width: 100%; height: 100%; }  

    • Por FabianoSouza
      Tenho essa lista
       
      <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
      Preciso que ele fique assim:
      1    2
      3    4
      5
       
      Como faço um CSS para isso?
       
      Obrigado.
    • Por Bruno Goedert Dalmolin
      Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes: 
      do HTML:
       
      <header>
          <ul id="Menu">
              <li><a href="SmartAce-Home.html">Home</a></li>
              <li><a href="">Sobre</a></li>
              <li><a href="">Contato</a></li>
          </ul>
      </header>
       
      do CSS:
       
      @charset "UTF-8";
      body {
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background: #112c38;
      }
      ul#Menu {
          
          text-align: center;
          margin: 0;
          padding: 0;
          display: flex;
          top: -10;
      }
      ul#Menu li{
          list-style: none;
          margin: 0 20px;
          transition: 0.5s;
      }
      ul#Menu li a{
          position: relative;
          text-decoration: none;
          padding: 5px;
          font-size: 18px;    
          font-family: sans-serif;
          color: #fff;
          text-transform: uppercase;
          transition: 0.5s;
      }
      ul#Menu:hover li a {
          transform: scale(1.4);
          opacity: .2;
          filter: blur(5px);
      }
      ul#Menu li a:hover {
          transform: scale(2);
          opacity: 1;
          filter: blur(0);
      }
      ul#Menu li a:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #ff497c;
          transition: transform 0.5s;
          transform-origin: right;
          transform: scaleX(0);
          z-index: -1;
      }
      ul#Menu li a:hover:before {
          transition: transform 0.5s;
          transform-origin: left;
          transform: scaleX(1);
      }
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
×

Informação importante

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