CSSだけで作る最も単純なプルダウンメニュー(ドロップダウンメニュー)【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。
今まではIE6の存在等もあってCSSだけでプルダウンメニューを作るのはほぼ不可能でしたが、CSSがより多くのブラウザでしっかりと反映されるようになってきたので、CSSだけでプルダウンメニューを書くことができるようになりました。
今回は、その手順を解説していこうと思います。
CSSとHTMLを公開すればそれでOKかというとそうでもないので、作る手順をなるべく最初から段階的に解説していこうと思います。
- 最初にHTMLを用意します。入れ子のリストを作ってそれぞれにリンクを設定します。
<ul id="dropmenu">
<li><a href="#">親メニュー</a>
<ul>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
</ul>
</li>
<li><a href="#">親メニュー</a>
<ul>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
</ul>
</li>
<li><a href="#">親メニュー</a> </li>
<li><a href="#">親メニュー</a> </li>
<li><a href="#">親メニュー</a> </li>
</ul> - 次に書いたリストにCSSを適応させてボタンにします。
プルダウンメニューの部分も表示されたときの状態でデザインしておきます。
以下の手順でやると比較的やりやすいです。 - まずはトップレベルにある<UL>(id=”dropmenu”)に対してリストをボタンにする準備のCSSを書きます。
#dropmenu {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 800px; /* 十分な横幅があればこれはいらない */
float: left; /* floatで高さが無くなる対策 */
} - 親メニューをfloatを使って横並びにします。(親メニューだけにfloatさせたいので「>」を使っています)
自分の場合は<li>に対しては最低限(ここではfloat)の記述しかせずに、<a>に対してデザインの指定を入れるようにしています。#dropmenu > li {
float: left; position: relative; /* 子メニューにabsoluteを設定するため */
}
#dropmenu li a {
display: block; /* aタグはインライン要素なのでブロックレベル要素にする */
text-align: center;
height: 20px;
width: 150px;
padding-top: 10px;
background-color: #CCC;
font-size: 14px;
color: #000;
text-decoration: none;
border: 1px solid #000;
} - 子メニューは<ul>に対してposition:absoluteを使って位置をレイアウトします。
(ついでにリストをボタンにする準備のCSSも書いておきます)#dropmenu li ul {
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
top:32px;
left:0px;
} - 先に子メニューにposition:absoluteを付けてから親メニューをfloatした方が見た目にレイアウトが整えやすくていいと思います。
- 子メニューのulに対してdisplay:noneを設定します。画面から消えてしまうのでこの前にa:hover等のデザインも指定しておいた方がいいです。
#dropmenu li ul {
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
top:32px;
left:0px;
display:none;
} - 一番のポイントはここ。親メニューの<li>に対してli:hoverの擬似要素の指定をすることで、<li>にポインタが重なった時に子メニューの<ul>が表示されるようにします。
#dropmenu li:hover ul {
display: block;
}
ということで、CSSを全部まとめて書くと以下のとおりになります。
#dropmenu {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 800px; /* 十分な横幅があればこれはいらない */
float: left; /* floatで高さが無くなる対策 */
}
#dropmenu > li {
float: left; position: relative; /* 子メニューにabsoluteを設定するため */
}
#dropmenu li a {
display: block; /* aタグはインライン要素なのでブロックレベル要素にする */
text-align: center;
height: 20px;
width: 150px;
padding-top: 10px;
background-color: #CCC;
font-size: 14px;
color: #000;
text-decoration: none;
border: 1px solid #000;
}
#dropmenu li ul {
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
top:32px;
left:0px;
}
#dropmenu li ul {
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
top:32px;
left:0px;
display:none;
}
#dropmenu li:hover ul {
display: block;
}
なお、ここに動きを付けたい場合はoverflowプロパティとtransitionプロパティ(CSS3)を使って以下のようにします。
(赤字部分追記、一部削除しています)
#dropmenu {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 800px; /* 十分な横幅があればこれはいらない */
float: left; /* floatで高さが無くなる対策 */
}
#dropmenu > li {
float: left; position: relative; /* 子メニューにabsoluteを設定するため */
}
#dropmenu li a {
display: block; /* aタグはインライン要素なのでブロックレベル要素にする */
text-align: center;
height: 20px;
width: 150px;
padding-top: 10px;
background-color: #CCC;
font-size: 14px;
color: #000;
text-decoration: none;
border: 1px solid #000;
}
#dropmenu li ul {
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
top:32px;
left:0px;
overflow: hidden;
height: 0px;
transition: all 0.5s;
}
#dropmenu li:hover ul {
height: 100px;
}
つまり、displayで表示、非表示を切り替えていたのを、子メニュー<ul>の高さを0にしてはみ出した部分を非表示(overflow:hidden)にすることでまずは子メニューを消し、高さを戻してあげて表示させるというかたちにしてから、CSS3で追加になったtransition(トランジッション)の指定をしてあげるということになります。
アドセンス広告メイン
関連記事
-
-
アメブロ(アメーバブログ)にzenbackを導入する方法
1年以上前の記事です。内容が古い可能性があります。zenbackに関してはソース …
-
-
念願の佐々木岳久さんの個展に行ってきた
1年以上前の記事です。内容が古い可能性があります。当ブログでも何度か紹介させてい …
-
-
デザインの配色に迷ったときに使えるツール
1年以上前の記事です。内容が古い可能性があります。デザイン系ブログとしてよく読ま …
-
-
自分のサイトの外部リンクがどのくらいクリックされているか調べる方法
1年以上前の記事です。内容が古い可能性があります。Google Analytic …
-
-
予約語
1年以上前の記事です。内容が古い可能性があります。まずは通りすがりさんありがとう …
-
-
あまり直帰率が改善されないので「関連記事」の場所を変えた
1年以上前の記事です。内容が古い可能性があります。以前、「直帰率対策で関連記事を …
-
-
Ajax
1年以上前の記事です。内容が古い可能性があります。Ajaxってのがはやっているら …
-
-
WordPress(ワードプレス)固定ページからコメント欄を消す方法 #wp
1年以上前の記事です。内容が古い可能性があります。一筋縄ではいかなかった固定ペー …
-
-
自分のサイト表示がブラウザごとに確認(チェック)できるサイト「browserling」
1年以上前の記事です。内容が古い可能性があります。Web制作する際に困るのが表示 …
-
-
フーツラ(Futura)もどき?を無料でダウンロードできるサイト
1年以上前の記事です。内容が古い可能性があります。とある理由により、「Futur …
Comment
はじめまして、
今まで使っていたメニューバーに
ドロップダウンをつけることができました。
ありがとうございました。
いろいろ試してみたのですが、
この方法が1番よくわかりました。
ちゃんとドロップダウンになりました。
ブログに記事を作りたいので、
このページをリンクさせてください。
よろしくおねがいします。
> 紫水ルリさん
了解です。
むしろ、よろしくお願いします。
[…] CSSだけで作る最も単純なプルダウンメニュー(ドロップダウンメニュー)【Webデザイン】 […]