Ir para conteúdo
gui127

Como faço um menu de download com imagens usadas como abas e expandir as informações e links?

Recommended Posts

Oi, sou novo por aqui. Queria saber como eu posso fazer um menu de links e informações com abas usando imagens, tipo esse:

menu1.jpg

menu2.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Existem maneiras diferentes de se fazer essa tab, uma delas e renderizar todo o conteúdo no DOM e dar display:none nos elementos não utilizados, esse eu não gosto muito;

 

O outro modo e você ter um template padrão para as informações e apenas popule ele pegando a referência dos dados na lógica javascript essa é a que mais me agrada.

 

Mas confesso que curti muito sua dúvida é raro por incrível que possa parecer alguém postar uma imagem de algo que tem como meta, fiz uma imprementação porque curto layout de media. espero que isso possa te ajudar e aproveita as musicas.

 

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="tabs-container">
      <div class="tabs-wrapper">
        <span class="tab tab-0"><a onclick="setTab(0)">music 2018</a></span>
        <span class="tab tab-1"><a onclick="setTab(1)">music 2019</a></span>
        <span class="tab tab-2"><a onclick="setTab(2)">cyber music</a></span>
        <span class="tab tab-3"><a onclick="setTab(3)">laser violin</a></span>
      </div>  
    </div>
    <div class="content-container">
      <div class="content-wrapper">
        <div class="panel-info">
          <span class="title"></span>
        </div>
        <div class="panel-media">
          <div class="panel-video panel-bottom">
            <div>
              <span class="title">video</span>
            </div>

            <iframe
               class="youtube-player"
               width="560" 
               height="315"
               src=""
               frameborder="0"
               allow="autoplay; encrypted-media; picture-in-picture">
            </iframe>
          </div>
          <div class="panel-links panel-bottom">
            <div>
              <span class="title">links</span>
            </div>
            <a class="links-area" href="" target="_blank"></a>
          </div>
        </div>
      </div>
      <div class="message-container">
        <div class="message-wrapper">
          <p class="message">escolha uma musica para ouvir</p>
          <button onclick="setRamdomChoice()">Clique aqui e eu escolho pra você</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

LESS: da pra converter para css pelo JSbIn

 

body {
  background: #FE881B;
  font-family: arial;
  text-transform: uppercase;
}

.container {
  display: flex;
  flex-direction: column;
  
  .tabs-container {
    justify-content: flex-end;
    display: flex;
    
    .tabs-wrapper {
      background: #fff;
      width: 80%;
      height: 50px;
      justify-content: space-between;
      display: flex;
      padding: 0 10px;
      line-height: 40px;
      text-align: center;
      border-radius: 6px 6px 0 0;
      
      .tab {
        border-radius: 10px 10px 0 0;
        width: 24%;
        color: #fff;
        margin-top: 10px;
        cursor: pointer;
        
        &.tab-0 {
          background: #FE881B;
        }
        
        &.tab-1 {
          background: #14A30B;
        }
        
        &.tab-2 {
          background: #1C7BB9;
        }
        
        &.tab-3 {
          background: #565F5E;
        }
        
        &:hover,
        &.active {
          margin-top: 4px;
          transition-duration: 0.2s;
        }
        
      }
      
      
    }
  }
  
  .content-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 2px 0px 20px #616660;
    margin-top: -3px;
    padding: 10px;
    
    .content-wrapper {      
      .panel-info {
        height: 100px;
        background: #FE881B;
        margin: 0 auto;
        border-radius: 6px;
        display: flex;

        .title {
          margin: auto;
          color: #FE881B;
          background: #fff;
          padding: 10px;
          border-radius: 20px;
          border: 1px solid #ccc;
        }
      }

      .panel-media {
        height: 300px;
        display: flex;
        padding-top: 10px;
        justify-content: space-between;
        align-content: center;


        .panel-bottom {
          background: #e3e6df;
          border-radius: 6px;
          text-align: center;
          line-height: 50%;

          .title {
            color: #fff;
            background: #000;
            padding: 3px 20px;
            border-radius: 20px;
          }
        }

        .panel-video {
          width: 53%;
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: space-between;

          .youtube-player {
            width: 95%;
            height: 80%;
            margin: auto;
          }
        }

        .panel-links {
          width: 45%;
          display: flex;
          flex-direction: column;
          word-break: break-all;
          line-height: 1;

          .links-area {
            margin: auto;
            text-transform: initial;
          }
        }
      }
    }
    
    .message-container {
      background: #FE881B;
      color: #fff;
      text-align: center;
      padding: 10px 1px;
      text-transform: capitalize;
      
      button {
        background: #000;
        color: #fff;
        border: none;
        padding: 6px 10px;
        cursor: pointer;
        border-radius: 8px;
      }
    }
  }
}

