Twitterのヘッダーの、プロフィールアイコンをクリックした後に表示されるドロップダウンメニューのような、他のコンテンツの上に表示されるようなドロップダウンメニューを作りたいです。
・クリックで、クリックしたボタンの下にドロップダウンメニューを表示。
・ドロップダウンメニューを表示している状態で、適当なところをクリックするとドロップダウンメニューを閉じる。
・メニューはTwitterのドロップダウンメニューのように、三角のborderで矢印のように表示させたい。
以上のようにするには、どうすればよいでしょうか?
HTML
1<!DOCTYPE HTML> 2<html lang="ja"> 3<head> 4 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 5</head> 6<body> 7 <header> 8 <div>メニュー内容1</div> 9 <div>メニュー内容2</div> 10 <div><button>メニュー内容3</button></div> <!-- ここをクリックすると --> 11 <div id="dropdownmenu"> <!-- このメニューが表示 --> 12 <ul> 13 <li>ドロップダウンメニュー内容1</li> 14 <li>ドロップダウンメニュー内容2</li> 15 <li>ドロップダウンメニュー内容3</li> 16 </ul> 17 </div> 18 </header> 19 <div id="contents"> 20 <img src="sample.jpg"> 21 </div> 22</body> 23</html> 24
CSS
1header { 2 width: 100%; 3 height: 40px; 4} 5 6header div { 7 float: left; 8 width: 100px; 9} 10 11#dropdownmenu { 12 width: 80px; 13 height: 120px; 14} 15 16#dropdownmenu ul li { 17 width: 80px; 18 height: 40px; 19} 20 21#contents img { 22 width: 100%; 23}
回答2件
あなたの回答
tips
プレビュー