CSS Кусочки плиты Невозможно навести

Я недавно пытался работать над меню css pie. Все работает нормально, кроме зависание не работает, если ломтики более 9 частей. Для более четкого изображения посетите demo.CSS Кусочки плиты Невозможно навести

Ниже мой 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>

И это мой 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; 
}

Если возможно, есть еще одна проблема. Если вы можете наблюдать в демо, после каждых 4 частей граница отсутствует. Пожалуйста, помогите мне с этими проблемами.

источник

2016-07-20 Manikiran

парения не работает, потому что вы используете 200x200px квадраты, и они перекрываются друг на друга таким образом, нижние из них являются под верхними. –

Этот вид дизайна кричит о SVG. –

@IvanKovachev Какие-либо предложения по его исправлению? – Manikiran

Изменение menu-item класс

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

источник

2016-07-22 11:00:43

Спасибо, в конце концов работает :) Но можете ли вы помочь мне с проблема границы тоже? – Manikiran

Принял меня почти полтора часа, чтобы добраться до решения. В чем проблема с границами? –

Если это сработало для вас, то отметьте как принято, а где моя щедрость @ Manikiran? –

CSS Кусочки плиты Невозможно навести

ответ

Смежные вопросы