要素の高さを指定するせずにアニメーションがついたアコーディオンを作成するテクニック 『CSS3 Accordion』

WS002979
このエントリーをはてなブックマークに追加
PR

CSS3 Accordion Test (No ‘height: auto’ transition)
By Diego Pardo

DEMO 表示

 

開閉の動作は、CheckBoxやjavascriptを使ったものではなく、focusを使ったのも特徴的

heightの高さの変化をtransitionで変化させたのではなく、marginの方を変化させています

 

このCSSのmargin-top: -100%;と

.acc-panel {
  padding: 1.5em;
  position: relative;
  float: left;
  clear: both;
  margin-top: -100%;
  z-index: 1;
  transition: all 1.2s ease;
}

 

このCSSのoverflow: hidden;がポイント

.accordion > ul > li {
  display: block;
  position: relative;
  margin-bottom: -1px;
  overflow: hidden;
  color: #486992;
  background: #fafafa;
  border: 1px solid #D1D1D1;
}

 

heightも、jQueryのslidToggleも使わずにこういった使い方でアニメーション化出来るのはいいですね

 

コードをダウンロード

DOWNLOAD
PR

COMMENT

  1. makoto

    margin-top:-100% での設定だと
    横に広いコンテンツの場合、
    下に少しはみでてしまいました。
    妙案ありますでしょうか。。

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)