Jump to content
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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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?

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 ricardonews
      Olá pessoal eu tenho essa imagem de um login  que vou mostrar aqui, consegui  o css dela , porem não consegui colocar no meu login,  eu vou deixar o login em html,  em css eu estou  dificuldade. Desde já agradeço a todos
       

       então eu o css dela é esse aqui
      *{margin:0; padding:0;} html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } .erros, .ok { width:390px; padding:5px; background:rgba(238, 249, 113, 0.9); margin: 20px auto 0 auto; border: 1px solid rgba(222,239,10,0.9); border-radius: 4px; color: #333; } .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;} body{ font-family: "Trebuchet MS", tahoma, arial; } #formulario{ width:500px; margin:40px auto; text-align:center; position:relative; } #formulario fieldset{ background:white; border:0 none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 15px 1px rgba(0,0,0, 0.4); padding:20px 30px; box-sizing: border-box; width:80%; margin:0 10%; position:absolute; } #formulario input, #formulario textarea{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #formulario .acao{ width:100px; background:rgba(38, 128, 101, 0.9); color:white; text-transform:uppercase; font-weight:bold; padding:12px 0; float:left; margin-right:5%; } #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;} Aqui abaixo é o html que eu não consegui deixar no css do jeito que está na imagem.
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>APRENDIZ DE JS</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> </div> </div> </div> </body> </html>  
       
    • By egalauber
      Quero que meus links tenham marcadores e que os marcadores fiquem selecionados juntos com o link. Pra isso, coloquei o LI dentro do A. <a><li>meu link</li></a>
      Só que o link ficou muito grande. Mesmo com o mouse longe do texto, ele já ativa o link. Vejam na imagem.
       

       
      Vejam o código:
       
      CSS
      #links_uteis {
              width:482px;
              height:230px;
              float:right;
              margin-top:20px;
              margin-right:20px;
              font-size:20px;
              list-style-type:disc;
              list-style-position:inside;
          }
      #links_uteis table {
              width:420px;
              margin-left:10px;
          }
      #links_uteis td {
              width:210px;
              padding:5px 10px 5px 10px;
          }
      #links_uteis a:hover {
              text-decoration:underline;
              color:#D90000;
          }
       
       
      HTML
      <div id="links_uteis">
      Links úteis
      <div class="barra_titulo"></div>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
          <a href="#" target="_blank"><li>Inmetro</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>Seplag</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Ipsemg</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>IOF-MG</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>ALMG</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>MGS</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Portal de serviços</li></a></td>
          <td>
          <a href="#" target="_blank"><li>Portal do servidor</li></a></td>
        </tr>
      </table>

      </div> <!--Fecha a div links_uteis-->
    • By odenilson marques
      Ola pessoal,  estou precisando de uma força! segue a situação.
       
      tenho 3 formulário em um projeto, sendo eles:
      form_cad_empresa
      form_cad_atividade
      form_cad_processo
       
      no form_cad_atividade e form_cad_processo tenho uma combobox que lista todas empresas cadastradas no form_cad_empresa, porém no form_cad_atividade e no form_cad_processo também tenho um link que redireciona o usuário para o form_cad_empresa para ele cadastrar a empresa caso não encontre a empresa na combobox do form_cad_atividade e form_cad_processo, porém gostaria que quando terminasse o cadastro do form_cad_empresa este teria que ser redirecionado para o form_cad_atividade ou form_cad_processo, ou seja ele retornaria para formulario que chamou o form_cad_empresa.
       
      Alguém pode me da um norte?
       
    • By eduardaarosaa
      Estou estudando Js, fiz esse exemplo abaixo porém o onlick não está chamando a função, nada acontece quando quando clico no botão.
          
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Somando números</title>
      </head>
      <body>
          <h1>Soamando valores</h1>
          <input type="number" name="txt0" id="txt1">
          +
          <input type="number" name="txt2" id="txt3">
          <input type="button" value="somar" id="botao" onclick="somar()">
          <div id="res">
          </div>
          <script>
          
              res.addEventListener('mouseeenter', entrar);
              function somar(){
                  var n1 = window.document.querySelector("input#txt1");
                  var n2 = window.document.querySelector("input#txt3");
                  var n1 = Number(txt1.value);
                  var n2 = Number(txt3.value);
                  var soma = (n1+n2);
                  var res = window.document.getElementById("res");
          
                  res.innerHTML(`A soma é de ${soma}`);
                 
              }
              function entrar(){
                  area.style.background="red";
              }
          </script>
      </body>
      </html>
           
    • By emersongo
      Olá, no meu projeto tenho uma animação ao scroll, quando me aproximo do elemento ele "surge" de algum lado, porém por alguma razão somente alguns elementos do site estão funcionando 100%, outros, no inspecionar mostra que a classe ANIMATE já é adicionada no elemento assim que a página é carregada, e a mesma não é removida mesmo quando eu me aproximo e afasto do elemento.

      Fazendo alguns testes vi que quando o elemento animado está fora do pai SECTION funciona normalmente, quando está dentro não (com exceção do primeiro elemento animado do site).

      Fiz o upload do código para o JSFiddle, https://jsfiddle.net/kuxf7mep/ ,como pode ver o elemento ARTICLE na linha 101 está animado normalmente, porém os elementos HEADER da linha 147 e o MAIN da linha 152 estão com a animação mas não funcionam.

      OBS: Podem fazer o teste colocando um elemento animado dentro e fora da section.
×

Important Information

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