ドロップダウンメニュー

ドロップダウンメニューとは

adiary公式サイトの上部で使用している可動式メニューです。

メイン部にも配置できますが、ヘッダーに配置されることが多いかと思います。

HTML構造

<div class="dropdown-menu" data-module-name="dem_ddmenu,1" id="dem-ddmenu1">
<ul>
	<li><a href="/">トップページ</a>
	<ul>
		<li><a href="/about.html">adiaryについて</a></li>
		<li><a href="/download.html">ダウンロード</a></li>
		<li><a href="/tools.html">関連ツール</a></li>
	</ul>
	</li>
	<li><a href="/v3man/">マニュアル</a></li>
	<li><a href="/etc">その他</a>
	<ul>
		<li><a href="https://github.com/nabe-abk/adiary">Githubリポジトリ</a></li>
		<li><a href="http://adiary.blog.abk.nu/">adiary開発日誌</a></li>
		<li><a href="/links.html">リンク集</a></li>
		<li><a href="/donate.html">寄付</a></li>
	</ul>
	</li>
</ul>
</div>

見てわかる通り、HTMLソースはごく普通のリストです。
最大3段のリスト入れ子に対応しています。
ドロップダウンの仕組みはbase.cssで記述されています。
文字の大きさや高さ、要素の幅はデザイン編集から変更できます。
- デフォルトの高さや幅をどうしても変更したい時は base.css を参考にしてください。

テーマからは配色だけ設定してあげれば通常は十分です。

ドロップダウンメニューの配色サンプル

色々と内部的に複雑な機構がありますので、配色変更時はこのまま丸コピーしてください。*1

/*--------------------------------------------------------------------
●ドロップダウンメニュー（配色カスタマイズ）
---------------------------------------------------------------------*/
/* 背景色（非選択色） */
.dropdown-menu,
.dropdown-menu>ul li {
	background-color:	#ccccff;
}
/* 選択色 */
.dropdown-menu>ul li:hover,
.dropdown-menu>ul li.hover {
	background-color:	#f0f0ff;
}
/* 枠線 */
.dropdown-menu>ul li {
	border-color:		#aac;
}
/* 文字 */
/*
.dropdown-menu a:link,
.dropdown-menu a:visited
{
	color:			#33f;
}
*/
/* 矢印の色 */
.dropdown-menu li ul li ul:before,
.dropdown-menu.sp li ul:before {
	border-left-color:	#338;
}
.dropdown-menu:not(.sp) li:last-child:not(:first-child) ul li ul:before {
	border-left-color:	transparent;
	border-right-color:	#338;
}

/* 設定画面に矢印の色を自動取得させるための指定 */
.dropdown-menu {
	color:			#338;
}
/* 枠線を消す（必ず3項目必要） */
/*
.dropdown-menu>ul li {
	border:			none;
}
.dropdown-menu:not(.sp)>ul ul ul {
	margin-top:	-1px;
}
.dropdown-menu:not(.sp)>ul>li a {
	height:			100%;
}
*/
/* 影をつける */
/*
.dropdown-menu>ul li:hover ul,
.dropdown-menu.sp>ul>li>ul {
	box-shadow:		8px 8px 8px rgba(0,0,0, 0.3);
}
*/