スマホサイトで最近よく見るハンバーガーボタン。
当サイトでも上の画像のようにスマホで見た時には右上にハンバーガーボタンを設置しており、それを押すとメニューが出るようにしています。
このハンバーガーボタン、タップした時に「≡」から「×」になるようなデザインを実装しているところを見たことがある方もいらっしゃるのではないでしょうか。
ちなみに当サイトでもハンバーガーボタンを押すと「×」になるよう設定をしています。
そこで今回は、タップしたらデザインが変わるハンバーガーボタンをいくつか紹介したいと思います！
目次
まずデフォルトのハンバーガーボタンを作成する
まず、デフォルトのハンバーガーボタンを作成しましょう。
見本としては以下になります。
このようなハンバーガーボタンを設置するには、以下のHTMLとCSSを設定することで可能になります。
【HTML】
<a class="menu-btn"> <span></span> <span></span> <span></span> </a>
【CSS】
.menu-btn,
.menu-btn span {
box-sizing: border-box;
display: inline-block;
transition: all .4s;
}
.menu-btn {
display: block;
height: 36px;
margin: 0 auto;
position: relative;
width: 40px;
}
.menu-btn span {
background: #000;
box-sizing: border-box;
left: 0;
height: 4px;
position: absolute;
width: 100%;
}
.menu-btn span:nth-of-type(1) {
top: 0;
}
.menu-btn span:nth-of-type(2) {
top: 16px;
}
.menu-btn span:nth-of-type(3) {
bottom: 0;
}
このように設定することで、上の見本のようなハンバーガーボタンを作成することができます！
ちなみにaタグに設定するclass名は、今回は仮でmenu-btnとしていますが、あくまで仮のものなので、実際に作成する場合は各々でclass名を設定していただき、その設定したclass名に対してCSSを設定していただけたらと思います。
タップしたらデザインが変わるようにするには、タップした時に新たなclassが追加されるようjQueryを記述する
では実際にタップしたらデザインが変わるようにするにはどうすればよいのか。
それは、タップした時に新たなclassが追加されるようjQueryを設定してあげて、その追加されたclassに対してCSSを設定する…という方法がシンプルとなっています。
そこで今回は試しに、ハンバーガーボタンをタップした時に”active”というclassが追加されるよう、以下のようにjQueryを設定しました。
<script>
$(function (){
$(".menu-btn").click(
function(){
$(this).toggleClass("active");
}
);
});
</script>このようにjQueryを記述することで、class名menu-btnがクリック(タップ)された時に、新たにclass名activeを追記しますよ、という設定がなされます。
では、以上の基礎を踏まえた上で次項からタップしたらデザインが変わるハンバーガーボタンについて書いていきたいと思います！
タップしたら3本のラインが1つになって×になる
まず初めに、タップしたら3本のラインが1つになって×になるハンバーガーボタンの設置方法について。
見本は以下になります。
こちらは、以下のようにCSSを設定することで設置することができます！
.menu-btn span:nth-of-type(1) {
animation: menu-bar01 .75s forwards;
-webkit-animation: menu-bar01 .75s forwards;
}
@-webkit-keyframes menu-bar01 {
0% {
-webkit-transform: translateY(20px) rotate(45deg);
}
50% {
-webkit-transform: translateY(20px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
}
}
@keyframes menu-bar01 {
0% {
transform: translateY(20px) rotate(45deg);
}
50% {
transform: translateY(20px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
.menu-btn span:nth-of-type(2) {
opacity: 1;
transition: all .25s .25s;
}
.menu-btn span:nth-of-type(3) {
-webkit-animation: menu-bar02 .75s forwards;
animation: menu-bar02 .75s forwards;
}
@-webkit-keyframes menu-bar02 {
0% {
-webkit-transform: translateY(-20px) rotate(-45deg);
}
50% {
-webkit-transform: translateY(-20px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
}
}
@keyframes menu-bar02 {
0% {
transform: translateY(-20px) rotate(-45deg);
}
50% {
transform: translateY(-20px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
.menu-btn.active span:nth-of-type(1) {
-webkit-animation: active-menu-bar01 .75s forwards;
animation: active-menu-bar01 .75s forwards;
}
@-webkit-keyframes active-menu-bar01 {
0% {
-webkit-transform: translateY(0) rotate(0);
}
50% {
-webkit-transform: translateY(20px) rotate(0);
}
100% {
-webkit-transform: translateY(20px) rotate(45deg);
}
}
@keyframes active-menu-bar01 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(20px) rotate(0);
}
100% {
transform: translateY(20px) rotate(45deg);
}
}
.menu-btn.active span:nth-of-type(2) {
opacity: 0;
}
.menu-btn.active span:nth-of-type(3) {
-webkit-animation: active-menu-bar03 .75s forwards;
animation: active-menu-bar03 .75s forwards;
}
@-webkit-keyframes active-menu-bar03 {
0% {
-webkit-transform: translateY(0) rotate(0);
}
50% {
-webkit-transform: translateY(-20px) rotate(0);
}
100% {
-webkit-transform: translateY(-20px) rotate(-45deg);
}
}
@keyframes active-menu-bar03 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-20px) rotate(0);
}
100% {
transform: translateY(-20px) rotate(-45deg);
}
}
ちなみに64行目からは、ハンバーガーボタンをタップした時(＝class名actが追加された時)の動作を設定しています。
タップしたら中央のラインが消え、上下のラインで「×」になる
続いて、タップしたら中央のラインが消えて、上下のラインで「×」になるようなハンバーガーボタンの作成方法をご紹介します！
見本は以下になります。
こちらは、以下のようにCSSを設定することで設置することができます！
.menu-btn.active span:nth-of-type(1) {
transform: translateY(20px) rotate(-45deg);
-webkit-transform: translateY(20px) rotate(-45deg);
}
.menu-btn.active span:nth-of-type(2) {
opacity: 0;
}
.menu-btn.active span:nth-of-type(3) {
transform: translateY(-20px) rotate(45deg);
-webkit-transform: translateY(-20px) rotate(45deg);
}
タップしたら中央のラインが消えて、上下のラインが回転しながら「×」になる
次は、タップしたら中央のラインが消えて、上下のラインが回転しながら「×」になるCSSの設定方法です！
見本はこちら。
このハンバーガーボタンは、以下のようにCSSを設定することで実装することが可能です！
.menu-btn.active span:nth-of-type(1) {
transform: translateY(20px) rotate(-315deg);
top: -8px;
-webkit-transform: translateY(20px) rotate(-315deg);
}
.menu-btn.active span:nth-of-type(2) {
opacity: 0;
}
.menu-btn.active span:nth-of-type(3) {
transform: translateY(-20px) rotate(315deg);
-webkit-transform: translateY(-20px) rotate(315deg);
}
タップしたら、3本のラインが回転して「↑」になる
続いてはちょっと変化球で、タップしたら3本のラインが回転して「↑」になるハンバーガーボタンを紹介したいと思います！
見本は以下になります。
このようなハンバーガーボタンは、以下のようにCSSを設定することで実装可能となります！
.menu-btn.active span:nth-of-type(1),
.menu-btn.active span:nth-of-type(3) {
width: 20px;
}
.menu-btn.active span:nth-of-type(1) {
transform: translate(4px,0px) rotate(-45deg);
-webkit-transform: translate(-1px,13px) rotate(-45deg);
}
.menu-btn.active span:nth-of-type(2) {
transform: rotate(90deg);
}
.menu-btn.active span:nth-of-type(3) {
transform: translate(16px,-32px) rotate(45deg);
-webkit-transform: translate(-1px,-13px) rotate(45deg);
}
まとめ
以上が、ハンバーガーボタンをタップした時に変わるデザインの例です。
その他にも、いくつもデザインは設定することが可能ではありますが、このようにハンバーガーボタンをタップした時にアニメーションでデザインが変わると見た目的にも面白いと思うので、ぜひとも実装してみてはいかがでしょうか？？
