サークル(円形)ナビゲーションメニューを作る

サークル(円形)ナビゲーションメニューを作る

※この記事は2016年6月10日に書かれたもので、内容が古い可能性がありますのでご注意ください。

Circular Fly-Out Navigation Menuの作り方

Circular Fly-Out Navigation MenuのBlogを参考にさせていただいてサークルをClick(Tap)すると「ぴょっこり」飛び出すサークルナビゲーションメニューを作ったので覚えがき。
Demo

circleMenu.min.jsを使ったサークルメニュー画像
Click(Tap)すると

circleMenu.min.jsを使ったサークルナビゲーションメニュー画像「Click(Tap)時」

メニューリスト(ul)でHTMLを追加します。

HTML

<div id="c-circle-nav" class="c-circle-nav">
  	  <button id="c-circle-nav__toggle" class="c-circle-nav__toggle">
  		<span>Toggle</span>
  	  </button>
  	  <ul class="c-circle-nav__items">
  		<li class="c-circle-nav__item">
  		  <a href="#" class="c-circle-nav__link">
  			<center><img src="images/House.png"></center>
  		  </a>
  		</li>
  		<li class="c-circle-nav__item">
  		  <a href="#" class="c-circle-nav__link">
  			<center><img src="images/Facebook.png"></center>
  		  </a>
  		</li>
  		<li class="c-circle-nav__item">
  		  <a href="#" class="c-circle-nav__link">
  			<center><img src="images/Pinterest.png"></center>
  		  </a>
  		</li>
  		<li class="c-circle-nav__item">
  		  <a href="#" class="c-circle-nav__link">
  			<center><img src="images/Twitter.png"></center>
  		  </a>
  		</li>
  		<li class="c-circle-nav__item">
  		  <a href="#" class="c-circle-nav__link">
  			<center><img src="images/Google.png"></center>
  		  </a>
  		</li>
  	  </ul>
  	</div>

レスポンシブでも対応できるように下記のようなCSSを記述しました。

CSS

js(jQuery)

「jquery.js」と外部ファイルとして「circleMenu.js」を記述します。

「circleMenu.js」の内容は下記のようになっています。

これで、レスポンシブで使えるサークルメニューができました。

以上、今日の覚えがき。