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 Guga Alves
      Olá, estou enfrentando um problema no qual não tinha tido contato até então.

      Alguns textos em uma landing que estou trabalhando simplesmente não exibidos ou apresentam erros na exibição.

      Gostaria de saber se alguém já enfrentado esse problema poderia me ajudar com isso.

      Abaixo segue imagens dos erros
       
       
       


    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
    • Por Vitor Correa
      Olá, estou criando uma página em html e estou tendo dificuldade em achar uma solução para esse problema, como faço para que o menu fique fixo em todas as páginas desse site sem que seja necessário refazer todo o código? Segue abaixo o código do meu menu e do css:
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./../css/header.css"> <title></title> </head> <body> <header> <img src="./../img/fundo.png"> <nav> <ul> <li><a href="sla.html" class="active">Início</a></li> <li><a href="pps.html">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> </ul> </nav> </header> </body> </html> img { width: 100px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; font-weight: bold; } li { float: left; border-right: 0px solid #333; } li: last-child { border-right: none; } li a { display: block; padding: 10px 15px; color: white; text-align: center; text-decoration: none; } li a:hover:not(.active){ background-color: #111; } .active { background-color: #FF0000; float: right; color: #111; }  
    • Por _badi_
      Preciso de ajuda! Pode parecer uma dúvida besta, mas sou nova nessa área e não estou conseguindo resolver essa questão da facul!
      A questão é:
      1)      Faça o fluxograma e depois faça o código em Javascript de um programa  que lê  3 notas obtidas por um aluno e depois calcule  e imprima a média dos para avaliação, usando  a fórmula abaixo. Imprimir depois o conceito, conforme a tabela abaixo. Use o prompt no javascript e um botão que mostre a média e o conceito depois que do clique no mesmo.
      MA = (Nota1 + Nota2 x 2 + Nota3 x 3 + ME )/7
      Média de Aproveitamento
      Conceito
      10
      A
      7,5 e < 10
      B
      4,0 e < 7,5
      C
      < 4,0
      D
       
      Meu código ficou assim:
      <!DOCTYPE html> <html> <head>      </head> <body> Para calcular sua media e saber seu conceito, clique no botao abaixo: <br> <br> <button onclick='mostra()'>Try it</button> <p id="resp"></p> <br> <br> <script>     function mostra(){         var nota1 = prompt ("Digite a nota 1");         var resp1 = parseInt (nota1);         var nota2 = prompt ("Digite a nota 2");         var resp2 = parseInt (nota2);         var nota3 = prompt ("Digite a nota 3");         var resp3 = parseInt (nota3);         var ME = (resp1 + resp2 + resp3)/3;         var MA = resp1 + (resp2 * 2) + (resp3 * 3) + ME/7;         if (MA=10) {             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi A!");         } else if (MA=7.5&&MA<10){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi B!");         } else if (MA=4&&MA<7.5){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi C!");         } else if (MA<4){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi D!");         }         }          </script> </body> </html>  
      Mas sempre volta como conceito A, não importa os valores que coloco :(
      Obrigado!
       
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
×

Informação importante

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