CODING

[CSS] :beforeと:afterでハンバーガーメニューを作る

投稿日:


どうも、べ〜やんです。

今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。





:beforeと:afterを使った方法


以前spanを使ったハンバーガーメニューの作り方も紹介しましたが、今回は:beforeと:afterを使ったハンバーガーメニューの作り方を紹介します。

またjQueryの指定については以前の記事を確認してください↓

[jQuery] jQueryでハンバーガーメニューを作る

今回紹介する:beforeと:afterで作る方法の方がHTMLの記述を減らせるので管理しやすいと思います。


作り方


<div class="icon"></div>

HTMLはこれだけです。

最初に2本目の棒を作ります。

.icon {
  width: 60px;
  height: 8px;
  color: #333;
  background: currentColor;
  position: relative;
  margin-top: 25px; 
}

2本目の棒なのでmargin-top: 25px;で高さに余裕を持たせています。

.icon:before {
  content: "";
  position: absolute;
  top: -15px;
  width:  100%;
  height: 100%;
  background: currentColor;
}

次は擬似要素:beforeを指定します。

position: absolute;top: -15px;で最初に作った棒の上に位置を指定します。

width: 100%;height: 100%;で先ほどと同じ大きさになります。

.icon:after {
  content: "";
  position: absolute;
  top: 15px;
  width:  100%;
  height: 100%;
  background: currentColor;
}

次は擬似要素:afterを指定します。

position: absolute;top: 15px;で最初に作った棒の下に位置を指定します。

See the Pen BaaMKvY by beeyan (@orientado) on CodePen.


おわりに


今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介しました。

今回はCSSの指定のみ紹介しましたので、jQueryの指定についてはこちらを確認してください↓

[jQuery] jQueryでハンバーガーメニューを作る



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

BEMを意識しよう

どうも、べ〜やんです。 今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。 HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。 BEM …

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …