[英]jQuery circle menu navigation creating tiny circle after toggle close
當我單擊主圓時,周圍的5個圓將完全最小化(至100%隱藏),但這些圓並未完全最小化。 最小化后,主圓上有一個小圓。 切換關閉后如何完全最小化(隱藏)主圓上的小圓。
我嘗試了jQuery hide,但是它隱藏了整個元素,
下面是jQuery代碼,
var nbOptions = 8;
var angleStart = -360;
// jquery rotate animation
function rotate(li,d) {
$({d:angleStart}).animate({d:d}, {
step: function(now) {
$(li)
.css({ transform: 'rotate('+now+'deg)' })
.find('label')
.css({ transform: 'rotate('+(-now)+'deg)' });
}, duration: 0
});
}
// show / hide the options
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
for(var i=0; i<li.length; i++) {
var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
$(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
}
}
$('.selector button').click(function(e) {
toggleOptions($(this).parent());
});
setTimeout(function() { toggleOptions('.selector'); }, 100);
看起來問題出在CSS .selector li input + label
規則中。 在此規則中,您仍然具有一些padding
和border
寬度,這使圓具有一定的大小。 將這兩個值更改為0,它們應該完全隱藏:
.selector li input + label {
position: absolute;
left: 50%;
bottom: 120%;
width: 0;
height: 0;
margin-left: 0;
background: #fff;
border-radius: 50%;
text-align: center;
overflow: hidden;
cursor: pointer;
border:0 solid #999; /* previously 1px */
padding:0; /* previously 6px */
background:#eee;
transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}
更新:由於需要padding
和border
,因此您可以調整規則集以在菜單圓具有open
類時具有這些值,並在不存在類時將其刪除
您確實需要刪除.selector.open li input + label
內的border
和內padding
但是您可以使用另一個類來打開和關閉。
.open1 {
padding: 6px;
border:1px solid #999;
}
添加此JS:
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
li.find("label").toggleClass("open1"); // NEW
...
}
小提琴: http : //jsfiddle.net/adzFe/2576/
我同意,小圓圈是由錯誤的課堂上的額外填充引起的,我已經將填充移到了selecter.open上。 現在它沒有顯示任何迷你圓圈。
.selector li input + label {
position: absolute;
left: 50%;
bottom: 120%;
width: 0;
height: 0;
margin-left: 0;
background: #fff;
border-radius: 50%;
text-align: center;
overflow: hidden;
cursor: pointer;
background:#eee;
transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}
.selector li input + label img {
border-radius:50%;
}
.selector.open li input + label {
width: 90px;
height: 90px;
margin-left: -40px;
padding:6px;
border:1px solid #999;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
.selector.open li input + label:hover {
border:1px solid #fff;
padding:6px;
background:#fff;
}
.mainimage{
width:100%;
height:100%;
border-radius:50%;
}
工作代碼
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.