JS: com alguns metodos ES6

 

// action method
function setTab(tab, autoPlay = false) {
  var data = getDataTab(tab);
  
  if(validData(data)) {
    setActiveTab(tab);
    setPanelData(data);
    setPlayerData(data, autoPlay);
    setLinksData(data);
  } 
  
}

// handler methods
function validData(data) {
  const displayElement = (statusData, classElement) => {
    var elementWrapper = document.getElementsByClassName(classElement)[0];
    
    return elementWrapper.style.display = statusData
      ? 'block'
      : 'none';
  };
  
  const displayMessage = statusData => {
    displayElement(statusData, 'message-container');
  };
  
  const displayContent = statusData => {
    displayMessage(!statusData);
    return displayElement(statusData, 'content-wrapper');
  };
  
  return data
    ? displayContent(true)
    : displayContent(false);
}

function setActiveTab(indexTab) {
  var tabs = document.getElementsByClassName('tab');
  
  const removeActiveClass = () => {
    for(var item = 0; item < tabs.length; item ++) {
      tabs[item].classList.remove("active");
    }
  };
  
  const addActiveClass = () => {
    tabs[indexTab].classList.add("active");
  };
  
  
  removeActiveClass();
  addActiveClass();
}

function setPanelData(content) {
  var panelInfo = document.getElementsByClassName('panel-info')[0].children[0];
  
  panelInfo.innerText = content.info.title;
}

function setPlayerData(content, autoPlay) {
  var player = document.getElementsByClassName('youtube-player')[0];
  
  player.src = autoPlay
                ? content.video.url+'?autoplay=1'
                : content.video.url;
}

function setLinksData(content) {
  var panelLink = document.getElementsByClassName('panel-links')[0].children[1];
  
  panelLink.innerText = content.video.url;
  panelLink.href = content.video.url;
}

function setRamdomChoice() {
  const autoPlay = true;
  setTab(getRandomInt(0,3), autoPlay);
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}


// mock data
function getDataTab(tabIndex) {
  var tabData = {
    0: {
      info: {
        title: 'Music 2018'
      },
      video: {
        url: 'https://www.youtube.com/embed/kXYFunwSIC8'
      }
    },
    1: {
      info: {
        title: 'Music 2019'
      },
      video: {
        url: 'https://www.youtube.com/embed/hG-a6ofQXqE'
      }
    },
    2: {
      info: {
        title: 'Cyber Music'
      },
      video: {
        url: 'https://www.youtube.com/embed/lMDOGbYOS6E'
      }
    },
    3: {
      info: {
        title: 'Laser Violin'
      },
      video: {
        url: 'https://www.youtube.com/embed/MYE3PIZ3xRg'
      }
    }
  };
  
  return tabData[tabIndex];
}

// init
setTab(null);

 

link: https://jsbin.com/bitamurefu/2/edit?html,output

Screenshot 2019-02-03 09.24.23.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado cara, eu estava precisando mesmo desse menu. Tenho uma pergunta, como eu posso usar esse menu como um post padrão em um site ou blog? Tipo quando acessar uma página do site, mostrar vários desse menu de episódios. Quando fui utilizar outro menu que eu fiz, todos mudavam ao mesmo tempo.

 

