2017-01-10 109 views
4

我正在嘗試爲移動應用程序實現Hexagon菜單。最終的結果是Responsive Hexagon Menu

Hexagon Menu

我的嘗試是在JSFiddle

我面對現在的問題是:

  1. 如何使六角菜單響應,使其始終定位在其上加載的應用程序在屏幕的中心?
  2. 一旦用戶點擊按鈕,我想要將菜單激活按鈕(參考jsfiddle中的id='menucirclebutton')移動到六邊形菜單的中心。現在,我添加了一個類menu-button-move。不管屏幕大小如何使菜單激活按鈕位於六邊形菜單的中心?
  3. 如何實現在激活時與菜單按鈕一起縮放的六邊形輪廓?
+1

+在你的問題標籤上的角度可能會有所幫助 – Nate

+0

當使用svg完成時,這會更有效嗎? –

+0

@JohnKeates是的!它會更有效率,但我不知道如何使用SVG完成此任務。 – osajid

回答

0

爲中心頁面上的菜單,請參閱:https://css-tricks.com/centering-css-complete-guide/

對於六邊形菜單,這裏是一個方法,我在想:

  1. 中心所有菜單項。 position: absolute
  2. transform: translate每個項目都相對於中心。
  3. 對於輪廓,請爲每個項目創建一個僞元素,rotate並相應地設置transform-origin