この記事は、完全に自分用の備忘録だ。
WEBプログラミングをしていて、DropDownList風のメニューを作成したくなった。
クリックすると幾つかのメニュー項目が開く。
その項目をクリックすると、それに応じて何らかの処理をする。
例えばツイッターのサイトにあるメニュー。
下図は、ツイッターサイトのメニューの動作をアニメーションGIFにキャプチャしたものだ。
ツイッターのサイトにあるドロップダウンリストなメニュー（アニメーション）
この記事では、ワテがこんな感じのメニューを即席で作成してみた。
では本題に入ろう。
画面の右側にドロップダウンで表示されるメニュー
まず、ワテが作ったメニューのデモをお見せしよう。
上の[メニュー]ボタンをクリックするとDropDownListが表示されるので、好きな項目をクリックすると、それに応じて何らから処理が出来る。
まあ、こんなのは自作しなくても、WEBの世界にはいろんなツールが有るのでそう言うのを組み込めば自動的にドロップダウンリストが作成出来る。
例えばTwitter Bootstrapには、まさにそんなDropDownListが自動生成出来る機能がある。
なので、多分、上で示したTwitterのサイトのメニューはBootstrapの機能で作っているのだろうと思う。
ワテの場合は、ASP.NET MVCでプログラミングする場合にはTwitter Bootstrapが組み込まれているので、必要に応じてBootstrapの各種の便利機能を使っている。
さて、この記事で紹介するワテ流のDropDownListなメニューはJavaScriptとjQueryとCSSを組み合わせて自作したものだ。
ドロップダウンリスト式メニューの全ソースコード
そのソースコードを紹介しよう。
まあ、HTMLの記述は自己流なので、ヘンテコな手法を使っている部分もあるかも知れない。
HTML専門家の人が見ると、突っ込み所も多いと思う。
そう言う場合は、下の方にあるコメント欄からご指摘頂けると有難いです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>2018_02_10_右寄せ</title>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<h3>右寄せメニューのデモ</h3>
<div id="menu_wrapper">
<button id="button">メニュー</button>
<div id="menu">
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
<li>メニュー４</li>
<li>メニュー５</li>
</ul>
</div>
</div>
<div id="box">
</div>
<script>
$('#button').on('click', function (ev) {
$('#menu').toggle();
});
$('#menu ul > li').on('click', function (ev) {
$('#box').text(this.innerText + 'でんがな');
});
</script>
<style>
body {
background-color: antiquewhite;
}
#menu_wrapper{
position:absolute;
top:20px;
right:20px;
background-color:hotpink;
}
#button {
font-size:large;
display: block;
margin-left: auto;
}
#menu {
display: none;
background-color: greenyellow;
border: 2px solid green;
width: 140px;
margin-left: auto;
}
#menu li:hover {
color: green;
}
#menu li:active {
color: magenta;
}
#menu li:focus {
color: darkcyan;
}
#box {
width: 100%;
height: 200px;
background-color: darkgoldenrod;
}
</style>
</body>
</html>
DropDownList風のメニューを表示するソースコード
ワテ流DropDownList風メニューのソースコード説明
まあ、jQueryのtoggleでメニューの表示・非表示を切り替えているだけの簡単な処理だ。
メニューを右寄せで表示したかったのだが、CSSが苦手なワテはその部分で苦労した。
いろんな手法があると思うが、ワテがやったのは以下の通り。
buttonとmenuを囲んでいる div id=”menu_wrapper” を
#menu_wrapper{
position:absolute;
top:20px;
right:20px;
background-color:hotpink;
}
で右に表示している。
HTML要素を右寄せで表示する方法
そのmenu_wrapperの中に入れているボタン(#button)とアンオーダードリスト(#menu)を右寄せで表示している。
#button {
font-size:large;
display: block;
margin-left: auto;
}
#menu {
display: none;
background-color: greenyellow;
border: 2px solid green;
width: 140px;
margin-left: auto;
}
#menuはdiv要素で作っているが、div要素などのブロック要素を右寄せで表示するには、
margin-left:auto;
で出来る。かつ、widthで幅を指定しておく必要がある。もしwidthを指定しないとデフォルトでは 100%幅になっているので要注意だ。
もし中央揃えにしたい場合には margin-leftとmargin-rightをautoにすれば良い。
一方、buttonなどのインライン要素を右寄せで表示するには、その親要素(div#menu_wrapper)に
text-align:right;
を指定すると良い。
あるいは、インライン要素をブロック要素化すれば margin-left:auto; の手法で右寄せが出来る。
上で示したワテのコードの場合には、buttonに以下のように設定してブロック要素化して右寄せにした。
display: block;
これで無事に右寄せメニューが出来た。
後は、JavaScriptとjQueryを組み合わせてonclickなどのイベントハンドラ関数を作成している。
参考：ワテのツイッター記事
ちなみにワテが参考にしたのはツイッターのメニューだが、ワテの投稿記事は以下の通り。
【ワレコの電子回路講座】LTspiceで他社製SPICEモデルを使う【LM317】 https://t.co/9GtSQsJPSG
— wareko (@wareko77) 2018年2月8日
LTspiceなどと言う電子回路好きな人しか使わないツールなので、ツイッターでつぶやいても殆ど反応が無い。
まとめ
この記事では、HTMLページの中に画面右端にボタンを配置して、クリックするとDropDownで開くメニューの作り方を紹介した。
まあ、恐らくもっとスマートで洗練された手法があると思うのだが、ワテの場合にはWEBプログラミングは殆ど独学でやっているので、頓珍漢、ヘンテコ、訳ワカメなコードを書く事も多い。
まあ、プログラムなんて、バグが無しで期待通りに動けば良いと言うのがワテのモットーだ。
つまりまあ、プログラムは手段であって目的では無い。
動けばいいのだ。
本を読む
まあ、良いプログラムを書けるようになる為には、この辺りの有名本は全部読んでおく必要が有るだろう。
ワテの場合、どれも持っていないが図書館で見つけて読みかけたが、途中で挫折した。
あかんがな…
コメント