新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

CSSだけで作る最も単純なプルダウンメニュー(ドロップダウンメニュー)【Webデザイン】

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

今まではIE6の存在等もあってCSSだけでプルダウンメニューを作るのはほぼ不可能でしたが、CSSがより多くのブラウザでしっかりと反映されるようになってきたので、CSSだけでプルダウンメニューを書くことができるようになりました。
今回は、その手順を解説していこうと思います。

WEB

スポンサーリンク
 

CSSとHTMLを公開すればそれでOKかというとそうでもないので、作る手順をなるべく最初から段階的に解説していこうと思います。

  1. 最初に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>
  2. 次に書いたリストにCSSを適応させてボタンにします。
    プルダウンメニューの部分も表示されたときの状態でデザインしておきます。
    以下の手順でやると比較的やりやすいです。
    1. まずはトップレベルにある<UL>(id=”dropmenu”)に対してリストをボタンにする準備のCSSを書きます。
      #dropmenu {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      width: 800px; /* 十分な横幅があればこれはいらない */
      float: left; /* floatで高さが無くなる対策 */
      }
    2. 親メニューを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;
      }
    3. 子メニューは<ul>に対してposition:absoluteを使って位置をレイアウトします。
      (ついでにリストをボタンにする準備のCSSも書いておきます)
      #dropmenu li ul {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      position: absolute;
      top:32px;
      left:0px;
      }
    4. 先に子メニューにposition:absoluteを付けてから親メニューをfloatした方が見た目にレイアウトが整えやすくていいと思います。
  3. 子メニューのulに対してdisplay:noneを設定します。画面から消えてしまうのでこの前にa:hover等のデザインも指定しておいた方がいいです。
    #dropmenu li ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    position: absolute;
    top:32px;
    left:0px;
    display:none;
    }
  4. 一番のポイントはここ。親メニューの<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(トランジッション)の指定をしてあげるということになります。

via : CSSだけで作る動きのあるドロップダウンメニュー|Webpark

 - デザイン, プログラミング

アドセンス広告メイン

Comment

  1. 紫水ルリ より:

    はじめまして、
    今まで使っていたメニューバーに
    ドロップダウンをつけることができました。
    ありがとうございました。
    いろいろ試してみたのですが、
    この方法が1番よくわかりました。
    ちゃんとドロップダウンになりました。
    ブログに記事を作りたいので、
    このページをリンクさせてください。
    よろしくおねがいします。

  2. のりさ より:

    > 紫水ルリさん
    了解です。
    むしろ、よろしくお願いします。

  3. […] CSSだけで作る最も単純なプルダウンメニュー(ドロップダウンメニュー)【Webデザイン】 […]

Message

メールアドレスが公開されることはありません。

  関連記事

ツイッター(Twitter)顔文字用の文字が探せるサイト「Shapecatcher」が便利

1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)は …

no image
JavaScriptでありがちな9つのシマッタ

1年以上前の記事です。内容が古い可能性があります。「JavaScriptでありが …

no image
Safariの癖

1年以上前の記事です。内容が古い可能性があります。忘れないうちに「Safari」 …

WordPress(ワードプレス)のヘッドライン表示は「query_posts」じゃなくて「get_posts」 #wp

1年以上前の記事です。内容が古い可能性があります。プログラムのプロではないのです …

WordPressをhttps(SSL)化、さくらインターネットのレンタルサーバーでリダイレクトループさせない「.htaccess」の書き方【後編】

1年以上前の記事です。内容が古い可能性があります。以下の続きとなります。 Wor …

電源ボタンのマークは秘密 (8/23追記)

1年以上前の記事です。内容が古い可能性があります。Yahoo!トップページから2 …

ネットで印刷、印刷通販の「グラフィック」を使ってみた【入稿編】

1年以上前の記事です。内容が古い可能性があります。さて、ここまでは驚くほど順調に …

ビルトインクラスとは(ActionScript3.0勉強中! #2)

1年以上前の記事です。内容が古い可能性があります。さて、すべてのデータを「あるク …

念願の佐々木岳久さんの個展に行ってきた

1年以上前の記事です。内容が古い可能性があります。当ブログでも何度か紹介させてい …

携帯サイト・Webサイト振り分けスクリプト【perl】

1年以上前の記事です。内容が古い可能性があります。携帯サイトとWebサイトを同じ …