締切済み

アコーディオンメニュー

2013/07/15 13:46

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

furnace
お礼率90% (128/141)

JavaScript
回答数5
ありがとう数5

みんなの回答 （5）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/07/17 16:58 回答No.5

No.2,No.3です。　CSS部分だけを少し手を加えてみました。IE8以降、および他のモダンブラウザは問題なく表示できるはずです。・ロールオーバー・サブメニューは半透明 [追加] ・右側のものは左にサブメニュー・サブサブメニューがあるものは＞が表示される。・リキッドなのでスマホのような小さな画面でも横スクロールがいらない・HTMLには極力デザイン要素がないようにしてあるので、将来木が変わってもデザインは全く変更できる。このまま、コピーペーストして使えると思います。・・・省略・・・・＿<style type="text/css">  ＿</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> ＿＿＿＿＿<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> 以下、省略

質問者

お礼 2013/07/20 14:53

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

ログインすると、全ての回答が全文表示されます。

play_with_you
ベストアンサー率37% (112/301)

2013/07/16 15:13 回答No.4

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

質問者

お礼 2013/07/17 14:12

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

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/07/15 20:17 回答No.3

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

質問者

お礼 2013/07/17 14:11

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

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/07/15 20:13 回答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">  ＿</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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

お礼 2013/07/17 14:08

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

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/07/15 14:38 回答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> でしょう。

質問者