NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

div要素ひとつだけでメニューボタンのアイコンをつくる

2014年12月3日CSSテクニック

div要素ひとつだけでメニューボタンのアイコンをつくる

レスポンシブ・ウェブデザイン化の流れとともに、メニューやナビゲーションを表示するボタンとして定着した3本線のアイコンをdivひとつだけで作りました。

デモページ

HTML

<div id="menuBtn"></div>

CSS

#menuBtn {
	position: relative;
	width: 40px;
	height: 36px;
	margin: 0 auto;
	cursor: pointer;
}
#menuBtn:before {
	content: "";
	position: absolute;
	border-top: 6px solid #52d3ff;
	border-bottom: 22px double #52d3ff;
	width: 40px;
	height: 8px;
}
#menuBtn:hover:before {
	border-color: #5d5d5d;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. div要素ひとつだけでメニューボタンのアイコンをつくる

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com