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

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

*

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

   

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

今までは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. のりさ より:

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

Message

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

  関連記事

ブログデザインリニューアルしました

突然すいません。 夏休み中にやると言っていたデザインリニューアルですが、ようやく …

no image
日本人に読めないフォント「Electroharmonix」が本当に読めない

日本人に読めないフォントというのが話題になっています。 pic.twitter. …

Photoshop(フォトショップ)を使ったWebデザインで注意する点

学校で生徒さん用にまとめたのですが、意外と重要な事だと思ったので公開することにし …

ライブドアブログで公式ツイートボタンを完全対応

昨日の記事の続きとして読んでください。 とりあえず、昨日の記事で個別記事に公式ツ …

CSS2.1まとめ書き-background編(HTML・CSSリファレンス)

CSS2.1まとめ書きも3回目。今回はバックグラウンドカラー(背景の色)やバック …

WordPress(ワードプレス)のURL表記をHTML表記にする方法 #wp

牛歩戦術でゆっくりと進んでいるプロット・ファクトリーWebサイトのワードプレス( …

「HTML5」「CSS3」「ActionScript3.0」

近頃はディレクション業にかまけて技術的なことはデザイナーやプログラマーに振りっぱ …

no image
携帯サイト(ケータイサイト)の作り方

以前、携帯サイト(i-modeサイト)でCSSを使う方法を説明しましたが、 加え …

「use strict」に対応させる簡単な改造方法【perl】

色々なところでperlのプログラムはuse strictを使うようにという記事を …

Webデザインのテンプレートは60px×12カラムで横幅960px

これはWebデザイナーの常識なのでしょうか?実は、最近知りました。Webデザイナ …