圓形菜單與動畫/轉換的垂直切換

我想實現一個按鈕將從其當前位置移動到頂部的動畫，我在這裏創建了一個示例，它不完全是我正在尋找的，而是它只是已經淡入/淡出。圓形菜單與動畫/轉換的垂直切換

這裏是JSFiddle的工作例子，我想要展示的是當任何一個圓形導航項被點擊時，所有的導航都會從中心頂部移動到頂部，所以用戶可以理解當前菜單已經從中心轉移到頂部

下面是代碼我有嘗試至今

編輯：當按下圓形菜單，然後在頂部菜單將出現，循環將隱藏，但它應該這樣過渡效果移動中心到頂部。

HTML

<div class="header noDisplay"> 
<div class="logo">&nbsp;</div> 
<div class="nav"> 
    <ul> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
</ul> 
</div> 
</div> 
<div class="selector"> 
<ul> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
</ul> 
</div>

CSS

body{padding:0; margin:0;} 
.selector {position: absolute; left: 50%; top: 50%; width: 450px; height: 450px; margin-top: -225px; margin-left: -225px;} 
.selector ul {position: absolute; list-style: none; padding: 0; margin: 0; top: 50px; right: 50px; bottom: 50px; left: 50px;} 
.selector li {position: absolute; width: 0; height: 100%; margin: 0 50%; -webkit-transform: rotate(-360deg); transition: all 0.8s ease-in-out;} 
.selector li span {position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; line-height: 1px; margin-left: 0; background: #fff; border-radius: 50%; text-align: center; font-size: 1px; overflow: hidden; cursor: pointer; box-shadow: none; transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;} 
.selector li span:hover { background: #fff; } 
.selector.open li span {width: 150px; height: 150px; line-height: 150px; margin-left: -75px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); border:1px solid #b1b1b1; font-size: 14px; 
} 
.noDisplay{display:none;} 
.selector.open li span:hover{background:#fff;} 
.circle-bg{background:#f4f4f4; border-radius:50%;} 
.selector li span > i{display:block; position:absolute; top:0; padding:60px 0 0 0; background:#fff; color:#000; width:100%; font-size:24px; font-weight:bold; line-height:normal; height:100%;} 
.header{float:left; width:100%; padding:5px 0 0 3%; height:75px; box-sizing:border-box; box-shadow:0 0 5px rgba(0, 0, 0, 0.5);} 
.header > .logo{float:left; width:auto;} 
.header > .nav{float:right; width:75%;} 
.header > .nav > ul{list-style:none; margin:0; padding:0; text-align:right;} 
.header > .nav > ul > li{list-style:none; display:inline-block;} 
.header > .nav > ul > li > a {color: #231f1f; display: block; padding: 23px 0; margin:0 15px; font-size: 14px; text-transform: uppercase; text-decoration: none; font-family: Arial; border-bottom:2px solid #fff;} 
.header > .nav > ul > li > a:hover{border-bottom:2px solid #771421; color:#771421;}

來源

2016-07-15 Sanjeev Kumar

很難理解你想在這裏實現什麼。 –

當你點擊圓形菜單項，其它菜單將出現在頂部和圈將隱藏，它會顯示從圓形菜單項移動到頂部。希望其明確 –

這是你想要的嗎？

JSFIDDLE

$(".selector > ul > li > span").click(function(){ 
    $(".logo-onload").fadeOut("slow"); 
    $(".selector").css({"margin-top": "-2000px", "transition": "all 2s ease"}); 
    $(".header").fadeIn("slow"); 

})

來源

2016-07-15 08:41:33

感謝您的回答@Nirmalya但實際上我想移動從中心效果標題菜單不圓菜單的頂部。 –

我無法理解你的意思。你能解釋一下嗎？ –

在點擊圓形菜單隱藏和標題將出現在頂部，只是要表明的過渡（過渡該用戶將看到從中央位置到頂部區域移動），目前的頭球攻門稍稍出現在效果褪色，相反，我想首先在中心菜單中淡入，然後移到頂端。希望它清楚 –

圓形菜單與動畫/轉換的垂直切換

回答

相關問題