ドロップダウンメニューをコピペで簡単に作る方法

ドロップダウンメニューをコピペで簡単に作る方法 CSS
この記事は約3分で読めます。
スポンサーリンク

ドロップダウンメニューをHTMLとCSSとjQueryで簡単実装しよう!

DEMO

下のHTMLとCSSとjQueryをコピーしたらできるよ!
ボタンの色やフォントサイズは好きなように指定してください!

HTML

<div id="dropdown-menu">
 <p>ドロップダウンメニュー</p>
 <ul>
  <li>ドロップダウン1</li>
  <li>ドロップダウン2</li>
  <li>ドロップダウン3</li>
  <li>ドロップダウン4</li>
  <li>ドロップダウン5</li>
  <li>ドロップダウン6</li>
 </ul>
</div>

CSS

#dropdown-menu {
 position:relative;
 font-size: 16px;
 text-align: center;
 width: 230px;
 height: 300px;
 display:block;
}
#dropdown-menu p {
 background: #03b876;
 display:block;
 padding: 12px 0;
 color: #fff;
 cursor: pointer;
}
#dropdown-menu ul {
 position: absolute;
 top: 51px;
 left: 0;
 width: 100%;
 height: 0;
 overflow:hidden;
}
#dropdown-menu li {
 padding: 12px 0;
 display:block;
 background: #eeeeee;
 box-shadow: 0 3px 9px -6px rgba(0,0,0,.8) inset
}
#dropdown-menu li:nth-of-type(even) {
 background: #e2e2e2;
}

jQuery

var menu = $("#dropdown-menu");
menu.on("click", function() {
 if(menu.find("ul").height() == 0) {
  menu.find("ul").animate({height: menu.find("li").length * 51 },400);
 }else{
  menu.find("ul").animate({height: 0},200);
 }
});
SNSフォローボタン
エンデ・バタローをフォローする
CSSHTMLjavascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました