スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

よくあるタイプのドロップダウンメニューをCSSだけで作りました。CSS3のtransitionを使うことで動きを付けています。また、最近フラットなデザインが流行っているようなので、何となくフラットな感じにしてみました。

drop-down-menu.png

サンプルを用意していますのでぜひご覧ください。CSS3のtransitionを使っていますのでIEだとスムーズな動きが表現されません。。

今回は最初のサンプルを詳しく解説します。後の2つは少し変えるだけで作ることができます。コードはサンプルの下に載せています。

追記:ご質問を頂きましたので多階層なドロップダウンメニューも作ってみました。CSSだけで作る「多階層」なドロップダウンメニュー|Webpark

では、HTMLから解説していきます。

HTML

<ul id="dropmenu">
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <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>
      <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>
    <ul>
      <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>
</ul>

よくあるタイプのリストメニューですね。親メニューのliの中にサブメニューを入れるようにするのが正しいマークアップです。

以下のようになるのは間違いです。

<li><a href="#">メニュー</a></li>
<ul>
  <li><a href="#">サブメニュー</a></li>
  <li><a href="#">サブメニュー</a></li>
</ul>

CSS

続いてCSSです。まずはすべて載せてみます。

#dropmenu{
  list-style-type: none;
  width: 800px;
  height: 40px;
  margin: 30px auto 300px;
  padding: 0;
  background: #8a9b0f;
  border-bottom: 5px solid #535d09;
  border-radius: 3px 3px 0 0;
}
#dropmenu li{
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li:hover > a{
  background: #6e7c0c;
  color: #eff7b1;
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li:last-child ul{
  left: -100%;
  width: 100%
}
#dropmenu li ul li{
  overflow: hidden;
  width: 200%;
  height: 0;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  background: #6e7c0c;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu li:hover ul li{
  overflow: visible;
  height: 38px;
  border-top: 1px solid #7c8c0e;
  border-bottom: 1px solid #616d0b;
}
#dropmenu li:hover ul li:first-child{
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{
  border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}

では個別に解説していきます。

メインメニュー

「コード」→「解説」の順で説明しています。

#dropmenu{
  list-style-type: none;
  width: 800px;
  height: 40px;
  margin: 30px auto 300px;
  padding: 0;
  background: #8a9b0f;
  border-bottom: 5px solid #535d09;
  border-radius: 3px 3px 0 0;
}

まずはメニュー全体のulの設定です。横幅を変えたいときは、この部分の横幅を変更するだけで大丈夫です。他の横幅は変更する必要ありません。高さについては、後で出てくる「#dropmenu li a」の上下のpaddingとfont-sizeの合計になります。

背景、ボーダーなどこのメニューで使っている色は、メインのカラーをひとつ選んでから0to255で提示された色を使っています。

具体的な使い方は「カラーツール「0to255」で色を決めてメニューを作ってみる|Webpark」をご参考に。

#dropmenu li{
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}

今回メインメニューは5つですので20%にしています。pxで指定しても構いませんが、パーセントで指定すると全体の大きさを変えるときに先ほどの「#dropmenu」の幅を変えるだけで済むので便利です。

サブメニューの表示位置の基準となるため、position: relative;を指定しています。

#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}

メインメニューのリンク部分です。line-height: 1;を指定しておくと、全体の高さが上下のpaddingとfont-sizeの合計になります。最初に指定した#dropmenuの高さですね。

#dropmenu li:hover > a{
  background: #6e7c0c;
  color: #eff7b1;
}

マウスを乗せたときの色の設定になります。メインメニュー、サブメニュー共通です。

#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}

メインメニューにマウスを乗せたときに上側の角を丸くします。「 > 」をはさむことで子要素のみに適用するため、孫要素にあたるサブメニューのリンクには適用されません。

サブメニュー

続いてサブメニューの設定です。

#dropmenu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}

サブメニュー全体のulです。「#dropmenu li」を基準に絶対値で表示位置を指定します。「top: 100%;」でメインメニューの真下に表示されることになります。

border-radiusで下側の角を丸くしています。

#dropmenu li:last-child ul{
  left: -100%;
  width: 100%
}

今回サブメニューの幅はメインメニューの2倍にしていますので、一番右のサブメニューが右側にはみ出ることになります。それを防ぐために一番右のサブメニューのみメインメニュー1つ分左にずらします。

