- 締切済み
アコーディオンメニューの記述
スマホ用のホームページを作成している素人です。 ページ内にアコーディオンメニューを入れたいと思っています。 http://triplexxx.jp/archives/150 上記のサイトを参考に1段のメニューは作れました。 もう1段追加して2段にしたいのですが、html、ｃｓｓ、ｊｓ それぞれどうやって記述したらいいかわかりません。 「アコーディオンメニュー 2段」で検索してみたのですが、上記参考ページと全然違うので私には理解できませんでした。 htmlのみ<ul>～</ul>を入れ子にしてみましたがうまくいきません。 どの部分にどういった記述を加えればいいのでしょうか？
- y_kennichi
- お礼率57% (4/7)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
アコーディオンメニューと言う時点で、そのメニューは二階層のリストだと言う事はわかりますよね。 HTMLには文書構造しか書きませんから、単純に <nav> <ol> <li><a href=""></a> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </li> <li> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </li> </ol> </nav> 後方互換を考えると<nav>～</nav>は、<div class="nav">～</div>のほうが良いでしょう。 あとは普通にスタイルシートでデザインするだけです。 [例] ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) のどのスタイルシート(プルダウンと書かれているスタイルシート)を選択しても、スマホで(もちろんパソコン)でも利用できました。 これをゆっくり開くようにするためには、CSS3のtransformを使用すれば良いでしょう。
関連するQ&A
- 【JQuery】アコーディオンの入れ子について
アコーディオンの入れ子（多階層）について、お教えください。 JQueryで入れ子のアコーディオンメニューを作成したいと思っています。 入れ子の数は計3つを予定してます。（第3階層まで） 1～3つ目それぞれのメニューは増減する可能性がある為、出来るだけ数字で割り振ったIDなどは使用せずに表現したいと思っています。（メニューを増やす度にIDが増えるのを止めたい） ■HTMLソース例 <ul class="navi"> <li>第1階層 <ul class="navi-sub"> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> </ul> </li> </ul> 上記のようなHTMLソースで入れ子のアコーディオンを作成することは可能でしょうか？ （ID、CLASSのセレクタの振り方は上記以外でもかまいません） また、最初からアコーディオンメニューの1部分だけ展開した状態にする事は可能なのでしょうか？ （上の質問にも言える事ですが、JavaScriptにこだわっている訳ではないので、CSSでも表現が可能であればCSSでも構いません） JavaScriptがよく分からない為、お教え頂けると大変助かります。 何卒宜しくお願い致します。
- 締切済み
- JavaScript
- アコーディオンメニューについて教えてください
http://hyper-text.org/archives/2006/12/slide_menu_javascript.shtml 上記のURLを参考に縦型アコーディオンメニューを作ったのですが、動きがおかしいのを見つけてしまって困っています。 一瞬だけマウスをメニュー項目にもっていって、「あっ違った。もう一個したのメニューの中身が見たかったんだ」と思い、すぐさま下のメニューにマウスをかざすと、最初に選んだメニューが開きっぱなしになっていることがあります。 これは、直らないものなのでしょうか？ つまり、 menu #01を選んでからすぐにmenu #02にマウスをもってくる。 menu #01のメニューが開いたままになっている。 すごく困っています。 お願いいたします。
- ベストアンサー
- JavaScript
- jQuery アコーディオンメニューについて
jQuery アコーディオンメニューについていくつか質問させていただきます。 当方、はじめてjQueryを使っています。 以下のページを参考にアコーディオンメニューを作成しています。 http://triplexxx.jp/archives/150 <ul class="acc"> <li><a href="1" class="open">category1</a> <ul> <li><a href="#">menu 1-1</a></li> <li><a href="#">menu 1-2</a></li> <li><a href="#">menu 1-3</a> <ul class="fxmn"> <li><a href="#>menu1-3-1</a></li> <li><a href="#">menu1-3-2</a></li> <li><a href="#">menu1-3-3</a></li> </ul> </li> </ul> </li> <li><a href="2" class="open">category2</a> <ul> <li><a href="#">menu 2-1</a></li> <li><a href="#">menu 2-2</a></li> <li><a href="#">menu 2-3</a></li> </ul> </li> <li><a href="3" class="open">category3</a> <ul> <li><a href="#">menu 3-1</a></li> <li><a href="#">menu 3-2</a></li> <li><a href="#">menu 3-3</a></li> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul> var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index !=n) $this.next().hide(); $this.click(function(){ var params = {height:"toggle",opacity:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); (1)：具体的にあげますと、上記のmenu1-3をクリックしてmenu1-3-1、1-3-2、1-3-3のアコーディオン を開き、 1-3-1をクリックしてリンク先に飛んだ際に、直前に開いていたアコーディオンをそのままの状態 にしておきたいというものです。 （↓こんな感じです） category1 ・ menu 1-1 ・ menu 1-2 ・ menu 1-3 ・・ menu1-3-1 ・・ menu1-3-2 ・・ menu1-3-3 category2 category3 教えて！gooの過去の質問を参考させていただきながら、 if(index !=n) $this.next().hide(); で、 n を指定することで、それぞれのサブメニューを開いた状態にすることには成功したのですが、その下の階層のメニューをどのように指定すればよいかがわかりません。 (2)：また、リンク先のページに飛んだ時に、アコーディオン部分は動かないのが望ましいのですが、 可能でしょうか？ （タブのようにページが切り替わる感じが理想的ですが、ページ数が大変多いため難しいとおもっ ています） (3)：(1)、(2)はページごとにscriptを書き換えるのではなく、htmlをいじることで（li タグにclass指定をす るなど）変更するのは可能でしょうか？ 外部scriptが使えればと思っています。 複数の質問になりましたが、どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- アコーディオンメニュー 開いたまま動かない
アコーディオンメニューを設置したく検索をかけサンプルを入手、手直ししながら設置を試みるのですが、サンプルからして「JavaScriptの記述後 bodyが表示されない」、「親メニューはOKだがサブメニューが開かない」などなど、もう手詰まり状態です。 二日かかって下記 URLまでたどり着き正常な位置にきれいに並ぶのですが、私の作っているページ内ではメニューが開いたままの状態です。 http://d.hatena.ne.jp/takahashijunko/20120202/1328189955 「DOCTYPE宣言」、「@charset "UTF-8」の違いなどで私のページ（以下に記述）で使うことは無理なのでしょうか、それとも私はまったく勘違いをしているのでしょうか？ アコーディオンメニューを使える道があるならばご教授ください。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>○○○○○</title> <meta name="description" content="○,○,○,○,"> <meta name="keywords" content="○,○,○,○,,"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style2.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> ・・・・URL先コピペの為省略・・・・ </script> </head> XP Chrom - IE8 - Firefox3.6 にて検証 よろしくお願いします。
- ベストアンサー
- HTML
- アコーディオンメニューの開閉制御
私webデザイナーをしています。 アコーディオンメニューで（開くのは１つのパネルのみ）ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。 しかし、下記のコードでどうしても実装できません。 技術のある方、間違いを教えていただけないでしょうか？ 【ｈｔｍｌ】 <dl class="accordion_dl"> <dt>アコーディオンメニュー.1</dt> <dd>アコーディオンメニュー.1のテキスト表示</dd> <dt>アコーディオンメニュー.2</dt> <dd>アコーディオンメニュー.2のテキスト表示</dd> <dt>アコーディオンメニュー.3</dt> <dd>アコーディオンメニュー.3のテキスト表示</dd> <dt>アコーディオンメニュー.4</dt> <dd> <ul> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> </ul> </dd> </dl> 【JS】 jQueryとjquery.cookie.jsを読み込んでいます。 for (var i=0; i < $(".accordion_dl dt").length; i++) { if( $.cookie("accord" + i) == "open" ) { $(".accordion_dl dt").eq(i).next("dd").show(); } } $('.accordion_dl dt').click(function(){ $(this).toggleClass("open"); $(this).siblings("dt").removeClass("open"); $(this).next("dd").slideToggle(); $(this).next("dd").siblings("dd").slideUp(); n = $(".accordion_dl dt").index(this); if ($.cookie("accord" + n) == "open") { $.cookie("accord"+n,"close", {path:"/"}); } else { $.cookie("accord"+n,"open", {path:"/"}); } }); よろしくお願いいたします。
- 締切済み
- JavaScript
- Jquery アコーディオンについて
知恵袋、Web初心者です。 Jquery / アコーディオンについて質問です。 Jqueryを使って２段のアコーディオンメニューを実装しているのですが、 １つのアコーディオンを押すと他のアコーディオンが閉まる様設定したいです。 現在下記の様に記述しています。 ----------------------------------------- $(document).ready(function(){ $('.accordion').click(function() { $('.accordion').next().slideUp(); $(this).next().slideToggle(); }).next().hide(); }); ---------------------------------------- この記述ですと２段目のアコーディオンを押すと１段目も閉じてしまい、結果的に２段目も見えなくなってしまう、 という状況です。 ２段目だけ機能させる事は可能でしょうか？？ 質問が分かりにくかったら申し訳ありません。 初歩的な質問かも知れませんが、ご教授頂ければ幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQueryのアコーディオンメニュー 開閉の制御
jQueryのアコーディオンメニュー 開閉の制御 こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして （http://triplexxx.jp/archives/150） アコーディオンメニューを設置しました。 ページ遷移後でも、常に一番目のメニューが開いている状態なので、 選択しているページのメニューだけを開いている状態にしたいのですが どの部分を変更したらよいでしょうか？ javascriptの if(index > 0) $this.next().hide(); の部分が開閉の指示をしている箇所かなと思うのですが 新しいコードを書ける知識がないので、教えてください。 よろしくお願いします。 html ---------------------- <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> ---------------------- css ---------------------- ul.acc, ul.acc li ul { margin: 0; padding: 0; list-style: none; } ul.acc a{ display: block; height: 30px; line-height: 30px; color: #feffff; } ul.acc { background-color: #185AAC; } ul.acc li ul { background-color: #A6B5E2; } ---------------------- javascript ---------------------- var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); }); }); }); }); ----------------------
- ベストアンサー
- AJAX
- jQueryアコーディオンで複数メニューを開きたい
jQueryで開閉式（アコーディオン）の縦メニューを作りました。 http://www1.m.jcnnet.jp/minato01/demo/j-menu/ このメニューで、以下の２点の仕様を追加希望です。 １. 「メニュー１」「メニュー２」を最初から開いた状態で表示したい ２.できれば、ページ移動した場合、前の開いた内容を記憶させたい（cookieでOK） 特に「１」は必須事項です。 色々検索してみましたが、方法が色々あっても すべて満たす方法が見つかりません。 ソースは以下の通りです。 -------------------- html -------------------- <span>メニュー 1</span> <ul> <li><a href="#">メニュー 1-1</a></li> <li><a href="#">メニュー 1-2</a></li> <li><a href="#">メニュー 1-3</a></li> </ul> <span>メニュー 2</span> <ul> <li><a href="#">メニュー 2-1</a></li> <li><a href="#">メニュー 2-2</a></li> <li><a href="#">メニュー 2-3</a></li> </ul> <span>メニュー 3</span> <ul> <li><a href="#">メニュー 3-1</a></li> <li><a href="#">メニュー 3-2</a></li> <li><a href="#">メニュー 3-3</a></li> </ul> <span>メニュー 4</span> <ul> <li><a href="#">メニュー 4-1</a></li> <li><a href="#">メニュー 4-2</a></li> <li><a href="#">メニュー 4-3</a></li> </ul> -------------------- css -------------------- ul, li { text-indent: 0; list-style: none; } ul { display: none; } ul.selected { display: block; } span { margin-bottom:1px; padding: 8px 4px; display: block; cursor: pointer; border:1px solid #ccc; } span:before { padding: 0 8px 0 0; vertical-align: middle; content: url("img/bullet_arrow_right.png"); } span.selected:before { content: url("img/bullet_arrow_down.png"); } span:hover,li:hover { background: #f3f3f3; } -------------------- js -------------------- $(function() { $('<img>').attr('src', 'img/bullet_arrow_down.png'); $('span').click(function() { $(this).next('ul').slideToggle('fast'); $(this).toggleClass('selected'); }); }); ※jQueryは「jquery-1.9.0.min.js」を読み込んでいます。 -------------------- 参考サイトは以下のサイトです。 http://php.o0o0.jp/article/4138817358715040 分かる方、ぜひ具体的にどこをどう修正したらよいか 詳しく教えていただければ幸いです。 どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- ページ内リンクでアコーディオンメニューを開くには？
ネットでやり方を調べたのですが、ちゃんとした回答がないようなので質問します。 http://harapeko.wktk.so/blog/blog-web/js-blog-web/2013-02-18/1058 要するに上記のリンクの内容を一つのページ内でやりたいだけなのです。 上部のナビのボタンを押すとずいーっとページ内リンクで下の方に飛んでその項目のアコーディオンメニューが開いて収納されていたコンテンツが出るというような。 上記のリンクの内容をそのまま同じページの中でリンク先だけ変えてやったのですが、うまくできません。飛び先が違うページに飛ぶなら大丈夫なのですが。 自分は初心者なので分かりやすく教えてください。お願いします。
- 締切済み
- JavaScript
- jQueryのアコーディオンメニューについて
下記デモページを参考に同じアコーディオンのメニューを設置したのですが、 デモ http://www.queness.com/resources/html/accordion/index.html 上記サイトのクリックするバーを下記参考サイトの「カテゴリで探す」箇所のように 再度クリックして閉じるようにしたいです。 http://ccm.stylestore.allabout.co.jp/mojo?language=ja 下記スクリプトのどの部分をいじればいいのか、 どなたかお分かりの方がございましたらご教授頂けませんでしょうか。 ■javascript $(document).ready(function () { $('#accordion li').click(function () { //slideup or hide all the Submenu $('#accordion li').children('ul').slideUp('fast'); //remove all the "Over" class, so that the arrow reset to default $('#accordion li > a').each(function () { if ($(this).attr('rel')!='') { $(this).removeClass($(this).attr('rel') + 'Over'); } }); //show the selected submenu $(this).children('ul').slideDown('fast'); //add "Over" class, so that the arrow pointing down $(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over'); }); }); 宜しくお願い致します。
- ベストアンサー
- JavaScript
