シンプルなサークルナビゲーションを作る

サークルナビゲーション

今回は、簡単なサークルナビゲーションを作ってみます。サークルナビゲーションは、ナビゲーションが円形に配置されたものです。iPodの円形コントローラみたいなデザインです。Webデザインとしてよくあるパターンしては画面の下に固定されているボタンを押すと、隠れていたメニューボタンが円形に広がるものです。

別にメニューが隠れていなくて、最初からメニューが画面下部に半円上に配置されているナビゲーションもあります。今回は、ナビゲーション用のボタンが円形に広がるパターンを作ってみたいと思います。

この画面の右側にある+ボタンを押すと、メニューが広がります。ボタンのアイコンについては意味はないです。適当なFontAwesomeアイコンを並べただけです。

HTML

HTMLは以下のとおりです。広がるメニューをulタグと固定ボタンです。

CSS

CSSは少し面倒です。まずは全文のせます。

CSSのポイントは、

  • ナビゲーションの配置
  • メニューボタンを固定ボタンと同じ位置に配置
  • メニューボタンのアニメーション

です。上記のCSSのうち、ボタンの見た目のCSS以外について説明します。

これはナビゲーションの配置です。一番外側のnavタグで位置を調整します。実際はfixedなどで固定にします。

これは固定ボタンの位置です。navタグが基準になるので好きな位置に配置してください。「z-index」は必須です。コンテンツより高くしてください。

メニューボタンを固定ボタンと同じ位置に配置します。「position: absolute;」は必須です。

メニューボタンのアニメーションの始点はこのCSSですので、transitionを定義します。

各メニューボタンのアニメーションの終点です。今回はjQueryで「open」というCSSクラスを切り替えてアニメーションさせます。今回は6つのボタンを半円状に展開します。それぞれ展開する位置が異なるため、メニューごとに定義します。

「translate(0, -75px)」は、要素の表示位置を移動させる際に使用します。各メニューボタンの表示位置を定義します。ただ、面倒なのは、メニューボタンを綺麗に円状に並べるための表示位置の計算です。

メニューボタンを円状に並べるための表示位置の計算方法

今回は、固定ボタンを中心に半円状にメニューを配置します。以下の図のように、固定ボタンを原点とした円を考えます。その円周上の点Pの座標(x, y)が「translate(x, y)」に記述する数値となります。

i320

x,yの計算式は以下となります。

rは円の半径です。今回の例でいうと、固定ボタンから75px離れた位置に配置するので、r=75です。

Θは角度です。今回は円の右半分に均等に6個配置したいので、y軸上の上側から反時計回りに36度ごとに点Pを配置すると考えます。その位置を、x軸の右側の線を0度として、点pまでの角度を求めます。たとえば最初の点はy軸上の上側に配置したいので、x軸の右側の線からは90度となる。つまり最初の点の座標は(x, y) ⇒ (75*cos90, 75*sin90) ⇒ (75*0, 75*1) ⇒ (0, 75)となります。

ここで気を付けるのは、HTMLのy座標は画面の一番上が0であるということです。つまり、画面の中間にある固定ボタンの位置からすると、(0, 75)の位置は、(0, -75)とyだけマイナスとプラスが反転します。最終的に、最初のメニューボタンの表示位置は、(0, -75px)となります。cosやsinの計算は電卓アプリやExcelなどで行ってください。この計算をまとめると、以下のようになります。

これをすべての点について計算すれば、メニューボタンの表示位置の定義が終わります。

javascript

javascriptは簡単です。固定ボタンがクリックされたら、toggleClassでopenクラスを切り替えるだけです。

これでサークルナビゲーションの説明を終わります。表示位置の計算は面倒ですが、円上に配置されているナビゲーションはスマホの片手操作など、使える場面も多そうですし、アニメーションを工夫すればかなりカッコよくなります。CSSアニメーションは当分必須の技術になりそうです。


広告
  • LINEで送る