Jump to content
dn.net7@gmail.com

Ajuda! class="open-menu"> Não funciona

Recommended Posts

Meus caros amigo, quero sua ajuda, eu crie um um cabeçalho em html e javascript, ao lado um menu suspenso  que funciona muito bem, e

estou fazendo a inserção deste cabeçalho na header.php do  site em wordpress, porém o único problema que estou enfrentando é que a class="open-menu"> não funciona, ou seja deveria abrir o sub-menu, mas nada acontece. Poderiam me ajudar por gentileza, desde já agradeço.

 

O html funcionando http://hospebrasil.com/header/index

Agora neste site deixou de abrir o menu https://rrmartinsconsultoria.com.br/rrmartins/

 

 

open menu.JPG

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 s3c0
      Olá pessoal,
       
      peguei um exemplo de um menu suspenso que utiliza somente CSS, porém não estou conseguindo adaptar para a minha aplicação.
       
      Segue abaixo:
       
      * { box-sizing: border-box; } body { margin: 0; } /*Configurações Padrões*/ ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none; width:100%; } ul.menu ul{ position:absolute; display:none;} /* Configurações nivel 1*/ ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; padding:0 5px;} .menu li{ float:left; width:auto; position:relative;} .menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; width:240px; transition:all 0.1s linear; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:0px; width:250px; } .menu ul.submenu-1 a{ padding:0 20px; width:250px; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-2{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-2 a{ width:250px; padding:0 20px; } /* Configurações nivel 3*/ .menu li:hover > ul.submenu-3{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-3 a{ width:250px; padding:0 20px; } .column1 { float: left; width: 250px; padding: 10px; min-height: 250px; } .column1 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column1 a:hover { } .column4 { float: right; width: 300px; padding: 10px; min-height: 250px; position:relative; top:0px; } .column4 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column4 a:hover { } .row:after { content: ""; display: table; clear: both; } /*Configurações de cores*/ /*nivel 1*/ .menu{background:#CCC; } .menu a{ color:#000; } .menu li:hover > a{ color:#000; } /*nivel 2*/ .submenu-1{} .submenu-1 a{color:#000;} .submenu-1 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-2{ } .submenu-2 a{color:#000;}; .submenu-2 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-3{ } .submenu-3 a{color:#000;} .submenu-3 li:hover > a{ color:#000; }  
      <ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal --> <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> </ul> </li> </ul>  
      A primeira imagem é o resultado e a segunda imagem, seria o que estou querendo fazer.
       
      Alguém consegue me explicar o que está de errado?
       
      Agradeço a atenção de todos!


    • By Ewerton Hugo
      Boa noite, estou tentando fazer um site, que mostre a hora no momento que é acessado, juntamente com uma imagem que represente os periodos do dia, manhã
      , tarde e noite.Porém não consigo fazer com que o código em java script funcione alguém pode me ajudar (sou iniciante)?
       
       
       
    • By huntressDc
      Estou com uma atividade de aula para fazer e gostaria de uma ajuda, devo receber do usuário o valor da compra e o valor pago, e então exibir o troco. Até aí ok, só que também pede para exibir numa textarea as notas utilizadas no troco, informando sempre o mínimo de notas possíveis, exemplo:
       
       
      vlrCompra = 53,00 vlrPago = 100,00 vlrTroco = 47,00 notasTroco = 4 notas de 10,00 1 nota de 5,00 2 notas de 1,00  
      Não sei como fazer essa última parte, alguém para me ajudar? AS NOTAS QUE EU TENHO DISPONIVEIS SAO 1, 5, 10, 50
      Eis o que fiz até agora:
       
      function calculaTroco(){          var valorCompra = parseFloat($("#valorCompra").val());     var valorPago = parseFloat($("#valorPago").val());     var valorTroco = 0;          if (validarCampos() && validarNan()){         if (valorPago == valorCompra){             valorTroco = 0;             $("#valorTroco").val(valorTroco);             alert("Não gerou troco");                      }else if(valorPago > valorCompra){                          valorTroco = valorPago - valorCompra;             $("#valorTroco").val(valorTroco);                      }else{             alert("Não gerou troco (Valor pago menor que valor da compra)");         }         notasUtilizadas();         $("#valorCompra").val("");         $("#valorPago").val("");         $("#valorCompra").focus();     } } validarCampos() e validarNan() são apenas funções de tratamento. A função notasUtilizadas() seria a função que não estou conseguindo fazer... Devo utilizar array, if, for nessa atividade.
       
      Se alguém puder me ajudar, me dar umas dicas, agradeço muito!
       
      Parte do HTML:
      <!DOCTYPE html>
      <html lang="pt-BR">
          <head>
              <meta charset="utf-8"/>
              <title>Calcular Troco</title>
              <script type="text/javascript" src="jquery.js"></script>
              <style type="text/css">
                  fieldset { width:250px; }
                  label { display:block; float:left; } 
                  label, input, textarea, select { width:150px; margin: 5px 0; }
                  th, td { border:1px solid #ccc; font-size:0.9em; }
              </style>
          </head>
          <body>
              
              <form id="formulario">
                  <fieldset>
                      <legend>Calcular Troco</legend>
                      
                      <label for="valorCompra" >Valor da compra:</label>
                      <input type="text" id="valorCompra" name="valorCompra" /><br />
                      
                      <label for="valorPago" >Valor pago:</label>
                      <input type="text" id="valorPago" name="valorPago" /><br /><br />
                      
                      <button type="button" id="button" onclick="calculaTroco()">Calcular troco</button><br /><br />
                      
                      <label for="valorTroco" >Valor do troco:</label>
                      <input type="text" id="valorTroco" name="valorTroco" readonly="readonly"/><br /><br />    
                      
                      <label for="notasUtilizadas">Notas utilizadas:</label>
                      <textarea rows="3" id="notasUtilizadas" readonly="readonly" ></textarea><br/>
                      
                  </fieldset>
              </form>
          <script type="text/javascript" src="troco.js"></script>
          </body>
      </html>
    • By alysson122010
      Gente tenho um menu que quando abro no pc ele lista assim normal:

      E quando esta em celular mobile fica assim:


      Eu gostaria que ele ficasse tanto no pc ele ficasse igual mobile tmb  tipo oculto para mostrar so quando apertar nos pontinhos igual o mobile como faço isso?
       
      codigo css:
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, font, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td {
        margin:0; padding:0; border:0; background:transparent;
        /*vertical-align: baseline;*/
      }
      /* lists */
      .list-full, .list-full li,
      .list-auto, .list-auto li { width: 100%; float: left; display: block; position: relative; }
      .list-auto, .list-auto li { width: auto; }
      /* floats */
      .float-l { float: left; }
      .float-r { float: right; }
      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #333;
        text-shadow: 0 1px 0 #fff;
      }
      header {
        min-height: 60px;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        background: #30373f;
        z-index: 2;
      }
      header h1 {
        padding: 10px 0 0 10px;
      }
      header h1 a {
        color: #333;
      }
      header ul {
        padding: 15px 10px 0 0;
      }
      header li {
        border-left: 1px solid #ccc;
      }
      header li:first-child {
        border: none;
      }
      header li a {
        display: block;
        padding: 0 10px;
        color: #999;
        font-size: 16px;
        line-height: 30px;
        text-decoration: none;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
      }
      header li a:hover {
        color: #333;
      }
      input#control-nav {
        visibility: hidden;
        position: absolute;
        left: -9999px;
        opacity: 0;
      }
      /* content */
      section {
        padding: 80px 20px 50px;
        border-top: 1px solid #ccc;
        font-size: 20px;
        line-height: 24px;
      }
      section:after {
        content: "";
        display: block;
        clear: both;
      }
      section img {
        width: 44%;
        margin: 0 0 10px 4%;
      }
      section p {
        padding: 0 0 20px;
      }
      .highlights {
        position: relative;
      }
      .highlights input {
        visibility: hidden;
        position: absolute;
        left: -9999px;
        opacity: 0;
      }
      .highlights-item {
        float: left;
        margin: 0 0 0 2%;
        width: 32%;
        text-align: center;
      }
      .highlights-item:first-of-type {
        margin-left: 0;
      }
      .highlights-item img {
        display: block;
        width: 100%;
        margin: 0 0 5px;
      }
      .highlights-item p {
        font-size: 14px;
      }
      .highlights-button {
        display: inline-block;
        padding: 10px 15px 8px;
        cursor: pointer;
        border-radius: 3px;
        border: 1px solid #ccc;
        background-color: #ececec;
        -webkit-transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out;
        transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out;
      }
      .highlights-button:hover {
        border: 1px solid #ececec;
        background-color: #ccc;
      }
      .highlights-buttons {
        display: none;
        clear: both;
        text-align: center;
      }
      .highlights-buttons label {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin: 0 10px; 
        border-radius: 10px;
        background-color: #ccc;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        text-indent: -9999px;
        -webkit-transition: background-color 300ms ease-in-out;
        transition: background-color 300ms ease-in-out;
      }
      .highlights-buttons label:hover {
        background-color: #777;
      }
      /* init modal */
      .modal {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.5s 0.5s ease-in-out;
        transition: all 0.5s 0.5s ease-in-out;
      }
      .modal-content {
        padding: 10px;
        max-width: 600px;
        min-width: 360px;
        max-height: 85%;
        overflow: auto;
        position: absolute;
        top: 5%;
        left: 50%;
        z-index: 2;
        opacity: 0;
        border-radius: 3px;
        background: #fff;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
      }
      .modal-content img {
        display: block;
        width: 100%;
        margin: 10px 0 0;
      }
      .modal-content p {
        padding-top: 10px;
        text-align: justify;
      }
      .modal-close {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5);
      }
      .modal-close:after {
        content: "X";
        float: right;
        margin: 5px 5px 0 0;
        width: 30px;
        height: 30px;
        position: relative;
        z-index: 3;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        background-color: rgba(255,255,255,0.8);
        border-radius: 20px;
        box-shadow: 0 0 3px #000;
      }
      input[id*="modal_"] {
        position: fixed;
        left: -9999px;
        top: 50%;
        opacity: 0;
      }
      input[id*="modal_"]:checked + div.modal {
        opacity: 1;
        visibility: visible;
        -webkit-transition-delay: 0s;
        -ms-transition-delay: 0s;
        transition-delay: 0s;
      }
      input[id*="modal_"]:checked + div.modal .modal-content {
        opacity: 1;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        -webkit-transition-delay: 0.5s;
        -ms-transition-delay: 0.5s;
        transition-delay: 0.5s;
      }
      @media screen and (max-width: 767px) {
        header nav {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          width: 250px;
          border-left: 1px solid #ccc;
          background: #fff;
          overflow-x: auto;
          z-index: 2;
          -webkit-transition: all 500ms ease;
          transition: all 500ms ease;
          -webkit-transform: translate(100%, 0);
          -ms-transform: translate(100%, 0);
          transform: translate(100%, 0);
        }
        header ul.list-auto {
          padding: 0;
        }
        header ul.list-auto li {
          width: 100%;
          border: solid #ccc;
          border-width: 0 0 1px;
        }
        header li a {
          padding: 15px 10px;
        }
        header li a:hover {
          background-color: #ccc;
        }
        .control-nav { /* label icon */
          position: absolute;
          right: 20px;
          top: 20px;
          display: block;
          width: 0px;
          padding: 0px 0;
         
        }
        .control-nav:before {
          content: "";
          display: block;
          height: 0px;
          background: #333;
        }
        .control-nav-close {
          position: fixed; /* label layer */
          right: 0;
          top: 0;
          bottom: 0;
          left: 0;
          display: block;
          z-index: 1;
          background: rgba(0,0,0,0.4);
          -webkit-transition: all 500ms ease;
          transition: all 500ms ease;
          -webkit-transform: translate(100%, 0);
          -ms-transform: translate(100%, 0);
          transform: translate(100%, 0);
        }
        /* checked nav */
        input#control-nav {
          display: block;
        }
        input#control-nav:focus ~ .control-nav {
          border-color: #000;
          box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
        }
        input#control-nav:focus ~ .control-nav:before {
          background: #000;
        }
        input#control-nav:checked ~ nav,
        input#control-nav:checked ~ .control-nav-close {
          -webkit-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
          transform: translate(0, 0);
        }
        header+section {
          padding-top: 80px;
        }
        section {
          padding: 30px 15px 10px;
        }
        .highlights {
          -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
        }
        .highlights-item {
          width: 100%;
          margin-left: 0;
          position: absolute;
          top: 0;
          opacity: 0;
          visibility: hidden;
          -webkit-transition: all 500ms ease-in-out;
          transition: all 500ms ease-in-out;
          -webkit-transform: scale(0.9);
          -ms-transform: scale(0.9);
          transform: scale(0.9);
        }
        .highlights-item p {
          opacity: 0;
          -webkit-transition: opacity 500ms 500ms ease-in-out;
          transition: opacity 500ms 500ms ease-in-out;
        }
        .highlights-buttons {
          display: block;
          padding-top: 10px;
        }
        /*checked*/
        .highlights input:checked + div {
          position: relative;
          opacity: 1;
          visibility: visible;
          z-index: 1;
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
        }
        .highlights input:checked + div p {
          opacity: 1;
        }
        .highlights input:nth-of-type(1):checked ~ .highlights-buttons label:nth-child(1),
        .highlights input:nth-of-type(2):checked ~ .highlights-buttons label:nth-child(2),
        .highlights input:nth-of-type(3):checked ~ .highlights-buttons label:nth-child(3) {
          background-color: #000
        }
        .modal-content {
          padding: 10px 5%;
          min-width: 88%;
        }
      }
      @media screen and (max-width: 100%) {
        header h1 {
          font-size: 20px;
          line-height: 40px;
        }
      }
       
       
      codigo html
      <nav class="float-r">
              <ul class="list-auto" style="color:#FFF;">
                <li>
                  <a href="https://www.baixarfilmetorrent.info/appyoufilmes/" title="Home">Home</a>
                </li>
                <li>
                  <a href="https://www.baixarfilmetorrent.info/appyoufilmes/?acao=series" title="Home">Séries</a>
                </li>
                <?php
          $id = $_GET['id'];
          $cat = mysqli_query($conn, "SELECT * FROM categoria ORDER BY nome ASC");
              while($rowcat = mysqli_fetch_assoc($cat)){
      ?>
                   <li>
                  <a href="?acao=categoria&cat=<?php echo $rowcat['id'];?>" title="<?php echo utf8_encode($rowcat['nome']);?>"><?php echo utf8_encode($rowcat['nome']);?></a>
                </li>
                <?php }?>
              </ul>
            </nav> 
×

Important Information

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