気ままに趣味旅行

面白いコト「拡がる／拡げる」

トップ > HTML/CSS > 実践で学ぶHTML／CSS　－ドロップダウンメニューの作り方（基礎）

実践で学ぶHTML／CSS　－ドロップダウンメニューの作り方（基礎）

HTML/CSS

どうもです。

 

最近、HTMLとCSSについてばかり挙げてます。

以前までで基礎編は大体終わりです。これからは実践編に入っていきます。実践編では以前学んだ基礎的な知識を使いつつ、実際に何か作っていきます。なので、もし分からなくなれば巻き戻って復習してみてください。質問等も気軽にくださればお答えします。

ではよろしくお願いします。

 

さて先日、疑似要素について説明しました。

今回は、それを利用して、ドロップダウンメニューを紹介したいと思います。 下のメニューボタンを作っていきます。

 

完成イメージ

  1. <ul class="practice-botton1">
  2.   <li>メニュー
  3.     <ul class="practice-botton2">
  4.         <li>ハンバーガー</li>
  5.         <li>ポテト</li>
  6.     </ul>
  7.   </li>
  8. </ul>
  1. .practice-botton1 li,.practice-botton2 li{display:inline-block;
  2.     text-decoration: none;
  3.     cursor:pointer;
  4.     color:inherit;
  5.     background-color:white;
  6.     border:solid;
  7.     width:120px;
  8.     border-radius:5px;
  9.     box-shadow:3px 3px #ddd;
  10.     list-style:none;}
  11. .practice-botton1 li{position:relative;}
  12. .practice-botton2{overflow:hidden;
  13.     position:absolute;
  14.     top:40px;
  15.     left:-32px;
  16.     z-index:10;
  17.     height:0;}
  18. .practice-botton1 li:hover>.practice-botton2{overflow:visible;}

ここで利用されているoverflowプロパティについてまとめます。

指定できる値 ボックスからはみ出した部分の表示方法
scroll スクロールして表示
hidden 表示しない
auto ブラウザ依存。ほとんどの場合スクロール表示
visible ボックスからはみ出して表示。overflowを指定しない場合の初期値。

ドロップダウンメニューを作る際には、このoverflowプロパティをうまく使うのがポイントです。

指定したセレクタがhover状態の時、あらかじめhiddenしておいたセレクタをvisibleするのがポイントです。また、height:0と指定するのもポイントです。

ドロップダウンメニューを作るには他にも初めdisplay:noneを指定してhover状態でdisplay:visibleする方法もありますが動きを指定できないようです。この２つには違いがありますので、それも押さえて使用するといいでしょう。

 

colorはinheritを指定すると、親要素のプロパティの値を強制的に引き継ぎます。inheritは他のプロパティでも指定できることが多いですので覚えておきましょう。

 

cursorはカーソルの状態を指定します。以下のサイトが詳しいです。

cursor - CSS: カスケーディングスタイルシート | MDN

 

ドロップダウンメニューを作る際に、以下のサイトを参考にさせていただきました。

 

 

リンクの下線を消すにはtext-decorationプロパティを使用するといいです。

text-decorationに指定できる値
underline テキストに下線をつける
overline テキストに上線をつける
line-through テキストに打ち消し線をつける
none テキストの線を消す

 

 

簡単になりますが、今回は以上です。

基礎的なことは以前の記事で書いてますので参照してみてください。また時々加筆などもしていきますので、内容が分かりにくかったりすればコメントくだされば嬉しいです。

 

では。

hiroakies.hatenablog.com