2014.11.20
css

CSSだけで動きのあるアコーディオン・メニュー 改訂版

CSSだけで動きのあるアコーディオンのメニューです。
以前こちらに書いたのですが、ヨロズナさんから素晴らしいアドバイスをいただきましたのでソースを改訂しました。

css043

CSSだけで動くアコーディオンメニュー 改訂版

jQuery並みのアコーディオンメニューです。
マウスオーバーでアニメーションで動きます。
カスタマイズしやすいように超シンプルなソースにしました。

HTMLソース

<div id="menu_box">
  <ul class="menu">
   <li><a href="#">メニュー1</a>
      <ul>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
      </ul>
   </li>
   <li><a href="#">メニュー2</a>
      <ul>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
      </ul>
   </li>
   <li><a href="#">メニュー3</a>
      <ul>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
      </ul>
   </li>
   <li><a href="#">メニュー4</a></li>
  </ul>
</div>

htmlのソースは特に難しいことはしていません。

CSSソース

.menu {
   margin: 0;
   padding: 0;	
}
.menu li {
   list-style: none;
   font-weight:bold;
   width: 170px;
}
.menu li a {
   display: table;
   margin-top: 1px;
   padding: 16px 10px;
   width: 100%;
   background: #ADC653;
   text-decoration: none;
   text-align: left;
   color:#5B6F25;
   overflow: hidden;
}
.menu li ul {
   margin: 0;
   padding: 0;
}
.menu li li a {
   display: block;
   margin-top: 0;
   padding: 0 10px;
   height: 0;
   background: #dcd3b2;
   color: #9e9478;
}
.menu > li:hover li a {
   display: table;
   margin-top: 1px;
   padding: 16px 10px;
   width: 100%;
}
.menu * {
   -moz-transition: .5s;
   -webkit-transition: .5s;
   -o-transition: .5s;
   -ms-transition: .5s;
   transition: .5s;
}

今回のCSSのポイントは

display: table;

です。

私は今回初めて使いましたが、うまく使えるようになるとデザインの幅が広がりそうなプロパティと値の組み合わせです。
2カラム、3カラム、4カラムなどのデザインにしたときに、カラムの高さを自動的に揃えてくれます。

親要素に

display: table;

を指定して、子要素に

display:table-cell

を使うと子要素の高さが揃うのでカラムデザインにうまく取り入れることができそうです。

関連する記事

コメント & トラックバック
  1. 石川

    こんにちわ、
    とても素敵でシンプルなメニューですね!!このサブメニューをさらに入れ子にすることは可能でしょうか?


  2. eric

    いつも勉強させて頂いてます。
    こちらはオンマウスで自動的に開くようですが、
    クリックで開くようにすることは可能でしょうか?

    お忙しい中申し訳ないですが返答よろしくお願い致します。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP