今回のお題はサンプル1のアコーディオンメニューだ。マウスポインタをメニュー項目に重ねると,
サンプル1 CSS3:Accordion menu by rollover
メニューのもとになる静的スタイル
まず,<body>
要素に書くコードの構成だ。アコーディオンメニューは,class
属性が"menu"の<ul>
要素でリストとして組み立てる。メニュー項目をclass
属性"item"の<li>
要素として,<ul>
要素を入れ子にした。サブメニュー項目も<li>
要素で,<a>
要素に加えた。そして,<ul>
要素全体を,class
属性"container"の<div>
要素で包んだ。
<div id="container">
<ul class="menu">
<li class="item">
<a id="menu01"><span>メニュー項目1</span></a>
<ul>
<li><a href="#">サブメニュー項目1</a></li>
<li><a href="#">サブメニュー項目2</a></li>
<!-- サブメニュー項目の<li>要素続く -->
</ul>
</li>
<li class="item">
<a id="menu02"><span>メニュー項目2</span></a>
<ul>
<!-- サブメニュー項目の<li>要素続く -->
</ul>
</li>
<!-- メニュー項目の<li>要素続く -->
</ul>
</div>
メニューの項目のテキストやリンクを加えたのがつぎのコードだ。メニュー項目はふたつ,class
属性"item"の<li>
要素は,id
属性"bottom"の<span>
要素を加えた)。
<div id="container">
<ul class="menu">
<li class="item">
<a id="menu01"><span>リファレンス</span></a>
<ul>
<li><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference" target="_blank">JavaScriptリファレンス</a></li>
<li><a href="https://developer.mozilla.org/docs/Web/CSS/Reference" target="_blank">CSSリファレンス</a></li>
<li><a href="http://semooh.jp/jquery/" target="_blank">jQueryリファレンス</a></li>
</ul>
</li>
<li class="item">
<a id="menu02"><span>gihyo.jp</span></a>
<ul>
<li><a href="http://gihyo.jp/design/serial/01/createjs" target="_blank">CreateJS</a></li>
<li><a href="http://gihyo.jp/design/serial/01/away3d-typescript" target="_blank">Away3D TypeScript</a></li>
</ul>
</li>
<li class="item">
<span id="bottom"></span>
</li>
</ul>
</div>
この<body>
要素の記述に対して,<style>
要素を加える。今のところ,<script>
要素で-prefix-freeを読み込んだ
<script src="lib/prefixfree.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px sans-serif;
}
#container {
margin: 50px auto 0;
width: 200px;
}
.menu {
width: 200px;
list-style: none;
border: 1px solid darkgray;
background: silver;
}
.item {
overflow: hidden;
cursor: pointer;
}
.item a span {
display:block;
padding:10px 10px 10px 20px;
color: black;
}
.item ul li a {
display: block;
padding-left: 20px;
line-height: 30px;
text-decoration: none;
font-size: 14px;
background: white;
color: darkslategray;
}
#bottom {
display:block;
padding:10px 10px 10px 20px;
cursor: default;
}
</style>
メニューに角の丸みと影を加える
アコーディオンメニューを動かす前に,class
属性"menu")<ul>
要素の4つ角は丸めて,border-radius
に角丸の半径,box-shadow
には影の水平・
.menu {
border-radius: 20px;
box-shadow: 0px 4px 10px darkgray;
}
さらに,linear-gradient()
関数だ。引数には,
linear-gradient(to 方向, 始まりの色, 終わりの色)
アコーディオンメニューclass
属性"menu")<ul>
要素のbackground
プロパティは,linear-gradient()
関数に書き替えて,
.menu {
background: linear-gradient(to bottom, whitesmoke, silver)/* silver */;
}