サブメニューの大きさがメインメニューと同じであればこの部分は必要ありません。

#dropmenu li ul li{
  overflow: hidden;
  width: 200%;
  height: 0;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}

サブメニュー内のliです。横幅はメインメニューの2倍にしていますので、メインメニューと一緒に幅がいいという場合は、100%にしてください。transitionでオンマウス時の変化に動きを付けています。

初期状態では「overflow: hidden;」「height: 0;」で表示されないようにしています。

#dropmenu li ul li a{
  padding: 13px 15px;
  background: #6e7c0c;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}

サブメニューのリンクです。メインメニューのリンクと違う部分のみ書いています。

#dropmenu li:hover ul li{
  overflow: visible;
  height: 38px;
  border-top: 1px solid #7c8c0e;
  border-bottom: 1px solid #616d0b;
}

メインメニューにマウスを乗せた際のサブメニューです。高さは「#dropmenu li ul li a」の上下のpadding各13pxとfont-size12pxの合計の値になっています。

フラットとかいいながら上下のボーダーを重ねています。

#dropmenu li:hover ul li:first-child{
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{
  border-bottom: 0;
}

先ほど上下のボーダーを指定しましたが、一番上のサブメニューの上のボーダーと、一番下のサブメニューの下のボーダーは必要ないので消します。

#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}

一番下のサブメニューの下の角を丸くします。

さいごに

ということでCSSだけで作るドロップダウンメニューを解説しました。

ひとつずつ解説しましたのでカスタマイズしやすいかなと思います。今回普通な感じのものメガメニュー風なども作っています。

メニューの数を増やしたり、サブメニューの幅を変えたり、それぞれカスタマイズして実装してもらえたらうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
どうも、初めまして。
ドロップダウンメニューでこういうのをずっと探してました。
ぼくはfc2を使ってるのですが、残念なことにメニューが記事と被ると記事の方が優先されているらしくサブメニューが文字の後ろに隠れてしまいます。
そういう優先順位などをいじることはできますか?

技術的な質問で申し訳ありませんが、よろしくお願いします!
【2013/04/30 11:34】 | ゴコー #- | [edit]
本当にすみません。
自己解決しました。
z-indexで何とかなったっす。
【2013/04/30 12:09】 | ゴコー #- | [edit]
ゴコー さん

解決できてよかったです。

サブメニューは被ることの方が多いと思いますので
サンプルもz-index付きにしておけばよかったです。

またお立ち寄りくださいね~
【2013/04/30 20:58】 | 管理人 #E2ywrYdA | [edit]
初めまして。

メガメニューを作っていたのですが、jQueryでのメガメニューが
うまくいかず、CSSだけで作れるメガメニューがあって感激しています。
ゴーゴーさんの質問があったのですが、私はメニューの下にjQueryのスライドショーが
あり、メニューが後ろにいってしまいます。
ゴーゴーさんの質問で、z-indexで解決とあり、試したのですが、芳しくありません。
技術的な質問で大変恐縮で申し訳ありませんが、どこにz-indexを指定すればよいでしょうか?
なんとも初歩的な質問で申し訳ありませんが、よろしくお願いします。

※自分でももう少し色々やってみます。
【2013/06/04 16:19】 | きむきむ #- | [edit]
申し訳ありません。
z-index: 100;を#dropmenuに指定したらメニューが後ろから前に表示されるようになりました。
お騒がせして申し訳ありませんでした。
また立ち寄らせていただきます。
【2013/06/04 16:35】 | きむきむ #- | [edit]
むきむき さん

解決できてよかったです。
またお立ち寄りください~
【2013/06/04 23:00】 | 管理人 #E2ywrYdA | [edit]
自分のブログでは今まで普通のプルダウンメニューをつかっていて
もうちょっとなんとか見た目がよくできないかなぁと思っていたのですが
このエントリの情報のおかげで自分のブログでもトップ位置固定のドロップダウンメニューが実現でき、すごくかっこよくなりました。
すごく助かりました。ありがとうございました。
【2013/06/08 22:04】 | BNorider #- | [edit]
BNorider さん

この記事がお役に立ってよかったです。
今後もお互いブログがんばりましょう!
【2013/06/09 17:27】 | 管理人 #E2ywrYdA | [edit]
はじめまして
初心者のおじさんなんですが
sccファイルを参照しないのですが

