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(トランジッション)の指定をしてあげるということになります。
アドセンス広告メイン
関連記事
-
PHPが凄い!!
1年以上前の記事です。内容が古い可能性があります。今まではCGIといえばPerl …
-
Illustrator(イラストレーター)を使ってWebサイトのデザインをする際の注意点
1年以上前の記事です。内容が古い可能性があります。自分、基本的にIllustra …
-
外部JavaScriptはひとまとめにしてしまおう
1年以上前の記事です。内容が古い可能性があります。プロット・ファクトリーCMS化 …
-
Yahoo!ジオプラスで送信フォームが動かない
1年以上前の記事です。内容が古い可能性があります。ずいぶん前にplot-fact …
-
携帯サイト(ケータイサイト)の作り方
1年以上前の記事です。内容が古い可能性があります。以前、携帯サイト(i-mode …
-
ビルトインクラスとは(ActionScript3.0勉強中! #2)
1年以上前の記事です。内容が古い可能性があります。さて、すべてのデータを「あるク …
-
WordPressのケータイサイトをカスタマイズ【Ktai Style】 #wp
1年以上前の記事です。内容が古い可能性があります。随分前にWordPress(ワ …
-
WordPress(ワードプレス)に「パンくずリスト」を付けてみた #wp
1年以上前の記事です。内容が古い可能性があります。ここのところ立て続けにWord …
-
携帯サイト(モバイルサイト)でCSS
1年以上前の記事です。内容が古い可能性があります。携帯サイト(モバイルサイト)で …
-
最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。そろそろHTML5が正式に勧告 …
Comment
はじめまして、
今まで使っていたメニューバーに
ドロップダウンをつけることができました。
ありがとうございました。
いろいろ試してみたのですが、
この方法が1番よくわかりました。
ちゃんとドロップダウンになりました。
ブログに記事を作りたいので、
このページをリンクさせてください。
よろしくおねがいします。
> 紫水ルリさん
了解です。
むしろ、よろしくお願いします。
[…] CSSだけで作る最も単純なプルダウンメニュー(ドロップダウンメニュー)【Webデザイン】 […]