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

gui127 · Fevereiro 1, 2019

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

wanderval · Fevereiro 3, 2019

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

gui127 · Fevereiro 11, 2019

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?

Entrar

Arquivado

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

Recommended Posts

gui127 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderval 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

gui127 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante