シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー
CSS3のアニーメーションエフェクトであるtransitionを使って、CSSだけでjQueryのように動きのあるドロップダウンメニューを作ってみましたのでソースを紹介します。
いろいろと応用できるように、できるだけシンプルなソースにしました。
HTMLソース
<div class=”menu”>
<ul>
<li><a href=”#”>Menu 01</a>
<ul>
<li><a href=”#”>Sub menu 01</a></li>
<li><a href=”#”>Sub menu 02</a></li>
<li><a href=”#”>Sub menu 03</a></li>
</ul>
</li>
<li><a href=”#”>Menu 02</a>
<ul>
<li><a href=”#”>Sub menu 01</a></li>
<li><a href=”#”>Sub menu 02</a></li>
<li><a href=”#”>Sub menu 03</a></li>
<li><a href=”#”>Sub menu 04</a></li>
<li><a href=”#”>Sub menu 05</a></li>
</ul>
</li>
<li><a href=”#”>Menu 03</a>
<ul>
<li><a href=”#”>Sub menu 01</a></li>
<li><a href=”#”>Sub menu 02</a></li>
</ul>
</li>
<li><a href=”#”>Menu 04</a></li>
</ul>
</div>
HTMLのソースは特別なことはしていません。
CSSで表示を整えています。
CSSソース
.menu ul { margin:0;
padding:0;}
.menu ul li { list-style: none;
margin:0;
padding:0;
font-size:14px;
float: left;
position: relative;
width: 150px;/*親メニューの幅*/
height: 40px;/*親メニューの高さ*/
line-height: 40px;
background:#FF818D;/*親メニューの背景色*/
color: #4D4D4D;/*親メニューの文字色*/
text-align:center;
font-weight:bold;}
.menu ul li a {color: #4D4D4D;
display: block;
text-decoration: none;}
.menu ul li:hover, .menu ul li a:hover { background:#EA2839;/*ホバー時の親メニューの背景色*/
color:#fff;/*ホバー時の親メニューの文字色*/}
.menu ul li ul { position: absolute;
top: 40px;/*親メニューの高さと同じにする*/
width: 150px;
z-index: 100;}
.menu ul li ul li { visibility: hidden;
overflow: hidden;
width: 150px;/*サブメニューの幅*/
height: 0;
background:#FFDAD7;/*サブメニューの背景色*/}
.menu ul li ul li:hover, .menu ul li ul li a:hover { background:#FFAFA9;/*ホバー時のサブメニューの背景色*/}
.menu ul li:hover ul li, .menu ul li a:hover ul li { visibility: visible;
overflow: visible;
height:40px;/*サブメニューの高さ*/
z-index: 10;}
.menu * { -webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;}
CSSもかなりシンプルにしたつもりですがソース意外と長いですね。
では簡単な解説です。
5行目～28行目・・・親メニューについて
29行目～50行目・・・サブメニューについて
51行目～57行目・・・*は.menu内の全ての要素に適応するという意味です。ここではアニメーションを指定しています。
知っていると便利なマメ知識！
上記のCSSソースの13行目と14行目に注目です。
13行目はliの高さです。14行目はliのline-heightです。
この値を同じにすると、liの中に文字を入れる場合、上下の中心に文字がきます。
（ただし1行のみの場合）
参照HP：「http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/」
参考HP:「http://www5e.biglobe.ne.jp/~komichan/css/htmlCSS_dropdownlist_H1.html」
「http://shanabrian.com/」
「http://chihochu.jp/52643993/」
「http://weboook.blog22.fc2.com/blog-entry-408.html」
コメント