2

Alguém sabe me dar alguma dica de como construir um menu simples, como o desse gif: https://i.stack.imgur.com/JKWr5.gif Ou parecido. Para uma página web, já tentei de algumas maneiras, mas falta conhecimento.

2

3 Respostas 3

4

Fiz este exemplo abaixo me baseando neste código. Acredito estar bem próximo do que precisa. O que vai ter que mudar é o menu 5 para ter uma imagem de background e não cor.

ul.menu {
  margin: 100px auto;
  padding: 0;
  position: relative;
  width: 20em;
  height: 20em;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.89);
  border-radius: 100%;
}

ul.menu li {
  position: absolute;
  list-style: none;
  width: 10em;
  height: 10em;
  color: #fff;
  text-align: center;
  line-height: 5em;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

ul.menu li:hover {
  cursor: pointer;
}

ul.menu li:nth-child(5):hover {
  width: 20em;
  height: 20em;
  top: 0em;
  left: 0em;
  line-height: 8em;
  background: #90f;
  border-radius: 100%;
  z-index: 19;
}

ul.menu li:nth-child(1) {
  top: 0;
  left: 0;
  background: #90d;
  border-top-left-radius: 100%;
}

ul.menu li:nth-child(2) {
  top: 0em;
  left: 10em;
  background: #7f00b7;
  border-top-right-radius: 100%;
}

ul.menu li:nth-child(3) {
  top: 10em;
  left: 0;
  background: #57007d;
  border-bottom-left-radius: 100%
}

ul.menu li:nth-child(4) {
  top: 10em;
  left: 10em;
  background: #6a0098;
  border-bottom-right-radius: 100%
}

ul.menu li:nth-child(5) {
  width: 8em;
  height: 8em;
  top: 6em;
  left: 6em;
  line-height: 8em;
  background: #90f;
  border-radius: 100%;
  z-index: 11;
}

ul.menu li div {
  display: table;
  width: 100%;
  height: 100%;
}

ul.menu li div span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<ul class="menu">
  <li>
    <div><span>MENU1</span></div>
  </li>
  <li>
    <div><span>MENU2</span></div>
  </li>
  <li>
    <div><span>MENU3</span></div>
  </li>
  <li>
    <div><span>MENU4</span></div>
  </li>
  <li>
    <div><span>MENU5</span></div>
  </li>
</ul>

3

você pode fazer da seguinte forma. O segredo é conseguir lidar com os transform: rotate e os position

#container {
  width: 600px;
  height: 400px;
  box-sizing: content-box;  
  padding: 20px;
  box-shadow: 0px 0px 10px black;
  border-radius: 10px;
  background: url('https://ak6.picdn.net/shutterstock/videos/5790803/thumb/1.jpg?i10c=img.resize(height:160)');
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;
}

.esfera {
  position: relative;
  top: 50%;
  left: 50%;
  width: 400px;  
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid silver;  
  transform: translate(-50%, -50%);
}

.menus {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transform: rotate(45deg);
  transform-origin: 50%;
}

.menu {
  position: relative;
  float: left;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  border: 2px solid silver;
  cursor: pointer;
}

.menu span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: 50%;
  color: white;
  font-size: 20px;
}

.menu .background {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 500ms linear;
}


.menu:hover .background {
  background-color: black;
}

.centro {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid silver;  
  background: url('https://image.freepik.com/free-vector/shiny-diamond-polygonal-background_23-2147614103.jpg');
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;
}
<div id="container">
  <div class="esfera">
    <div class="menus">
      <div id="menu1" class="menu">      
        <div class="background"></div>   
        <span>Products</span>
      </div>
      <div id="menu3" class="menu">      
        <div class="background"></div>  
        <span>Gallery</span>
      </div>
      <div id="menu2" class="menu">      
        <div class="background"></div>   
        <span>News</span>
      </div>
      <div id="menu4" class="menu">      
        <div class="background"></div>   
        <span>Downloads</span>
      </div>
      <div class="centro">

      </div>
    </div>
  </div>
</div>

1
  • Muito legal esse tipo de menu, o problema é quanto a responsividade, aí tem que trabalhar um pouco mais no codigo pra funcionar em telas menores. 23/06/2017 às 16:35
3

Uma das maneiras é usando pontos de acesso e mapas de imagem.

Um ponto de acesso pode ser uma forma ou um texto em um elemento gráfico que seja também um hiperlink. Quando um visitante do site clica na forma ou no texto, o destino do hiperlink é exibido em um navegador da Web. Os pontos de acesso podem ter a forma de retângulos, círculos ou polígonos.

Um elemento gráfico com um ou mais pontos de acesso chama-se. mapa de imagem. Image map (mapa da imagem) é uma extensão que permite que diferentes áreas de uma imagem sejam clicáveis. É uma lista de coordenadas associadas a uma imagem que associa a determinadas áreas da imagem links para vários destinos. Image map

1 - Imagens responsivas jQuery-rwdImageMaps

2 - Imagens não responsivas

2.1 Exemplo com links DEMO

<map name="FPMap0">
    <area target="_blank" href="https://pt.stackoverflow.com/unanswered/tagged/?tab=newest" shape="polygon" coords="114, 64, 133, 50, 153, 43, 178, 32, 205, 29, 228, 32, 255, 44, 275, 57, 288, 64, 239, 112, 227, 103, 204, 97, 189, 100, 173, 106, 166, 114" alt="Perguntas não respondidas">
    <area target="_blank" href="https://pt.meta.stackoverflow.com/questions/5483/manual-de-como-n%C3%83o-fazer-perguntas/5485#5485" shape="polygon" coords="286, 239, 236, 189, 249, 173, 253, 154, 252, 137, 247, 122, 241, 113, 289, 63, 305, 85, 313, 103, 319, 127, 322, 148, 320, 174, 315, 199, 304, 215">
    <area target="_blank" href="https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079" shape="polygon" coords="164, 189, 115, 237, 132, 250, 149, 261, 173, 270, 200, 272, 227, 271, 245, 264, 266, 254, 286, 241, 238, 191, 219, 201, 198, 205, 183, 202, 172, 194, 167, 188, 165, 185">
    <area target="_blank" href="http://www.globo.com/" shape="polygon" coords="164, 187, 152, 171, 148, 148, 156, 126, 165, 112, 114, 65, 100, 81, 92, 99, 84, 114, 80, 138, 82, 168, 90, 196, 102, 216, 111, 229, 116, 238">
    </map>
    <img border="0" src="https://i.stack.imgur.com/MvpVD.png" width="400" height="300" usemap="#FPMap0">

2.2 - Neste exemplo as áreas clicáveis são os olhos

<img src="https://i.stack.imgur.com/rHSnU.jpg" usemap="#Map" id='imagem' class="fixed-background" />
<map name="Map" id="Map">
	<area href="#" onClick="alert('Olho esquerdo');" shape="poly" coords="339,207,311,221,319,247,352,258,374,247,380,214,362,207" />
	<area href="#" onClick="alert('Olho direito');"  shape="poly" coords="369,305,327,320,325,350,338,382,357,383,384,369,395,343,389,314" />
</map>

Map support

Muito bem Sr. Leo Caracciolo, mas como é que eu vou saber colocar esses números todos ai para delimitar a área que eu quero para cada link?

0

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .