ボタンのアニメーションがきもちい!スマホ用ハンバーガーメニューの作り方 | Garney.Web

ボタンのアニメーションがきもちい!スマホ用ハンバーガーメニューの作り方

スポンサーリンク

20151221_1

スマホ用のハンバーガーメニューについて書いておこうと思うよ。

さてそのスマホ用スライドダウンメニューがこちら。

CodePenにコードを載せましたので、大きな画面で見たい方は良かったらどうぞ
CodePenについては、「Dreamweaverのスニペットが微妙過ぎるので代わりにCodePenを使用してみた。これは良いかもしれない!
に書きましたよ。

スマホ用ハンバーガーメニューの使用方法

このハンバーガーメニューは利用環境によっては、ただコピペするだけでは使えないかも知れません。すまん。

またheaderタグを使用しているので、「HTML5は使用不可」な方は各々headerタグをdiv class=”header”に修正してください。
それと、既にheaderタグを仕様されてる方は、headerタグ内をコピペして使って欲しい。

基本はこのソースコードのコピーで問題ありません。
サイトトップの上部にあるメニュー部分に、タグを挿入すると良いかと思いますねー。

既にヘッダーメニューがあるのであれば、そこのソースを書き換える必要があります。
なので全く分からん!けど試しにやってみたい人はソースのバックアップをオススメします。

アニメーションはCSSに全て記述しました

このコードはハンバーガーメニューのコードなんだけど、とは言え一番見せたい部分はボタンの3本線がバツ印になるまでのアニメーション部分なんよね

ハンバーガーメニューの開閉部分については適当にJSでっていうかJquery書いてあります。
CSSでも出来るんだろうけど、CSS3を使わないとメニューとして機能しないので止めました。
IE9とかちょっと古いブラウザでの動作が不安定になりそうだし。

けっしてCSS3での作り方が分からなかった訳ではない(分からなかった。)

ボタンの三本線からバツ印のアニメーションは

<br />
header .navIcon span{<br />
    transition: all cubic-bezier(.13,.58,0,1.04) .5s;<br />
}</p>
<p>header .navIcon.open span{<br />
    background: transparent;<br />
}</p>
<p>header .navIcon span:before,<br />
header .navIcon span:after{<br />
    transition:all cubic-bezier(.13,.58,0,1.04) .5s;<br />
}</p>
<p>header .navIcon.open span:before{<br />
    top: 0px;<br />
    border-color: #FFF;<br />
    -webkit-transform: rotate(225deg);<br />
    -moz-transform: rotate(225deg);<br />
    -ms-transform: rotate(225deg);<br />
    -o-transform: rotate(225deg);<br />
    transform: rotate(225deg);<br />
}</p>
<p>header .navIcon.open span:after{<br />
    top: 0px;<br />
    border-color: #FFF;<br />
    -webkit-transform: rotate(-225deg);<br />
    -moz-transform: rotate(-225deg);<br />
    -ms-transform: rotate(-225deg);<br />
    -o-transform: rotate(-225deg);<br />
    transform: rotate(-225deg);<br />
}<br />

この部分ね。
header .navIcon spanとheader .navIcon span:before,header .navIcon span:afterに対してtransitionを設定し、クリックされたらnavIconに対してopenクラスを付けています。
この変化に対してtransitionが作用する感じ。
ちなみにopenクラスを付けるのはJS側でやってますです。

この部分で三本線からバツ印にスムーズにスラーっとそして滑らかにきもちよくアニメーションが動くのだ!。

ボタン部分の埋め込みについて

さて、肝心のボタンは

</p>
<p>&lt;div class=&quot;navIcon&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;</p>
<p>

HTMLでマークアップしている。これが無いとボタンが描画されないので、必ず必要ですよ。

JS側でページの読み込み持にボタン部分のHTMLをappendするのでも良かったのだけど、なんか普通にマークアップしています。
特に理由はないです。appendしたい人はJS弄くってください。
以下appendさせる方法です。

<br />
$(window).on(&quot;load&quot;,function(){<br />
    var add = $(&quot;header container&quot;);<br />
    var html = &quot;</p>
<p>&lt;div class='navIcon'&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;</p>
<p>&quot;<br />
    add.append(html);<br />
});<br />

適当にザーッと書いたけど、多分こんな感じで行けるんじゃなかろうか。
実環境で動くかどうかは確認していないけど。ロードでappendしたらいいじゃんって人は自分で書けそうなもんなので、こんな感じで適当でいいよね。

append?訳わからんな人はJSコピペでOK!。だけど別にわざわざする必要もないと思う。
空っぽのHTMLが少しだけ減るだけですから。

スライドダウン部分のJSについて

ここはこの記事では脇役部分なので、適当に書いておきます。
JS自体はすっごい簡単。ただ単にボタンをクリックしたら消えていたメニューを見えるようになって、スライドダウンするだけ。
そしてもう一回押したらスライドアップして見えなくなります。

<br />
var mc = $(&quot;header .head-nav&quot;);<br />

今思えばこの部分をなんでclickイベントの中に書いたんだろうか。外でいいやんね。
分かる人は外にでも出しといてくれて良いです。

一応スライドダウンやスライドアップ時のアニメーション中に連続でクリックされて、ぐちゃぐちゃにならないように、バグが出ない様にはしといた。

スライドダウンしたら、flagにflaseを代入し、if分でfalseかtrueかを判定しています。

スライドダウンをするとメニューが開いたことになり、flagにtrueを代入する。これでスライドダウン中にもう一度クリックしても値がtrueになっているのでスライドダウンできないといった具合ですね。

flagがtrueの状態でボタンをクリックすると、今度はif文の判定によりスライドアップします。このときにflagにfalseの値を代入することで、今度は逆にスライドアップ中にボタンを連続してクリックしたとしても判定によって連続でスライドアップすることもありません。

強いて書くならこれくらい。後はただ単にslideUp()とslideDown()でアニメーションしているだけです。

すこ~しだけHTMLとCSSとJSの知識が必要かも知れないけど、もし使いたいって人はどうぞ使ってください。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法