Manikiran Manikiran - 4 months ago 21
CSS Question

CSS Pie Slices Unable To Hover

I have recently been trying to work on css pie menu. Everything works fine, except the hover doesn't work if the slices are more than 9 parts. For clearer picture, visit demo.

The following is my html:

<div class="menu">
<div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>
<div class="menu-items">
<div class="menu-item">
<div class="menu-item-content active"><i class="fa fa-home"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-user"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-sliders"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-envelope"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-cog"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-archive"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-calendar"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-comments"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-suitcase"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-database"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-graduation-cap"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-newspaper-o"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-shopping-bag"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-send"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-support"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-question-circle-o"></i></div>
</div>
</div>


And this is my css:

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
html,
body {
color: #000;
}

.menu {
position: fixed;
left: -60px;
top: -60px;
z-index: 10;
width: 120px;
height: 120px;
border-radius: 50%;
border:0.01em solid #455A64;
background-color: #3F51B5;
cursor:pointer;
}

.menu .menu-btn {
position: absolute;
bottom: 30px;
right: 30px;
color:#fff;
font-size:20px;
transition:0.1s linear all;
}
.menu:hover .menu-btn{
font-size:24px;
right:28px;
bottom: 28px;
}

.menu-items {
position: fixed;
top: 100px;
left: 100px;
z-index: 9;
width: 200px;
height: 200px;
color:#fff;
background: transparent;
border-radius: 50%;
/*display:none;*/
}

.menu-item {
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 200px, 200px, 100px);
cursor:pointer;
}

