CSS プログラミング

【HTML/CSS初心者】サイドバーにスライドメニューを作成する方法を解説

vこんにちは、イケゾーです。

今回は、WEBページに必須「スライドメニュー」の作成方法を解説していきます。
スライドメニューとは、マウスオーバーすると、背景色や文字色が変わって、横方向にメニューがスライドして表示されるものです。

(こちらは「サイバー大学」様のサイトを模写したものです)

 

このように動きのある技術って、難しいイメージありますよね。特に初心者からすると、ちょっと構えてしまいますよね。裏側で何やってんだろと思ってしまいますが、仕組みを理解すれば簡単なのです。コードだけでなく、考え方から解説していきますので初心者向けの内容になっています。

 

この記事を読むと

HTML/CSSのみで、スライドメニューを作れるようになります。

 

こちらのサイトを参考にさせていただきました。
また、当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

【HTML/CSS初心者】サイドバーにスライドメニューを作成する方法を解説

では、下記の手順でやっていきましょう。
大事なのは、冒頭の「スライドメニューの仕組み」の部分です。

(HTML/CSSのみで作成していきますので、JavaScript/jQueryの知識は不要です。)

 

 

【必読】スライドメニューの仕組み

なぜ、さいしょに仕組みの理解が必要なのか?

コードを書き始める前に、スライドメニューの仕組みを理解し、難しいことでないと安心しましょう。

 

初心者あるあるですが、新しい技術にチャレンジとき「すごい難しい」ことをやっているように感じてしまいます。でも実際に手を動かしてやってみると「なんだ、思ったよりも簡単だな」となることありませんか?

それは、仕組みを理解できたかどうかなのです。仕組みを1度理解できちゃえば、来週の自分でも同じコードを書けますし、自由にカスタマイズもできますね。

 

ということで、コードを書き始める前に、仕組みを理解すると成長が早い!ということでした。

 

スライドメニューの仕組み

まず、説明がしやすいように名前をつけます。
左側に常に表示している「メインメニュー」と、右側にスライド表示される「サブメニュー」とします。それぞれの仕組みとポイントを解説します!

 

メインメニューのポイント

幅(width)を固定し、位置(position)を左端に固定する

cssで、positionを使って常に左端に表示されるようにします。

 

サブメニューのポイント

・メインメニューの右側に、位置(position)を固定する

・初期状態では非表示で、メインメニューにマウスオーバーした時のみ、表示をする

固定したメインメニューの右にサブメニューを配置します。これもcssのpositionで固定します。

サブメニューの表示⇄非表示の切り替えは、幅(width)を 0px ⇄ 1px以上 でコントロールします。
つまり、メインメニューにマウスオーバーした時に、サブメニューの幅(width)を0pxから変えるだけなのです。

 

イケゾー
簡単だよね、これを理解できればコードがスラスラ読めるよ

 

HTMLでメニューを作る

ここは今回の本質ではないので、簡単に載せときますね。

「main-menu」と「sub-menu」の<li>タグで構成してあります。<ul>を複数コピーして作成すると良いです。

 

index.html
<aside class="sidebar"><ul>
  <li class="main-menu">
      <a href="#">About</a>
      <ul class="sub-menu">
          <li><a href="#">About 1</a></li>
          <li><a href="#">About 2</a></li>
          <li><a href="#">About 3</a></li>
      </ul>
  </li>
</ul>
</aside>

 

少し、CSSでデザインを整えます。
前章で説明した仕組みの部分を書いただけなので簡単です!

style.css
.sidebar{
	width: 200px;
	height: 100%;
	position: fixed;
	color: #1A365E;
}
.sub-menu{
	width: 0;
	position: fixed;
	left: 200px;
	top: 0;
	overflow: hidden;
	color: #fff;
	background: #1A365E;
	height: 100%;
	padding-top: 50px;
	border-left: 1px solid #ccc;
}

 

 

CSSでスライドの動きを作る

「スライドの動き」と書きましたが、「サブメニューの幅を変える」だけですね。
メインメニューにマウスオーバーしたら、サブメニューの幅を1px以上にします。

style.css
.main-menu:hover .sub-menu{
	width: 200px;
}

 

イケゾー
お疲れ様でした、仕組みから理解すると簡単でしたね

 

まとめ

以上で、スライドメニューの仕組みから作り方を解説しました。

この考え方ができれば、色々なメニューを作ることができます。JavaScriptを使ったメニューの作成もありますが、この方法が基礎となっています。ぜひ、マスターして、動きのあるメニューを作ってみてください。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS, プログラミング