プロが教えるわが家の防犯対策術！

アコーディオンメニュー

締切済

  • 質問者：furnace
  • 質問日時：
  • 回答数：5件

下記のサイトのようなナビゲーションをつくりたいと考えています。
http://www.art-shinbi.com/
（メインのメニューにロールオーバーすると、サブメニューが透明度を持って表示される）

他に参考になりそうなサイトや、解説ページ、jQueryプラグイン？などがあれば教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5

  • 回答者： ORUKA1951
  • 回答日時：

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>
以下、省略
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2013/07/20 14:53

No.4

No1～3は質問への答えになってないので気にしなくていいです。


とりあえず「jQuery アコーディオン」とかプルダウンとかで検索しました？
してればすぐにいくつもサンプルやプラグインや解説サイトがでてきますけど。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

次回からは、できるだけ自力で調べたいと思います。
ありがとうございました。

通報する
お礼日時：2013/07/17 14:12

No.3

  • 回答者： ORUKA1951
  • 回答日時：

HTMLには文書構造しか書いてないので、このように自在にデザインできますし、また将来どのようにデザインをしようとスタイルシートだけ書き直せばよいです。


[参考]
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2013/07/17 14:11

No.2

  • 回答者： ORUKA1951
  • 回答日時：

時間が取れたので、とりあえず語句簡単な例です。


★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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2013/07/17 14:08

No.1

  • 回答者： ORUKA1951
  • 回答日時：

現在は単純にスタイルシートで指定するほうが良いでしょう。


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>
でしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2013/07/17 14:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報