スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる

CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。

3line-bar-intro.png

3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。

サンプルを用意していますのでご覧ください。

では、HTMLから説明します。

HTML

a要素がサークルで、span要素が3本線になります。

<a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a>

span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。

CSS

続いてCSSです。最初に全部載せて、後で個別に解説します。

#panel-btn{
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 20px 0 10px;
  border-radius: 50%;
  background: #fff;
}
#panel-btn:hover{
  background: #fafafa;
}
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #2196F3;
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #2196F3;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

では、サークル、アイコン、開いたときに分けて説明します。まずはリンクの部分。

サークル部分
#panel-btn{
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 20px 0 10px;
  border-radius: 50%;
  background: #fff;
}
#panel-btn:hover{
  background: #fafafa;
}

リンク部分は直径40pxのサークルにしています。次に解説するアイコンの配置の基準となるため、「position: relative;」を指定します。また、マウスを乗せたときに若干グレーになるようにしています。

アイコン部分

続いてアイコンの部分です。span要素本体で真ん中の線、before擬似要素で上の線、after擬似要素を下の線を表示しています。まずは真ん中の線から。

#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #2196F3;
  transition: .2s;
}

大きさは全て幅14px、高さ2pxです。細かい配置関係は文章だけだと分かりにくいので、上下の線と一緒に画像にしました。

3line-bar-description2.png

span要素の配置は親要素である直径40pxのサークルが基準になり、top: 50%;とleft50%の基準が太い点線になります。

top: 50%;とleft50%だけだと太い点線が交わるところがspan要素の左上になります。ですので、大きさの半分(上に1px、左に7px)をネガティブマージンで移動させて真ん中に配置されるようにします。

上下真ん中揃えは「top: 0; left: 0; right: 0; bottom: 0; margin: auto;」でもいいわけですが、今回は次に紹介する上下の線と同じマージンで調整する方法で指定しました。

次は擬似要素で表す上下の線です。

#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #2196F3;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}

大きさは当然span要素本体と同じです。配置の基準はspan要素となります。ですので、「left: 0」で3本の線が横にそろうことになります。

高さは先ほどの画像にあるようにマージンで調整します。上の線は-6px、下の線は4pxのマージンをとるようにします。

開いた場合
3line-bar-closs.png
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

クリックしたときにjQueryでクラス「close」を追加するようにして、3本線をバツにします。jQueryの仕組みは後で解説しますので、ここではその際のスタイルを解説します。

まず、span本体は背景をtransparentとすることで見えなくします。そして、擬似要素で表している上下の線のマージンを0にすることで、span本体である真ん中の線と同じ位置にします。そして、上下それぞれを回転させることでバツになります。

角度を変えることで回転量や回転の方向を変えることができますので、お好みで変えてみてください。

回転させないと上下の線が真ん中の線に重なってマイナスになります。それはそれでいいかもしれないです。

jQuery

クリックでパネルの開閉とクラスの取り外しをおこないます。jQueryを使えば簡単ですね。

$(function() {
  $("#panel-btn").click(function() {
    $("#panel").slideToggle(200);
    $("#panel-btn-icon").toggleClass("close");
    return false;
  });
});

「#panel-btn」をクリックする度に

  • 「#panel」がスライドして開く。
  • 「#panel-btn-icon」にクラス「close」が追加される。

と、

  • 「#panel」がスライドして閉じる。
  • 「#panel-btn-icon」にあるクラス「close」が取り除かれる。

が繰り返されます。

「#panel」はCSS「display: none;」を指定して、最初は表示しないようにしておく必要があります。

さいごに

ということで、3本線のメニューボタンを開閉にあわせて変化させてみました。

ご自分のサイトに合わせて大きさを変えられるよう、詳しく説明しましたのでお役に立てればうれしいです。

パネルの開閉方法については、他にも色々方法があると思いましますので、今後の記事にできればと思います。

最後に、先日作った「色がわかるWebギャラリーサイト samprary」もよろしくお願いします。

このサイトでは、今回紹介したボタンの線の太さを1pxにしています。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
とても参考になる記事をありがとうございました。

1点、擬似クラスについて。
CSS3におけるbefore, afterは、コロンが2つ必要ではないでしょうか。

::before
::after
【2015/01/08 15:13】 | ケイタ #- | [edit]
ケイタさま

コメントありがとうございます。

仰られるようにCSS3から擬似要素はタブルコロンとなっています。
ただ、ダブルコロンはIE8以下で対応していないこともあり
私は普段からシングルコロンにしています。

この辺りは以前記事にもしています。
「擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話」
http://weboook.blog22.fc2.com/blog-entry-370.html

現在の正しい書き方としてはダブルコロンになりますので、
ダブルコロンを使用したうえで、IE8は対応していないと
説明すべきだと思います。

ご指摘りがとうございました。
記事はあらためて修正加筆するようにします。
今後ともよろしくお願いします。
【2015/01/09 09:46】 | 管理人 #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。