ここ一週間ほどパソコンをにらんでいますが

デモの様になりません

申しわけございませんが もう少し詳しく教えていただけないでしょうか

宜しくお願い致します。

【2013/07/03 03:47】 | masa #- | [edit]
お騒がせ致しました

何とか自力で解決出来ました。

ありがとうございました。
【2013/07/03 09:08】 | masa #- | [edit]
こんにちは。
まったくの初心者なので教えていただきたいことがあります。
ソースをコピペして試してのですが、サブメニューが右へメニュー半個分スライドして表示されます。
何とかならないでしょうか?
【2013/07/03 13:46】 | まったくの初心者 #- | [edit]
たびたびすみません。
#dropmenu li ul liのwidthも数値通りの2倍になっておりません。
原因解明方法を教えていただけたらなと思います。
【2013/07/03 15:03】 | まったくの初心者 #- | [edit]
masaさん

解決できてよかったです。
またお立ち寄りください~
【2013/07/04 08:08】 | - #E2ywrYdA | [edit]
初めまして。

格好のいいドロップダウンメニューを探しててたどり着きました。
cssも最近やっと触り始めたところなので、便利、かっこいい、そして説明が分かりやすいの三拍子で大変ありがたかったです。

同じくサイトでご紹介いただいているアコーディオンメニューのCSSをmedia screen なんちゃらで画面サイズで分岐しつつ、無理矢理タテに合体してなんとなくレスポンシブデザインみたいなことに挑戦してみました。htmlを追加したり分岐でcssをノックアウトしたりしなきゃならなかったですが驚くほどスムーズに出来ましたヽ( ´∀`)ノ

他にも見どころが沢山なのでまた寄らせていただきます。ありがとうございました。

ちなみに、#dropmenu の margin: 30px auto 300px; の 下に対する指定の 300px は消しちゃったり、0pxにしても大丈夫ですか?下の行の文字がものすごく遠くなってしまうので。。。
【2013/07/13 01:04】 | lem012 #- | [edit]
lem012 さん

はじめまして!
コメントありがとうございます。
お役に立ててうれしいです。

#dropmenu の margin: 30px auto 300px;は
30pxも300pxもサイトに合わせて
自由に変更すればよいと思いますよ~。

では今後もよろしくお願いします。
【2013/07/13 14:02】 | 管理人 #E2ywrYdA | [edit]
cssだけでjqueryで作ったMEGAメニュー同様の動きが出来るのですね!
横にメニューがあり、リストがドロップダウンされるものが多いですが、
縦にメニューをならべ、その横にドロップされるものはあまり無い気がします。(Amazonのメニューのようなものです。 Amazon風にはjQuery-menu-aim.jsで出来るようですが)

そこで縦にメニューを並べる方法を教えていただけませんでしょうか?どうぞよろしくお願いします。(Amazonメニューのようなものを作ろうとしています)
【2013/08/25 22:41】 | - #- | [edit]
もちろん縦にメニューを並べても作れると思います。

コメント欄で解説するのは難しいので
別記事で紹介したいと思います。

よろしくお願いします~
【2013/08/27 03:54】 | 管理人 #E2ywrYdA | [edit]
わざわざ別記事を作ってくださるとは ありがとうございます。
なにげに縦メニューは少なかったので助かります! 
サブカテゴリの次にサブサブカテゴリをさらに表示させることも出来るのでしょうか?
(あまり深い層になると使いづらいかも知れませんが)
【2013/08/31 21:53】 | - #- | [edit]
サブカテゴリの次にサブサブカテゴリを
さらに表示させることも出来るのでしょうか?
ということですが、もちろん可能です。

考え方はサブカテゴリの場合と同じです。

<ul id="dropmenu">
 <li><a href="#">メニュー</a>
  <ul>
   <li><a href="#">サブメニュー</a>
    <ul>
     <li><a href="#">サブサブメニュー</a></li>
     <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>
 </li>


なんかややこしいですが、こんな感じでしょうか。
【2013/09/01 18:21】 | 管理人 #E2ywrYdA | [edit]
これをタッチデバイスで動作させることは可能ですか?
タッチデバイスだとタッチ時にリンクのページに遷移してしまいますので。。。
【2013/09/03 21:10】 | まえ #- | [edit]
まえ さま

タッチデバイスではhoverは使えませんので
このサンプルは使えないと思います。

タッチデバイス用にするにはクリックで開くものにする必要があります。
ちょっと違うかもしれませんが以下の記事は参考になるかもしれません。

http://weboook.blog22.fc2.com/blog-entry-365.html
【2013/09/04 03:32】 | 管理人 #E2ywrYdA | [edit]
はじめまして。
素敵なメニューのサンプルなので試してみようと思ったのですが・・・
実は、7/3コメントされている「まったくの初心者」さんと同じ状態になっています。
#dropmenu li ul {
position: absolute;
top: 100%;
left: 0;
list-style: none;
margin: 0;
border-radius: 0 0 3px 3px;
}
のtop:100%でメインメニューの真下に表示されると解説があったので、この部分を見ていたのですが、leftの数値を調節してメインメニューの真下にくるようにしましたが、なぜなのか?0で真下にきてもいいような・・・しかも、このページのサンプルはちゃんと0できれいに表示されているのに・・・
なにか原因を知っていらっしゃいましたら教えてください、よろしくお願いいたします。
【2013/09/04 22:00】 | mi-ko #LsX6cDnc | [edit]
mi-ko さん、まったくの初心者さん

コメントありがとうございます。
ご指摘の件につきましては、
padding: 0;
を追加すると解決すると思います。

サンプルは読み込んでいる外部ファイルの方で
padding:0; になっていました。

ご指摘ありがとうございました。
今後もよろしくお願いします!
【2013/09/08 16:37】 | 管理人 #E2ywrYdA | [edit]
なるほど、ありがとうございました。勉強になりました。
今後もよろしくお願いいたします。
【2013/09/10 11:20】 | mi-ko #j3BvY6GA | [edit]
初めまして!

センタリングで使えるメガメニューを探してたどり着きました(^_^;)

スライドダウンする子メニューの横幅をブラウザに合わせて100%にしたいのですが、どうにもやり方がわかりません。

教えていただけないでしょうか?
【2013/09/19 18:33】 | si:no #SDMp9c1c | [edit]
はじめまして。理想の形状を紹介されていらしたので
参考、練習に使わせていただいております。

初コメントが質問で申し訳ないのですが
ほぼコピーのソースを使用したところ、IE10においてサブメニューが表示されません。
(裏に隠れた状態のまま、マウスを合せてもロールオーバーごと反応しません)
IE以外では何事も無く動いているのですが・・・
こちらのサイトにあるサンプルは動いているので何か組み込み方に原因があると思うのですが、
考えられる要素はどのような部分でしょうか・・・
【2013/10/10 11:29】 | sang #v8QjPvAY | [edit]
はじめまして。CSSのドロップダウンメニューを探していまして、ここにたどり着きました。ここの質問の中にありましたがサブカテゴリの次にサブサブカテゴリを表示させたいのですが、

<ul id="dropmenu">
 <li><a href="#">メニュー</a>
  <ul>
   <li><a href="#">サブメニュー</a>
    <ul>
     <li><a href="#">サブサブメニュー</a></li>
     <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>
 </li>

のようにやってもうまく表示されないのですが、何かCSSの書き足し等はございますでしょうか?
【2013/10/12 09:46】 | アット #- | [edit]
sang さん

コメントありがとうございます。
こちらでも確認しましたが、
IE10でもちゃんと表示されました。

理由はちょっと思いつきませんが
メニュー以外のCSSを外して確認するなどして
原因を探すしかないと思います。

お役に立てず申し訳ございませんが
よろしくお願いいたします。
【2013/10/13 05:37】 | 管理人 #E2ywrYdA | [edit]
アット さん

コメントありがとうございます。
多階層にすると当然それに合わせたCSSも
追加する必要があります。

ここで説明するには長くなりすぎるので
ご容赦いただければと思います。

時間があれば別記事にしたいと思います。
【2013/10/13 06:14】 | 管理人 #E2ywrYdA | [edit]
ステキなナビゲーションですね!

IEで表示されない件、
私も同じ現象でしたが、
DOCTYPE宣言が関係あるかもしれません。

私はこれで解決しました。
こちらも参照してみてください。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1030298555
【2013/10/22 19:14】 | wakuchin #VmH0ZnG2 | [edit]
wakuchin さん

コメントありがとうございます。
私も確認しましたが、
宣言が問題になっているようですね。

<!DOCTYPE html> としておけば
問題ないと思います。
【2013/10/27 06:41】 | 管理人 #E2ywrYdA | [edit]
前に子メニューの横幅をブラウザに合わせて100%にしたいと質問した者です。
あれから別手法でやって解決したのですが、こちらのようにUL/LIを使って行う手法を
自己解決で考えたので、参考までに。

100%の子メニューはCSSのみでは無理で、必ず親要素のULのサイズと現在位置に位置と幅が影響されるので、Jqueryに頼りました。

$('#【ID名】>li').css({'width': $(window).width(),'left':$('#【ID名】').width()/2 - $(window).width()/2});

*【ID名】はCSSで規定

子メニューの親要素のULにID名をつけて、ブラウザのウィンドウ幅を取得して子メニューを100%に引き伸ばす。
そのままの配置だと、子メニューの表示位置からずれるので、子メニューの横幅の1/2とブラウザウィンドウ幅の1/2分だけ左にずらす処理を行えば、横幅100%の子メニューが表示されます。
実際は他にもブラウザウィンドウ幅を変えたときに再計算して再表示する処理が必要ですが、上の考え方で、ULを利用したものでも、LIの横幅100%が作れることがわかりました。

モダンブラウザなら上記のJquery計算で全部動きます。(昔のは知りません)

横幅100%は中々難しいですね
【2013/11/14 14:20】 | si:no #- | [edit]
si:no さん

コメントありがとうございます。
子要素を横幅100%ってできそうでできないですね。
やっぱりjQuery便利です。
【2013/12/02 07:20】 | 管理人 #E2ywrYdA | [edit]
ご報告いたします。
縦並びメニューの際の縦表示を行う場合は、
header nav ul li {
display: inline-block;
height: 55px;
position: relative;
}

header nav ul li a {
display: inline-block;
margin: 0;
line-height: 55px;
color: black;
font-weight: bold;
text-decoration: none;
}
とinline-blockでないと動作しませんでしたため、ご注意ください。
なお、以下は英字の比率が多すぎるためスパム判定とか言われたので、
あえて駄文にて埋めさせていただきます。
【2013/12/03 03:27】 | ivno #- | [edit]
せっかくですのでinline-blockでないと正常に動作しなかったソースを晒しておきます。
スパム判定されそうで怖いですが。

CSS
@charset "utf-8";
* {
margin: 0;
padding: 0;
font-style: normal;
}

body
{
background: black url('../img/bgimage.jpg') repeat-x;/*背景の繰り返し用*/
width: 90%;
max-width: 1024px;
min-width: 800px;
margin: 0 auto;
}

div#wrapper {
margin: 54px 0 0 0;
width: 100%;
height: 576px;
background: white;
}

header {
width: 17.38%;
height: 546px;
float: left;
padding: 28px 1.46% 0 0;
text-align: right;
}

header h1 {
display: inline-block;
font-size: 10px;
text-align: right;
}

header h1 a {
display: inline-block;
background: url('../img/topbn.jpg');/*151x36のタイトル画像*/
width: 151px;
height: 36px;
line-height: 85px;
overflow: hidden;
}

header nav ul {
list-style-type: none;
}

header nav ul li {
display: inline-block;
height: 55px;
position: relative;
}

header nav ul li a {
display: inline-block;
margin: 0;
line-height: 55px;
color: black;
font-weight: bold;
text-decoration: none;
}

header nav ul li a:hover {
background: #eee;
}

header nav ul li ul {
list-style-type: none;
text-align: right;
position: absolute;
top: 0;
right: 85px;
}

header nav ul li ul li {
overflow: hidden;
width: 100%;
height: 1px;
-moz-transition: .3s;
-webkit-transition: .3s;
-o-transition: .2s;
-ms-transition: .3s;
transition: .3s;
}

header ul li:hover ul li {
overflow: visible;
height: 55px;
}

header ul li ul li a:hover {
overflow: visible;
}

header nav ul li ul li a {
color: gray;
text-decoration: none;
font-weight: normal;
}

article {
width: 81.1%;
height: 546px;
float: left;
}

footer {
clear: both;
height: 53px;
text-align: center;
}

footer p {
line-height: 53px;
color: white;
}

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>何とかかんとか | Top page</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="./css/common.css" />
</head>
<body>
<div id="wrapper">
<header>
<h1><a href="./index.html">飛ばして非表示になるキーワード</a></h1>
<nav>
<ul>
<li><a href="./contact.html">メニュー1</a></li><br />
<li><a href="./portfolio.html">メニュー2</a>
<ul>
<li><a href="./graphic.html">メニュー2-1</a></li>
<li><a href="./civibi.html">メニュー2-2</a></li>
<li><a href="./package.html">メニュー2-3</a></li>
<li><a href="./prodact.html">メニュー2-4</a></li>
</ul>
</li><br />
<li><a href="./sight.html">メニュー3</a></li>
</ul>
</nav>
</header>
<article>
<section>
<p>このテキストは表示テストです。</p>
</section>
</article>
</div>
<footer>
<p>
<small>©2013-2014 .</small>
</p>
</footer>
</body>
</html>
そしてまたスパムとか言われそうですので色々と書き込みしておきます。
丸々内容を晒していますのでそのままHTMLに起こせたりしますが、
できれば丸々のご利用は避け、一部または全部改変などを行っていただけると喜びます。
コーディング初心者さんは、このソースを参考に色々と解析してみると良いかもしれません。
特にCSSの部分はWebページの命ですので、しっかり学んだほうが良いです。
見ると分かるかもしれないのですが、HTMLのソースってどれもあまり代わり映えしないのです。
と言いますかほとんど使いまわしですね。
一部だけにテコ入れして、あとはCSSだけで全体が出来ちゃうものなのです。
ということで若葉マークの皆さん、CSSをしっかり学びましょう。
そしてここまで書いておいて一度送信したら、案の定スパム判定されました。
頑張って色々と書くわ・・・
Webページを作成する際に重要となるのが、最終目標です。
このページが出来たらこのページで一体何がしたいのか、
そのしたいことが達成できたとしたらではどうするのか、
それも達成できたらそうづるのかなどと繰り返し、
最終目標を導き出し、その最終目標に合わせて作ると良いでしょう。
また、個人の趣味のページならば別ですが、商用ページなどでは、
閲覧者と実際に金員を支払う人とが別の場合があります。
閲覧者のことだけではなく、実際の金員を支払う人に対する
配慮を行うのも案外重要なことなのです。
さてそろそろ送れるかな?なんて思いましたが甘かったみたいです。
では仕方ないので現役のWebクリエイターが
もう少し駄文を語らせていただきます。
ページを作成する際に注意しておきたいこととしては、
ビッグキーワードとスモールキーワードです。
ビッグキーワードとは、日本,東京,オリンピックなどであり、
これに対するスモールキーワードが、
2020年,開催地,選手村などが該当するでしょう。
ビッグキーワードとスモールキーワードは、相対的な表現ですので、
実際には何がビッグキーワードで何がスモールキーワードであるかは、
目指す内容により変化します。
このようにビッグキーワードとスモールキーワードの選定を行うことは、
SEO対策を行う上でとても重要なこととなってきます。
【2013/12/04 01:41】 | ivno #- | [edit]
ivno さん

コメントありがとうございます。

スパム判定でご迷惑をおかけしました。
50%以上英語の場合に判定されるようにしていたのですが、
試しに80%以上に変更しました。
私自身コードを載せる際不便していましたので。。

縦メニューは普段あまり使わないこともあって
このブログでも紹介する機会はあまりありませんでした。

貴重なソースありがとうございました。
とても勉強になりました。

ぜひまたお立ち寄りください~
【2013/12/05 06:29】 | 管理人 #E2ywrYdA | [edit]
CSSでつくるドロップダウンメニューを探していてたどり着きました。

とて理解しやすく表記して下さり感謝しております。
しっかりお気に入りに入れてしまいました。

ひと通りの設定はできたのですが、1つやりたい事ができず困っています。
教えて頂ければありがたいです。

一番右のメニューのみ色を変えたいです。

#dropmenu End:hover {
color:#CCC;
}

を追記してみたのですが、思うように行かず…
教えていただけるとありがたいです。

よろしくお願いします。
【2014/01/17 11:46】 | Akinori #VrArKtZk | [edit]
Akinori さま

コメントありがとうございます。

#dropmenu > li:last-child a{color: #ccc;}

でどうでしょうか?
一番右のメニューのみ子メニューも含め色が変わると思います。
【2014/01/18 05:43】 | 管理人 #E2ywrYdA | [edit]
ありがとうございます!

last-child なんですね。
右端の色だけ変えてメニューを作ることができました。

めっちゃ助かりました。
ありがとうございます<m(__)m>
【2014/01/20 22:25】 | Akinori #VrArKtZk | [edit]
Akinori さん

うまくいってよかったです。

またお立ち寄りください~
【2014/01/21 06:15】 | 管理人 #E2ywrYdA | [edit]
HTML5でどう差別化をはかろうか?
って考えたときに
グローバルメニューやサイドメニュー、見出しを
もっと見やすくしようっていう発想に至りますたw

無料ブログでもHTMLサイトでもCMSでも使えますしね~
見やすく読みやすく
目的のページにたどり着き易くユーザーを迷わせないサイトの構成を
目指す為、参考にさせていただきますw
【2014/01/26 02:07】 | ヨシハラ #- | [edit]
ヨシハラ さま

コメントありがとうございます。

ユーザーに優しいメニューはページビュー数のアップという観点からも
非常に大切だと思います。

そんなかこの記事がお役になったならうれしいです。
またお立ち寄りください~
【2014/01/26 12:44】 | 管理人 #E2ywrYdA | [edit]
理想的なドロップダウンメニューで、とてもうれしいです!
わかりやすいご説明を拝見しながら、色の変更もスムーズにできました!ありがとうございます。


ただ・・・・
メニューの真下にFlashを表示させたかったのですが、
どうしても真下ではなく、だいぶ下(スクロールしないとたどり着けないくらい)に表示されてしまいます…
初投稿なのにご質問で大変申し訳ないのですが、よろしければ解決法をお教えいただければ幸いです。。
「真下のFlashと重なってクリックできない」というような投稿・解決策は多々見かけるのですが、
真下に表示できないというのが見つけられなくて…
既出の質問だったら申し訳ございません!

何卒よろしくお願いいたします。。
【2014/02/04 17:54】 | pochi #PzYVIlwM | [edit]
サブメニューも横書きに出来ないでしょうか。
【2014/02/06 18:36】 | matsu #- | [edit]
勉強のために大変参考にさせて頂いてます。
超が付くほどの初心者です。
いきなりの質問で申し訳ないのですが、サブメニューがIEのウィンドウの一番下まで達してしまった際、サブサブメニューを開くとIEウィンドウを突き抜けてしまうのですが、下にではなく、上に向かって表示させる場合、どこを弄れば良いのでしょうか?また、他に良い解決方法があればご教示頂きたいです。
説明下手くそですみません。
【2014/07/25 19:48】 | こてつ #- | [edit]
こてつさま

いまいちイメージできませんが、
サブメニューの数が多くなって画面の下までいくのであれば
決して使いやすいメニューとはいえませんので
カテゴリ分けを見直すかメガメニューにするなど
してみてはどうでしょうか。

答えになっていなくてすいません。。
【2014/07/31 18:14】 | 管理人 #E2ywrYdA | [edit]
こんにちわ

初心者なんですが こちらのドロップダウンリストを導入させていただきました
ファイルをブラウザで開いた時には問題なかったのですが
アップロードして公開するとなぜかChromeではうまく表示できていません

どういったことが原因として考えられるでしょうか?
【2014/08/12 15:58】 | こにたん #- | [edit]
とりあえずメニュー項目がまだ少ないのでドロップダウンを廃止して対処しておきます

もし思い当たることがあれば教えてください

よろしくお願いします
【2014/08/12 16:59】 | こにたん #- | [edit]
ブラウザのリセットで直りました^^;

理由はわからないのですが cssをうまく読み込めなかったようです

お騒がせしました┏〇ペコッ
【2014/08/12 18:33】 | こにたん #- | [edit]
こにたん さん

コメントありがとうございます。
とにかくうまくいってよかったです。

またお立ち寄りください!
【2014/08/12 22:14】 | 管理人 #E2ywrYdA | [edit]
カンタンなのに、キレイなドロップダウンメニューが作れました!
神ソースです★ありがとうございます。
iphoneだけ、動作しなかったのですが、何が原因かお分かりでしょうか。
【2014/08/20 16:54】 | みー #- | [edit]
みーさん

お役に立ててよかったです。
iPhoneで動かないのはマウスを乗せるという動作がないからです。

いい対応法があればまた記事にしたいと思います。
【2014/08/22 06:12】 | 管理人 #E2ywrYdA | [edit]
初めまして、メガメニューの参考させて頂いています。
色々とカスタマイズを計っていますが不具合が発生してしまい大変困っております。
大変お手数ですがご質問させてください。

動作させたい内容ですが、
1.横幅を変更したい(実装済み)
2.縦幅を変更したい(不具合発生しています。色々やりましたが高さを変更するとスライド部分も変更されたりしてしまっています。)
3.スライドメニュー部分の縦幅を変更したい
4.各部分の色を変えたい(縦ラインのメニューごとに色を変えたいです)
5.スライドメニュー部分のマウスオーバーで色を変えたい


以上の内容の変更を試みております。
お手数ですがご指南よろしくお願いします。
【2014/08/30 17:06】 | ゆー #- | [edit]
はじめまして。
CSSなどやったことなどなく、HPを作っているのですが、こちらのドロップダウンメニューを参考にさせていただいております。
ただ、どうしても解決できないことがありましてご指南頂ければ幸いです。
ドロップダウンメニューを作ったあと、その下に文字や画像をいれるとサブメニュー分だけ空白ができてしまいすぐ下に文字や画像が表示されません。
この現象を治すにはどうすればよろしいでしょうか?
また、z-indexというのはどこに書き込めばいいのでしょうか?
できれば、ここの間に入れるというようなわかりやすい方法で教えていただけると嬉しいです。
お手数ですが、お時間あるときにでもよろしくお願いいたします。
【2014/09/21 01:21】 | ねこた #SFo5/nok | [edit]
初めまして。
cssのみでのドロップダウンメニュー実装、感激しております。

別の記事にあった一定以上スクロールすると固定されるメニューと合わせて、グローバルナビゲーションを制作中なのですが(URLをご参照ください)
横幅いっぱいの設定にしているためか、サブメニューの幅を100%にしてもメインメニューの幅と合わず、ずれてしまいます。

年の瀬でお忙しいかと思いますが、何卒ご教授のほどよろしくお願いいたします。
【2014/12/16 16:53】 | ぴよ #- | [edit]
はじめまして!
ドロップメニューをつけたくてここへたどり着きました。
わかりやすい解説等々もあり
非常に作業が進めやすかったです。
ありがとうございました☆
【2015/08/04 14:39】 | gottz0703 #- | [edit]
gottz0703 さん

はじめまして。
この記事がお役に立ててうれしいです。
またお立ち寄りください!
【2015/08/10 23:33】 | 管理人 #E2ywrYdA | [edit]
はじめまして、お世話になっております。
素敵なCSSドロップダウンをありがとうございます(*^-^*)

さっそくなのですが、こちらのメニューをカスタムしたところ、
サブメニュー(出てくるメニュー)をマウスオーバーしたときに、
メニューが消えてしまい、クリックできず困っています(ノД`)

