Publicado em 1 de fev.

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

#javascript #css #desenvolvimento-frontend #links #menu

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

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

wanderval· 3 de fev.

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](https://jsbin.com/bitamurefu/2/edit?html,output)

	![imagem](https://forum.imasters.com.br/monthly_2019_02/590374040_Screenshot2019-02-0309_24_23.png.0616827e384d88cc5797f547686f6be4.png)

gui127· 11 de fev.

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?