Outra coisa, esse thumb do vídeo é na verdade uma imagem, que quando clica abre outro site pra assistir, tem como mudar pra isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por nosredna
      Olá amigos,
       
      tenho o seguinte código:
      <html> <script type="text/javascript"> function Soma(){ var soma = 0; var ipts = document.querySelectorAll('input[oninput="Soma()"]'); for(var x=0; x<ipts.length; x++){ var valorItem = parseFloat(ipts[x].value); !isNaN(valorItem) ? soma += parseFloat(valorItem) : null; } document.querySelector('#final').value = soma.toFixed(2); } </script> <form action=""> Total produto1: <input type="text" oninput="Soma()" value="0"><br> Total produto2: <input type="text" oninput="Soma()" value="0"><br> <br> Total todos os produtos12: <input type="text" id="final"> </form> </html> Bom...para essas duas inputs funciona corretamente.
      Porém, se eu quiser colocar mais inputs como: Total produto3 + Total produto4 = Total todos os produtos34, Total produtoX + Total produtoY = Total todos os produtosXY, ...
      e usar o mesmo código JS, é possível? alguém poderia me dar uma dica de como eu faço para fazer isso? já tentei de várias maneiras, mas não estou tendo sucesso...
       
      Fico agradecido. 
    • Por jlrs19833
      Bom dia, pessoal! Estou precisando de uma luz para saber como tratar determinado problema:
       
      Cenário: Ambiente em desenvolvimento de plataforma para gestão de uma empresa.
      Linguagem principal: PHP (framework CodeIgniter)
      Dificuldade: retornar dados de select dinâmico junto ao evento de post do formulário.
       
      Descrição: Conforme mencionado acima, estou desenvolvendo um pequeno sistema para uma empresa que conterá poucas telas, sou desenvolver entusiasta, então não tenho muito conhecimento e prática com este assunto. Em determinada tela, o cliente quer que haja um formulário de cadastro onde dentre os diversos campos deste form, haverá dois do tipo select, onde um é o select de cidade e o outro do tipo estado. O select de Estado é preenchido automaticamente quando do carregamento da view, através de uma chamada do controller/model junto ao BD e o select cidade é preenchido de maneira automática, com javascript, através de uma mesma consulta, passando o ID do campo estado. Minha dificuldade está quando faço o submit deste form, pois o campo value do option deste select (cidade) não é enviado junto, pois no código fonte ele não foi carregado. Como posso fazer para recuperar esse value e enviar junto com o evento de submit?
       
      Segue como meus arquivos estão sendo feitos. Como pode observar estou, tentando apenas printar os campos para que eu possa ter certeza que eles estão sendo carregados.
      https://gist.github.com/jlrs19833/808887a5221ff31ca6ea22bf0c8b85a5
       
      Peço desculpas se estou postando no local errado e que os moderadores me orientem neste caso.
       
      Desde já agradeço o auxílio de cada um.
    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
    • Por leo_santo1
      Venho por meio desse post procurar ajuda com meu código!
      Estou fazendo um código usando `DataTable` , sou iniciante na programação, depois de umas pesquisas e até mesmo algumas dicas conseguir construir uma DataTable com banco de dados.
      Continuando minhas pesquisas para aprimorar mais ainda o código, percebi que a  `DataTable` possuir varias funções interessantes, umas delas em especifico chamou bastante minha atenção e até me ajudaria no código que no caso é o uso de Linhas filhas ocultas, que quando fazemos o click em cima de um botão aparece as informações extras da linha ( no caso os dados a mais do banco ) e ao apertar ela novamente ele oculta as informações.
      Gostaria de ajuda para criar essa função na minha Tabela, já realizei pesquisas no próprio site da  `DataTable` , aqui, porem não entendo bem o jeito que eles explicam.
      segue abaixo meu código da table e da  `DataTable` que conecta com o Banco.
       
      Tabela
      <table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> <thead> <tr> <th>Nome</th> <th>CPF</th> <th>Data de Nascimento</th> <th></th> <th>Ação</th> <th></th> </tr> </thead> <thead> <tr> <td><input type="text" data-column="0" class="search-input-text" style="width: 150px;"></td> <th><input type="text" data-column="1" class="search-input-text" style="width: 150px;"></td> <th><input type="text" id="data" data-column="2" class="search-input-text" style="width: 150px;"></th> <th></th> <td> </td> <td></td> </tr> </thead> </table> Script DataTable
      $(document).ready(function() { var dataTable = $('#employee-grid').DataTable( { "processing": true, "serverSide": true, "bJQueryUI": true, "oLanguage": { "sProcessing": "Processando...", "sLengthMenu": "Mostrar _MENU_ registros", "sZeroRecords": "Não foram encontrados resultados", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando de 0 até 0 de 0 registros", "sInfoFiltered": "", "sInfoPostFix": "", "sSearch": "Buscar:", "sUrl": "", "oPaginate": { "sFirst": "Primeiro", "sPrevious": "Anterior", "sNext": "Seguinte", "sLast": "Último" } }, "ajax":{ url :"../Tabelas/Tabela_consulta_cliente.php", // json datasource type: "post", // method , by default get error: function(){ // error handling $(".employee-grid-error").html(""); $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); $("#employee-grid_processing").css("display","none"); } } } ); $("#employee-grid_filter").css("display","none"); // hiding global search box $('.search-input-text').on( 'keyup click', function () { // for text boxes var i =$(this).attr('data-column'); // getting column index var v =$(this).val(); // getting search input value dataTable.columns(i).search(v).draw(); } ); $('.search-input-select').on( 'change', function () { // for select box var i =$(this).attr('data-column'); var v =$(this).val(); dataTable.columns(i).search(v).draw(); } ); } ); Conexão DataTable com o Banco de dados
      <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "loc_equipamentos"; $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); $requestData= $_REQUEST; $columns = array( 0=>'nome_usuario', 1=> 'cpf_usuario', 2=> 'data_nascimento', 3=> 'id_usuario', 4=> 'id_usuario', 5=> 'id_usuario' ); $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario"; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; . $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario WHERE tipo_perfil = 'CLIENTE' AND ativo_usuario = 'TRUE'"; if( !empty($requestData['columns'][0]['search']['value']) ){ $sql.=" AND nome_usuario LIKE '".$requestData['columns'][0]['search']['value']."%' "; } if( !empty($requestData['columns'][1]['search']['value']) ){ $sql.=" AND cpf_usuario LIKE '".$requestData['columns'][1]['search']['value']."%' "; } if( !empty($requestData['columns'][2]['search']['value']) ){ //age $sql.=" AND data_nascimento LIKE '".$requestData['columns'][2]['search']['value']."%' "; } $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalFiltered = mysqli_num_rows($query); $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $data = array(); while( $row=mysqli_fetch_array($query) ) { $nestedData=array(); $informacao ="<div class='botaodiv'> <a href = ?informacao=".$row['id_usuario']." >+ Informações</a> </div>"; $editar ="<div class='botaodiv'> <a href = ?editar=".$row['id_usuario']." >Editar</a> </div>"; $deletar ="<div class='botaodiv'> <a href = ../Eventos/evento.php?DesativaCadastro=".$row['id_usuario']." >Excluir</a> </div>"; $nestedData[] = $row["nome_usuario"]; $nestedData[] = $row["cpf_usuario"]; $nestedData[] = $row["data_nascimento"]; $nestedData[] = $informacao; $nestedData[] = $editar; $nestedData[] = $deletar; $data[] = $nestedData; } $json_data = array( "draw" => intval( $requestData['draw'] ), "recordsTotal" => intval( $totalData ), "recordsFiltered" => intval( $totalFiltered ), "data" => $data ); echo json_encode($json_data); ?> Fora o caso de criar Detalhes para Linhas, Caso alguém tenha alguma sugestão de como melhorar meu código ( por exemplo uma Conexão ao Banco mais simples, um Js melhor etc.. ) ou alguma critica para eu evoluir, irei agradecer bastante!  
×

Informação importante

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