Jump to content
  • ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By AlanB.
      Boa tarde galera, tudo bem? estou tentando aprender javascript, mas o que eu preciso fazer eu ainda não sei.
       
      Eu tenho o meu menu do site e logo abaixo tenho a section serviços e a section produtos. Eu queria que inicialmente o background do menu fosse azul, mas quando a pessoa desse um scroll e chegasse na section serviços, o background do menu alterasse a cor. Alguem pode me ajudar? 
    • By aiwprton
       Peça ao usuário para informar o tamanho de um vetor de inteiros. Através de alocação dinâmica, crie este vetor. Utilizando recursividade, faça o que se pede:
       Crie uma função que retorne a soma dos elementos deste vetor;
       Crie uma função que retorne o maior elemento do vetor;
       Crie uma função que retorne o menor elemento do vetor;
       Crie uma função que retorne o produto dos elementos do vetor;
       Crie um main() para testar todas as funções.
    • By sthefany silva
      oi, estou desenvolvendo uma página html e estou utilizando bootstrap, gostaria de fazer um menu com abas e que fosse levemente iclinado para direita... mais ou menos como essa ideia do arquivo... 
       
      segue meu código html:
       
      <ul class="nav nav-tabs" id="#" role="tablist">
       
          <li class="nav-item active">         <a class="nav-link" id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <i class=" fa fa-list-alt"></i> Tarefa</a>   </li>    <li class="nav-item">       <a class="nav-link" id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><i class="fa fa-lightbulb-o"></i> Sugestão</a>    </li>      <li class="nav-item">            <a class="nav-link" id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><i class=" fa fa-search"></i> FAQ</a>       </li> </ul>  segue meu código css:
      .nav-tabs { border-bottom: 2px solid var(--cor-primaria-2); } .nav-tabs > li { float: left; margin-bottom: -1px; /* margin-top: 0px; */ } .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid; border-bottom: 0px; border-radius: 4px 4px 0 0; color: #666666; background: rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:hover { border-color: #FFFFFF; }  
    • 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 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.