Jump to content

Recommended Posts

Oi, estou com uma duvida. Estava criando um meno de categorias para um site e-commerce na tray.

Porém estou lutando para editar na plataforma da tray. Tenho um menu horizontal com os subníveis vertical porém queria editar para alterar o estilo e conteúdo mas a tray ta sendo bem estranha para mim alguma ajuda ? 

 

Queria mudar desse menu hover normal de lista do site "JP" pra esse mais dinâmico com um caixa maior e com foto de produtos como exemplo do site "casas bahia".

 

1.jpg

2.jpg

Share this post


Link to post
Share on other sites

Nunca realizei nenhum projeto com essa ferramenta mas se houver alguma maneira a resposta estará aqui http://dev.tray.com.br/, pelo que vi eles tem documentação no github  é so estudar a maneira que a tray lida com template e componentes e como integra com alguma api. 

 

Eu tentaria ver o funcionamento do menu hoje presente no seu template e travez dele cria rum componente ou se possivel extendendo do componente atual de menu se a logica de componente dessa ferramenta seguir a idea de outros frameworks.

Share this post


Link to post
Share on other sites
23 horas atrás, wanderval disse:

Nunca realizei nenhum projeto com essa ferramenta mas se houver alguma maneira a resposta estará aqui http://dev.tray.com.br/, pelo que vi eles tem documentação no github  é so estudar a maneira que a tray lida com template e componentes e como integra com alguma api. 

 

Eu tentaria ver o funcionamento do menu hoje presente no seu template e travez dele cria rum componente ou se possivel extendendo do componente atual de menu se a logica de componente dessa ferramenta seguir a idea de outros frameworks.

A entendi obrigado. Dei uma olhada nessa pagina e os arquivos da tray no github e não achei muita coisa informando como eles trabalham com isso.

Eu estava tentando estudar o sistema deles com o código atual da loja. Eles tem ja configurado no menu padrão em todos os níveis e sub-níveis no HTML uma linguagem que eu acho que é ruby. E é nisso q eu tava com dificuldade, mas qualquer coisa eu vou continuar tentando aqui.

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.