アコーディオンメニューでテキストを変更させる | ブログ - Blog | 佐藤純平 - Jumpei Sato
アコーディオンって音いいですよね。 この前結構近い距離でライブ見たんですが、音が良すぎて、違う世界にいきそうでした。 音圧が全然違いました。あとあの独特の波感。 今回はWeb制作におけるアコーディオンメニューについてです。 メニューの実装の際に、割とよく使用すると思います。 アコーディオンメニューが開いたときと閉じたときにそれぞれのテキストを変更させる ボタンに画像を使用しているとCSSスプライトが使えますが、テキストにしている場合はもちろん使えないので、jQueryを使用して動的に変えちゃいましょう。スマートフォンで使用するのが多いかもしれません。 HTMLは下記です。 「btn」を押すと「contents」がスライドするようにします。 それに加えてアコーディオンメニューが開いたときに「btn」内のテキストを「CLOSE」にしたいと思います。 HTML <a href="" class=
jQuery 多階層アコーディオンメニュー | 私的雑録
$(function () { // 親メニュー処理 $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').slideToggle('fast'); }); // 子メニュー処理 $('li').click(function(e) { // メニュー表示/非表示 $(this).children('ul').slideToggle('fast'); e.stopPropagation(); }); }); <span>メニュー 1</span> <ul> <li>メニュー 1-1 <ul> <li>メニュー 1-1-1 <ul> <li><a href="#">メニュー 1-1-1-1</a></li> <li><a href="#">メニュー 1-1-1-2</a></li> <li><a href="#">メニュー
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要 | 9ineBB
jQueryを使うと簡単にアコーディオンを実装する事が出来るのですが、CSSでもアコーディオンの作成が可能です CSSだけでアコーディオンを作成 HTML コード <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> <label for="Panel12">ボタン2</label> <input type="checkbox" id="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者にも分かる！なアコーディオンの作り方
