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 Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por Bobrinha
      Olá a todos.
       
      Tenho uma dúvida e não sei se é possível caso tenha alguma sugestão por favor avise.
       
      Adicionar resultado de um innerhtml dentro de um link atributo href é possível? ou seja eu tenho um input onde seleciono um ano 
       
      <select id="ano"> <option selected>2019</option> <option value="2018">2018</option> <option value="2017">2017</option> </select> <div id="anoAtual"></div> No query pego o valor ou seja o ano selecionado e jogo no html
       
      $("select").change(function () { document.getElementById("ano").innerHTML = document.getElementById("anoAtual").value; });  
      Agora vem a dúvida como eu jogo na URL? existe uma outra forma? é possível?
       
      <a href='resultado.php&ano=COMO JOGAR O ANO AQUI?'>  
       
    • Por LuanMartinsTI
      Eu tenho o seguinte codigo para capturar minha camera e meu audio, toda vez que eu entro na pagina x ela executa o js e pede acesso a camera de quem acessa a pagina, porem eu vou bloquear essa pagina para que apenas eu ou pessoa autorizadas possam acessar, queria saber o seguinte, eu sei capturar o video e audio, mas como eu vou mostrar pro usuario o meu video e o meu audio??
      <script> video = document.createElement('video'); video.width = 320; video.height = 240; video.autoplay = true; var hasUserMedia = navigator.webkitGetUserMedia ? true : false; navigator.webkitGetUserMedia('video', function(stream){ video.src = webkitURL.createObjectURL(stream); }, function(error){ console.log("Navegador nao suporta", error); }); </script>  
    • Por martinazzo
      não consigo apagar, então deixei assim... se alguém conseguir por favor
×

Informação importante

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