.menu-item:nth-child(1) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-item:nth-child(2) {
-webkit-transform: rotate(112.5deg);
-moz-transform: rotate(112.5deg);
-o-transform: rotate(112.5deg);
transform: rotate(112.5deg);
}
.menu-item:nth-child(3) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu-item:nth-child(4) {
-webkit-transform: rotate(157.5deg);
-moz-transform: rotate(157.5deg);
-o-transform: rotate(157.5deg);
transform: rotate(157.5deg);
}
.menu-item:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.menu-item:nth-child(6) {
-webkit-transform: rotate(202.5deg);
-moz-transform: rotate(202.5deg);
-o-transform: rotate(202.5deg);
transform: rotate(202.5deg);
}
.menu-item:nth-child(7) {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu-item:nth-child(8) {
-webkit-transform: rotate(247.5deg);
-moz-transform: rotate(247.5deg);
-o-transform: rotate(247.5deg);
transform: rotate(247.5deg);
}
.menu-item:nth-child(9) {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.menu-item:nth-child(10) {
-webkit-transform: rotate(292.5deg);
-moz-transform: rotate(292.5deg);
-o-transform: rotate(292.5deg);
transform: rotate(292.5deg);
}
.menu-item:nth-child(11) {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
.menu-item:nth-child(12) {
-webkit-transform: rotate(337.5deg);
-moz-transform: rotate(337.5deg);
-o-transform: rotate(337.5deg);
transform: rotate(337.5deg);
}
.menu-item:nth-child(13) {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.menu-item:nth-child(14) {
-webkit-transform: rotate(382.5deg);
-moz-transform: rotate(382.5deg);
-o-transform: rotate(382.5deg);
transform: rotate(382.5deg);
}
.menu-item:nth-child(15) {
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-o-transform: rotate(405deg);
transform: rotate(405deg);
}
.menu-item:nth-child(16) {
-webkit-transform: rotate(427.5deg);
-moz-transform: rotate(427.5deg);
-o-transform: rotate(427.5deg);
transform: rotate(427.5deg);
}
.menu-item-content {
position: absolute;
width: 200px;
height: 200px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 100px, 200px, 0px);
background-color: #1b458b;
-webkit-transform: rotate(22.5deg);
-moz-transform: rotate(22.5deg);
-o-transform: rotate(22.5deg);
transform: rotate(22.5deg);
}
.menu-item .menu-item-content i{
position:absolute;
top:12px;
left:77px;
font-size: 16px;
transform: rotate(180deg);
}

.menu-item .menu-item-content:hover, .menu-item .active {
background-color : #1976D2 !important;
}


If possible, there is another problem. If you can observe in the demo, after every 4 parts the border is missing. Please help me with these problems.

Answer

Change the menu-item class to

.menu-item {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0px;
    top: 0px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    clip: rect(0px, 138px, 100px, 100px);
    cursor: pointer;
}

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
html,
body {
  color: #000;
}

.menu {
  position: fixed;
  left: -60px;
  top: -60px;
  z-index: 10;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 0.01em solid #455A64;
  background-color: #3F51B5;
  cursor: pointer;
}

.menu .menu-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  color: #fff;
  font-size: 20px;
  transition: 0.1s linear all;
}

.menu:hover .menu-btn {
  font-size: 24px;
  right: 28px;
  bottom: 28px;
}

.menu-items {
  position: fixed;
  top: 100px;
  left: 100px;
  z-index: 9;
  width: 200px;
  height: 200px;
  color: #fff;
  background: transparent;
  border-radius: 50%;
  /*display:none;*/
}

.menu-item {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 0px;
  top: 0px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  clip: rect(0px, 138px, 100px, 100px);
  cursor: pointer;
}

.menu-item:nth-child(1) {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.menu-item:nth-child(2) {
  -webkit-transform: rotate(112.5deg);
  -moz-transform: rotate(112.5deg);
  -o-transform: rotate(112.5deg);
  transform: rotate(112.5deg);
}

.menu-item:nth-child(3) {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.menu-item:nth-child(4) {
  -webkit-transform: rotate(157.5deg);
  -moz-transform: rotate(157.5deg);
  -o-transform: rotate(157.5deg);
  transform: rotate(157.5deg);
}

.menu-item:nth-child(5) {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.menu-item:nth-child(6) {
  -webkit-transform: rotate(202.5deg);
  -moz-transform: rotate(202.5deg);
  -o-transform: rotate(202.5deg);
  transform: rotate(202.5deg);
}

.menu-item:nth-child(7) {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}

.menu-item:nth-child(8) {
  -webkit-transform: rotate(247.5deg);
  -moz-transform: rotate(247.5deg);
  -o-transform: rotate(247.5deg);
  transform: rotate(247.5deg);
}

.menu-item:nth-child(9) {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.menu-item:nth-child(10) {
  -webkit-transform: rotate(292.5deg);
  -moz-transform: rotate(292.5deg);
  -o-transform: rotate(292.5deg);
  transform: rotate(292.5deg);
}

.menu-item:nth-child(11) {
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
}

.menu-item:nth-child(12) {
  -webkit-transform: rotate(337.5deg);
  -moz-transform: rotate(337.5deg);
  -o-transform: rotate(337.5deg);
  transform: rotate(337.5deg);
}

.menu-item:nth-child(13) {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

.menu-item:nth-child(14) {
  -webkit-transform: rotate(382.5deg);
  -moz-transform: rotate(382.5deg);
  -o-transform: rotate(382.5deg);
  transform: rotate(382.5deg);
}

.menu-item:nth-child(15) {
  -webkit-transform: rotate(405deg);
  -moz-transform: rotate(405deg);
  -o-transform: rotate(405deg);
  transform: rotate(405deg);
}

.menu-item:nth-child(16) {
  -webkit-transform: rotate(427.5deg);
  -moz-transform: rotate(427.5deg);
  -o-transform: rotate(427.5deg);
  transform: rotate(427.5deg);
}

.menu-item-content {
  position: absolute;
  width: 200px;
  height: 200px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  clip: rect(0px, 100px, 200px, 0px);
  background-color: #1b458b;
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  -o-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}

.menu-item .menu-item-content i {
  position: absolute;
  top: 12px;
  left: 77px;
  font-size: 16px;
  transform: rotate(180deg);
}

.menu-item .menu-item-content:hover,
.menu-item .active {
  background-color: #1976D2 !important;
}
<div class="menu">
  <div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>
<div class="menu-items">
  <div class="menu-item">
    <div class="menu-item-content active"><i class="fa fa-home"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-user"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-sliders"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-envelope"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-cog"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-archive"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-calendar"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-comments"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-suitcase"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-database"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-graduation-cap"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-newspaper-o"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-shopping-bag"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-send"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-support"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-question-circle-o"></i></div>
  </div>
</div>