Build circular menu in css [closed]

Question

Build circular menu in css [closed]

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (3 votes)

2

Anyone know how to give me some tips on how to build a simple menu, such as gif: link Or similar. For a web page, I've tried it in some ways, but it lacks knowledge.

javascript css menu

asked by anonymous 23.06.2017 / 08:16

3 answers

4

I made this example below based on in this code . I believe I'm very close to what you need. What will have to change is menu 5 to have a background image and not color.

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>

23.06.2017 / 13:44

3

One way is by using access points and image maps.

An access point can be a shape or text in a graphic that is also a hyperlink. When a site visitor clicks on the form or text, the hyperlink destination is displayed in a web browser. Access points can take the form of rectangles, circles, or polygons.

A graphic with one or more access points is called. image map . Image map is an extension that allows different areas of an image to be clickable. This is a list of coordinates associated with an image that associates certain areas of image links to multiple destinations. Image map

1 - Responsive Images jQuery-rwdImageMaps

2 - Nonresponsive images

2.1 Example with links DEMO p>

<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 - In this example the clickable areas are the eyes

<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>

Verywell,Mr.LeoCaracciolo,buthowwillIknowtoputthosenumbersalltheretodelimittheareaIwantforeachlink?

Easy,usethisonlinetool Easy Imagemap Generator

23.06.2017 / 12:51

Function explode () in a vector Read line txt and include ";"

score 3 · Accepted Answer

you can do as follows. The key is to be able to deal with transform: rotate and 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>