こちらのデモのCSSとHTMLをそのまま入れてみたりもしたのですが、
どちらもTOPページは反応するものの、他のページからメニューを見た時に動作がおかしいです。

クローム、Firefox、IEすべて同じ症状です。
見ていただけると助かります><

【2015/09/03 23:50】 | みかん #- | [edit]
はじめまして!

こちらの記事を参考にドロップメニューを作成して見栄えのいいサイトになりました。
ありがとうございます。

1点問題があり、書き込みました。
IE8,9での挙動ですが、サブメニューが全て開いた状態で表示されてしまいます。
こちらのサンプルページはうまく動作しているので、原因がわからず困ってしまいました。

ご執筆から時間が経過しており恐縮ですが、ご教授いただければ大変助かります。
【2016/04/22 17:32】 | cab #qbIq4rIg | [edit]
サブメニューが多いときにInternetexplorerでは上手く表示されるのですが、firefoxとgoogle chromeではうまく表示させずに途中で切れるような形になるのですが、原因が分からずに困っています。出来れば解決法を教えていただけませんか?よろしくお願いします。
【2016/06/14 05:45】 | kunka #- | [edit]
ドロップダウンメニューを作成しましたが、その下に文字あるいはスライドショウをのせるとその間隔が広くなり過ぎます。間隔を調整する方法を教えてください。
cssの初心者です。宜しく教えてください。

先の質問項目で、ドロップダウンが下の画面に入り込む解決として、z-index:100として、解決したと記載されています。具体的な記載方法を教えてください。
【2016/07/29 15:29】 | 遠藤紘一 #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。