• 締切済み

アコーディオンメニュー

下記のサイトのようなナビゲーションをつくりたいと考えています。 http://www.art-shinbi.com/ （メインのメニューにロールオーバーすると、サブメニューが透明度を持って表示される） 他に参考になりそうなサイトや、解説ページ、jQueryプラグイン？などがあれば教えてください。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

No.2,No.3です。 　CSS部分だけを少し手を加えてみました。IE8以降、および他のモダンブラウザは問題なく表示できるはずです。 ・ロールオーバー ・サブメニューは半透明 [追加] ・右側のものは左にサブメニュー ・サブサブメニューがあるものは＞が表示される。 ・リキッドなのでスマホのような小さな画面でも横スクロールがいらない ・HTMLには極力デザイン要素がないようにしてあるので、将来木が変わってもデザインは全く変更できる。 このまま、コピーペーストして使えると思います。 ・・・省略・・・・ ＿<style type="text/css"> <!-- html,body{ margin:0;padding:0; background-color:gray; } h1,h2,p{margin:0 auto;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{ width:100%;min-width:480px;max-width:1100px; margin:0 auto; background-color:white; } div.header div.nav{ width:100%;z-index:100;margin-left:2%; } div.header div.nav:after{content:"";clear:left;display:block;} div.header div.nav ul,div.header div.nav ul{ list-style:none; margin:0;padding:0; line-height:1.8em; } div.header div.nav ul li{ text-align:center; position:relative; } div.header div.nav ul li{ width:16%; float:left; } div.header div.nav ul li ul li{ width:100%; float:none; /*border:ridge 2px gray;*/ background-color:rgba(0,0,0,0.4); /* for oldIE */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#64000000', endColorstr='#64000000'); } div.header div.nav ul li ul{ position:absolute; top:1.8em; width:100%; } div.header div.nav ul li ul li ul{ position:absolute;top:0;left:99.5%; } div.header div.nav ul li+li+li+li+li ul li ul, div.header div.nav ul li.backward ul li ul{ top:0;left:-99.5%; } div.header div.nav ul li ul li ul li{ left:-1px;top:-1px; } div.header div.nav ul li+li+li+li+li ul li ul li, div.header div.nav ul li.backward ul li ul li/* for oldIE */{ left:1px; } div.header div.nav ul li ul{ display:none; } div.header div.nav ul li:hover ul{ display:block; } div.header div.nav ul li:hover ul li ul{ display:none; } div.header div.nav ul li:hover ul li:hover ul{ display:block; } div.header div.nav ul li:hover ul li:hover a:before{ content:"＞"; position:absolute; left:-1.5em;top:0; font-weight:bold; color:yellow; } div.header div.nav ul li+li+li+li+li:hover ul li:hover a:before{content:"";} div.header div.nav ul li+li+li+li+li:hover ul li:hover a:after{ content:"＜"; position:absolute; right:-1.5em;top:0; font-weight:bold; color:yellow; } div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;} div.nav ul li ul li a:link{color:aqua;} div.nav ul li ul li a:visited{color:blue;} div.nav ul li ul li a:hover,div.nav ul li ul li a:focus{color:white;background-color:black;} div.nav ul li ul li a:active{color:red;} a[href="/"]{background-color:rgb(255,160,160);} a[href="/1"]{background-color:rgb(255,255,80);} a[href="/2"]{background-color:rgb(160,255,160);} a[href="/3"]{background-color:rgb(80,255,255);} a[href="/4"]{background-color:rgb(160,160,255);} a[href="/5"]{background-color:rgb(255,80,255);} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="/">Home</a></li> ＿＿＿＿<li><a href="/1">第一章</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/1/1">第一章(1)</a></li> ＿＿＿＿＿＿<li><a href="/1/2">・・・【略】・・・</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/2">第二章</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/2/1">第二章(1)</a></li> ＿＿＿＿＿＿<li><a href="/2/2">・・・【略】・・・</a> ＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿<li><a href="/2/2/1">第二章(2)-1</a></li> ＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li><a href="/2/3">第二章(3)</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/3">第三章</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/3/1">第三章(1)</a></li> ＿＿＿＿＿＿<li><a href="/3/2">第三章(2)</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li class="backward"><a href="/4">第四章</a><!-- これ以降はbackward --> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/4/1">第四章(1)</a> ＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿<li><a href="/4/1/1">第四章(1)-1</a></li> ＿＿＿＿＿＿＿＿<li><a href="/4/1/2">第四章(1)-2</a></li> ＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li><a href="/4/2">第四章(2)</a></li> ＿＿＿＿＿＿<li><a href="/4/3">第四章(3)</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li class="backward"><a href="/5">終章</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> 以下、省略

furnace
質問者

お礼

詳細なCSSまでいただきまして、ありがとうございます。 いろいろなやり方をみて、現在制作しているサイトに一番適切な方法を模索しています。 大いに参考にさせていただきます。

全文を見る
すると、全ての回答が全文表示されます。
回答No.4

No1～3は質問への答えになってないので気にしなくていいです。 とりあえず「jQuery アコーディオン」とかプルダウンとかで検索しました？ してればすぐにいくつもサンプルやプラグインや解説サイトがでてきますけど。

furnace
質問者

お礼

ご回答、ありがとうございます。 きちんと自分で十分に調べること無く、質問してしまいました。 この質問のページにも、関連の質問がピックアップされているようですね。 次回からは、できるだけ自力で調べたいと思います。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

HTMLには文書構造しか書いてないので、このように自在にデザインできますし、また将来どのようにデザインをしようとスタイルシートだけ書き直せばよいです。 [参考] 　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )

furnace
質問者

お礼

ご回答いただき、ありがとうございます。 完成されているものから、どの部分をHTMLで、どの部分をCSSで対応すればよいのか、というようなことが、読解できないようです。 きちんと学習したいと思います。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

時間が取れたので、とりあえず語句簡単な例です。 ★IE8以前に対応させるためには、rgba()の代替手段を使う必要があります。 ★480px～1000pxリキッドですからスマホも幅広ディスプレイもＯＫ ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATAでチェック済みのHTML4.01+CSS3(rgbaのみ)です。 ★タブは＿に置換してあるので戻すこと。 　仕組みはとても簡単です。分からないところは仕様書を調べること。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.header,div.section,div.footer{width:100%;min-width:480px;max-width:1000px;background-color:white;} div.header div.nav{width:100%;z-index:100;} div.header div.nav:after{content:"";clear:left;display:block;} div.header div.nav ul,div.header div.nav ul{ list-style:none; margin:0;padding:0; line-height:1.8em; } div.header div.nav ul li{ text-align:center; position:relative; } div.header div.nav ul li{ width:15%; float:left; } div.header div.nav ul li ul li{ width:100%; float:none; border:ridge 2px gray; background-color:rgba(0,0,0,0.6); } div.header div.nav ul li ul{ position:absolute; top:1.6em; width:100%; } div.header div.nav ul li ul li ul{ position:absolute;top:0;left:100%; } div.header div.nav ul li ul{ display:none; } div.header div.nav ul li:hover ul{ display:block; } div.header div.nav ul li:hover ul li ul li{ display:none; } div.header div.nav ul li:hover ul li:hover ul li{ display:block; } div.header div.nav ul li:hover ul li ul:before{ content:"＞"; position:absolute; left:-1.5em; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="/">Home</a></li> ＿＿＿＿<li><a href="/1">第一章</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/1/1">第一章(1)</a></li> ＿＿＿＿＿＿<li><a href="/1/2">第一章(2)</a></li> ＿＿＿＿＿＿<li><a href="/1/3">第一章(3)</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/2">第二章</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/2/1">第二章(1)</a></li> ＿＿＿＿＿＿<li><a href="/2/2">第二章(2)</a> ＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿<li><a href="/2/2/1">第二章(2)-1</a></li> ＿＿＿＿＿＿＿＿<li><a href="/2/2/2">第二章(2)-2</a></li> ＿＿＿＿＿＿＿＿<li><a href="/2/2/3">第二章(2)-3</a></li> ＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li><a href="/2/3">第二章(3)</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/3">第三章</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/3/1">第三章(1)</a></li> ＿＿＿＿＿＿<li><a href="/3/2">第三章(2)</a></li> ＿＿＿＿＿＿<li><a href="/3/3">第三章(3)</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/4">第四章</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/4/1">第四章(1)</a></li> ＿＿＿＿＿＿<li><a href="/4/2">第四章(2)</a></li> ＿＿＿＿＿＿<li><a href="/4/3">第四章(3)</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/5">終章</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>ここに・・・・・・・・・・・・・・・・・・・・・・・本文記事が入る。</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-07-16</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

furnace
質問者

お礼

ご回答いただき、ありがとうございます。 CSS3？の知識が不足？しているようです。きちんと学習したいと思います。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

現在は単純にスタイルシートで指定するほうが良いでしょう。 rgba(0,0,0,0.5)に対応していれば単純ですし、IE7,IE8にも対応させる方法もあります。 HTMLは単純に <div class="nav"> 　<ul> 　　<li><a href=""></a></li> 　　<li><a href=""></a> 　　　<ul> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ul> 　　</li> 　　<li><a href=""></a> 　　　<ul> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ul> 　　</li> 　　<li><a href=""></a> 　　　<ul> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ul> 　　</li> 　</ul> </div> HTML5でしたら <nav> 　<ul> 　　<li><a href=""></a></li> 　　<li><a href=""></a> 　　　<ul> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ul> 　　</li> 　　<li><a href=""></a> 　　　<ul> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ul> 　　</li> 　　<li><a href=""></a> 　　　<ul> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ul> 　　</li> 　</ul> </nav> でしょう。

furnace
質問者

お礼

ご回答いただき、ありがとうございます。 知識が不足し過ぎているせいか、とても難易度が高そうな印象を持ってしまいますが、チャレンジしてみたいと思います。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 飛び出すメニューについて

    http://www.ex-yz.com/labo/flash/2007/05/2.html これのような、マウスオーバーで下位項目が出てくるというメニューをFlashで作りたいと考えています。 このサンプルでは飛び出す最大の範囲までFlashの領域として確保されていますが、 通常ヘッダーなどに置いた場合、そんなに下が開いている事はあり得ないと思うので 最初から表示されている部分（メインメニュー）のみを初期のFlashの領域とし、 飛び出たサブメニュー部分は下のhtmlに被らせるような状態で作りたいと思うのですが、 これはどうすれば実現できるのでしょうか？ Flashとhtmlだけではできないのでしょうか。 あと、Flashで作られたこういうロールオーバーでサブが出てくるようなメニューで 何かかっこいいサイトや効果的な使い方をされているような 参考になるサイトがあれば教えてください。 Javascriptでも作れるような、ただ降りてくるだけのものではなく Flashならではというものを色々見てみたいので。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • アコーディオンメニューにすると下部がずれます。

    jQueryを使用してアコーディオンメニューを作成しています。 イメージとしてはこのサイトのようにしたいと考えています。 http://inkd.com/ しかしながらこちらのソースをベースに作ってみているのですが http://blog-imgs-48-origin.fc2.com/j/q/u/jqueryintro/accordion.html この方法で横に設置しようとすると、縦にアコーディオンするのに合わせて コンテンツ全体が下がってしまう状況が生じています。 参考サイトのように、アコーディオンしてもメインコンテンツが動かない仕様に したいのですがご教示頂けないでしょうか？ 何卒よろしくお願いいたします。

  • Flashでプルダウンメニューを

    1.メニューにマウスが通過した際、サブメニューが表示される 2.メニュー・サブメニューからマウスが離れるとサブメニューが隠れる といったプルダウンメニューを作成したいのですが、 下記の方法だと一度現れたサブメニューが隠れて（元に戻って）くれません。 3フレーム目に何かアクションを入れなければいけないのかと思うのですが・・・ ■1フレーム目 ボタンシンボル（メインメニュー）に下記アクション ------------------------------------- on (rollOver) { gotoAndStop(2); } ------------------------------------- アクションレイヤー ------------------------------------- stop(); ------------------------------------- ■2フレーム目 メインメニューとサブメニュー（メインメニューにロールオーバーした際に出てくるメニュー）を 配置 サブメニューに下記オブジェクトアクションを挿入 ------------------------------------- on (press) { getURL("http://www.●●●.com"); } ------------------------------------- アドバイスいただけると助かります。どうぞお願い致します。

    • ベストアンサー
    • Flash
  • 横ナビのスライドナビゲーションの名称について

    横ナビでマウスオーバーするとナビゲーションがスッと出てくるjQueryのプラグインを探しています。 下記サイトの左のナビゲーションです。 http://www.livesense.co.jp/company/logo.htm こちらの名称はなんというのでしょうか。 / / / / / / / / / / / / / / / / 横ナビ　アコーディオンや 横ナビ　プルダウンのように色々と検索したのですが、ヒットしませんでした。 スマホみたいなメニューひとつで横スライドするナビではありません。 例 http://git.blivesta.com/drawer/

    • ベストアンサー
    • CSS
  • 動きのあるプルダウンメニューをFLASHで作成しているのですがうまくいきません

    かれこれ１週間以上、FLASHで動きのあるプルダウンメニューを作成しようとしているのですが、希望の動きができずに困っています。 メインで５項目、そのうちひとつにロールオーバーで３項目のサブメニューを出したいのですが、 ●ロールオーバーでサブメニューが出てくる（ムービー）。 ●メインメニューとサブメニューを合わせたヒット領域からロールアウトでサブメニューが引っ込む（ムービー）。 ●メインのその他のメニューにマウスオーバーすると上記サブメニューが引っ込む。 ●サブメニューにマウスオーバーすると色味が変わり、リンクへ飛べる。 上記４項目をすべて満たす動きができません...。ロールオーバー/アウトの設定はできてもサブメニューの色味が変わらなかったり。サブメニューを持つメインメニューや、他のメインメニューにマウスオーバーするたびに、サブメニューが開いたり。 動きのないプルダウンメニューはできるので、サブメニューが出てくるムービーの扱い方の問題だとは思うのですが... 検索して調べたのですが、なかなか同条件の質問が見つからず、なかなかわかりにくい説明だとは思いますが、お分かりになる方、お教えください。

  • ナビゲーションのスライド移動

    http://portfolio.css-eblog.com/ 上記サイトのように、ページ遷移する際にナビゲーションの位置がスライドしながら 移動する仕組みをjQueryで作りたいです。 何か参考になるソースやプラグインはないでしょうか？

  • auのナビゲーションの動きをするJquery

    auのWebサイト http://www.au.kddi.com/ こちらのメインイメージ下のナビゲーションと 同じような動きをするJqueryプラグインを探しております。 マウスオンでメニューが下に展開して、カーソルを他のボタンに移動させると 切り替わり、吹き出しのような三角も追従する 丸×ボタンを押すと消える プラグインで良いのがありますでしょうか。 どうぞ宜しくお願い致します。

  • FLASHのドロップダウンメニューのサンプルがDLできるサイト

    FLASHでドロップダウン（メインの文字にロールオーバーすると、サブメニューが出てくるようなもの）のサンプルがダウンロードできるサイトを探しています。 できれば、高度なものではなく、ごく簡単なもの、なおかつできれば説明が記載されてるようなサイト、教えてください。

  • マウスオーバーでゆっくり出る縦型アコーディオンメニューの作り方を教えてください。　

    マウスオーバーで、ゆっくり開くアコーディオンメニューを作成したいと考え色々、調べたのですがなかなかしっくりくるものがなくて困っています。 そこで、以下のサイトのドロップダウンメニューを改良してアコーディオンとして使えたらいいなと考え、自分なりにかまってみたのですが、上手くいきません。 参考サイト：http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/ どなたか助言をよろしくお願いいたします。

  • flash作成ソフトSuzukaについて

    Suzukaにてドロップダウンメニューをつくっています。 http://okwave.jp/qa/q5530131.html こちらを参考につくっていたのですが、こちらの質問ではサブメニューがボタンですが、アニメーションのあるスプライトでも可能なのでしょうか？ サブメニューをロールオーバーで画像変換、クリックでgeturlと設定しています。 メインをロールオーバーでサブメニューを出すところまでは出来たのですが、 サブメニューがくっついていない為、メインからロールアウトした状態になってしまって困っています。 上記の説明では、サブメニューを囲むように透過された画像を配置すればロールアウトした状態にならないと書いているのですが、いまいちうまくいきません。 当たり判定（Hitarea）を使う方法もいまいちわからないので、どなたかご教授お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する