20行目〜 アコーディオンメニューが開いている時は、この後のjQueryで「on」クラスを付与し、アイコンを変えてわかりわすくします。 そうそう食べ歩きもね。 カスタマイズできる部分だけ抜粋して記述しますので 触りたい部分があれば、各コードから探してみてください＾＾ カスタマイズはもちろん、CSSコードの方を触ります。 多段構造によるMulti-level Accordion 多段構造によるアコーディオンメニューです。 メニュー1 サブメニュー1 サブメニュー2 メニュー2 サブメニュー1 サブメニュー2 CSS チェックボックスに、チェックがついているときはサブメニューを非表示にして、チェックがついていないときは表示するというのが、このアコーディオンメニューの基本的な挙動になります。 siblings '. 「＋」「－」で切り替わる動作が美しい。
次の
シンプルなデザインも、開閉時に変化する矢印がスタイリッシュ。 acod-head. world! これでアイコンの切り替えができました。 立体感があるPure HTML and CSS Accordion メニュークリック後の要素に立体感があり、あまり例を見ない使い方です。 もっと早く作っておけばわざわざ ブログの記事を再編集する手間もなくなるのに… そう思いつつも、他の記事を優先してしまい。 最近の投稿• See the Pen by Rima Gerhard on. ちょっとだけ面倒かもしれませんが コードを増やすたびに数字を打ち変えるだけなので あなたにも簡単にできると思います。
次の
See the Pen Pure CSS Horizontal Accordion by Aysha Anggraini rrenula on CodePen. next '. 少し開閉状態が分かりにくいところがありますが、デザインとして美しいです。 transformを適用した要素がどのように変形するのか、transformで使用するプ[…]• find ". またメニューリストの余白を無くしたことでリスト左の黒ポチが背景色からはみ出して表示します。 5s ease; transition: all 0. slideUp ; noTargetAccordion. アコーディオンの開閉で親項目のデザインが変化するスタイリッシュなアコーディオンメニュー。 アイコンで入力内容のカテゴライズがわかりやすいですし、入力フォームのデザインなどを考える上で非常に参考になりますね。 acc-btn. open-5:not :first '. fa,. fp-accordion. WordPressとWeb関係のことを趣味的に学んでます。 sample-accordion. アコーディオン3 内容が入ります。
次の
これで1個目のアコーディオンメニューと2個目のアコーディオンメニューは、それぞぞれのボタンをクリックすることで別々にメニューリストが開閉できるような作り方ができます。 on 'click', '. 4のサンプルを変更して閉じるボタンを追加し、ボタンクリックで閉じることができます。 ただし、右端の矢印の部分がメニュー開閉に合わせて反転する動きになってます。 Contents• find ". 当たり前ですがクラス名が多いので一致してるかを確認。 See the Pen by Vladimir Gashenko on. CSS・JSありアコーディオン例5 次はアコーディオンの展開にアニメーション機能を持たせたタイプです。 展開した時に左側のマークが開店するところが面白いギミックですね。 本記事ではフォームの中でも「アコーディオンメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
次の
企業系サイトでは、情報量の多いコンテンツをアコーディオン内にしまってスマートに見せるのが良いでしょう。 open-4'. HTMLソース アコーディオン1 内容が入ります。 CSSの隣接セレクタでチェックボックスにチェックがついているかいないかで、コンテンツの表示・非表示のスタイルを変更する CSSの擬似クラス :checkedと、隣接セレクタを使います。 CSSでアイコンを切り変えるために、「toggleClass」で「on」を付け外しします。 35s; transition: max-height. しかし最近はシンプル性も重要なのでこの辺りはユーザビリティに応じた選択となるかもしれません。 アコーディオンボタンの表示・非表示は HTMLコードに書かれているものに対して CSSコードでアクションを起こさせるのですが… HTMLもCSSコードもそれぞれ1種類ずつしかありません。 accordion. HTMLソース アコーディオン1 内容が入ります。
次の
本項では後者のタイプをまとめています。 09 CSSでtransformの使い方を理解したいと思いました。 accordion'. dropdown. こちらはちょっと独特なカラーのアコーディオンですがスムーズに動きます。 fp-accordion. See the Pen by Mike St on. acc-default. contentWrap" ; if targetContentWrap. アコーディオン3• CSSの＋セレクタと同じで、隣り合っているすぐ直後の要素に適用することができます。 カスタマイズしたい方は… 「レッツ TRY! アコーディオン自体が開いたエリアと一体化。
次の
jQuery ; 上記コードとjQueryファイルの読み込みが必要です。 icons. クリックで開く1 hello. 珍しいデザインが目を引く。 fp-accordion. ですのでよりシンプルに、jQueryで直接アコーディオンメニューの開閉操作をしていきます。 3s ease-in; -o-transition: height 0. もしもクリックして、アコーディオンボタンが 「あれ？ちゃんと動かない」と思った時は コードの打ち変えを忘れていないか確認してみてくださいね。 switch". button menu-one menu-two menu-three button menu-one menu-two menu-three と言っても一つ目の作り方さえ覚えてしまえば簡単です。 fp-accordion. 35s; transition: max-height 0. JSを読み込ませるのは決して難しい事ではありませんし、jQueryはWordpressサイトであればデフォルトで読み込まれます。 CSS. 目次型？。
次の