Build circular menu in css

Question

Can someone give me some hint on how to build a simple menu, like this gif: https://i.stack.Imgur.com/Jkwr5.gif Or something. For a web page, I’ve tried a few ways, but lack knowledge.

Answer 1

I made this example below basing myself in this code. I believe I am very close to what you need. What you have to change is the 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>

Answer 2

One of the ways is by using access points and image maps.

An access point can be a form or text in a graphical element that is also a hyperlink. When a website visitor clicks on the form or text, the destination of the hyperlink is displayed in a web browser. Access points may be rectangular, circle or polygon shaped.

A graphical element with one or more access points is called. image map. Image map (image map) is an extension that allows different areas of an image to be clickable. It is a list of coordinates associated with an image that associates to certain areas of the image links to various destinations. Image map

1 - Responsive images jQuery-rwdImageMaps

2 - Non-responsive images

2.1 Example with links DEMO

<map name="FPMap0">
    <area target="_blank" href="/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>

All right, Mr. Leo Caracciolo, but how do I know to put these numbers all there to delimit the area I want for each link?

• Easy, use this tool online Easy Imagemap Generator

Answer 3

you can do it this way. The secret is to be able to deal with transform: rotate and the 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>