- 締切済み
アコーディオンメニュー
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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> 以下、省略
関連する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 この方法で横に設置しようとすると、縦にアコーディオンするのに合わせて コンテンツ全体が下がってしまう状況が生じています。 参考サイトのように、アコーディオンしてもメインコンテンツが動かない仕様に したいのですがご教示頂けないでしょうか？ 何卒よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 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で作りたいです。 何か参考になるソースやプラグインはないでしょうか？
- ベストアンサー
- JavaScript
- auのナビゲーションの動きをするJquery
auのWebサイト http://www.au.kddi.com/ こちらのメインイメージ下のナビゲーションと 同じような動きをするJqueryプラグインを探しております。 マウスオンでメニューが下に展開して、カーソルを他のボタンに移動させると 切り替わり、吹き出しのような三角も追従する 丸×ボタンを押すと消える プラグインで良いのがありますでしょうか。 どうぞ宜しくお願い致します。
- 締切済み
- JavaScript
- FLASHのドロップダウンメニューのサンプルがDLできるサイト
FLASHでドロップダウン（メインの文字にロールオーバーすると、サブメニューが出てくるようなもの）のサンプルがダウンロードできるサイトを探しています。 できれば、高度なものではなく、ごく簡単なもの、なおかつできれば説明が記載されてるようなサイト、教えてください。
- ベストアンサー
- グラフィックソフト
- マウスオーバーでゆっくり出る縦型アコーディオンメニューの作り方を教えてください。
マウスオーバーで、ゆっくり開くアコーディオンメニューを作成したいと考え色々、調べたのですがなかなかしっくりくるものがなくて困っています。 そこで、以下のサイトのドロップダウンメニューを改良してアコーディオンとして使えたらいいなと考え、自分なりにかまってみたのですが、上手くいきません。 参考サイト：http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/ どなたか助言をよろしくお願いいたします。
- 締切済み
- JavaScript
- flash作成ソフトSuzukaについて
Suzukaにてドロップダウンメニューをつくっています。 http://okwave.jp/qa/q5530131.html こちらを参考につくっていたのですが、こちらの質問ではサブメニューがボタンですが、アニメーションのあるスプライトでも可能なのでしょうか？ サブメニューをロールオーバーで画像変換、クリックでgeturlと設定しています。 メインをロールオーバーでサブメニューを出すところまでは出来たのですが、 サブメニューがくっついていない為、メインからロールアウトした状態になってしまって困っています。 上記の説明では、サブメニューを囲むように透過された画像を配置すればロールアウトした状態にならないと書いているのですが、いまいちうまくいきません。 当たり判定（Hitarea）を使う方法もいまいちわからないので、どなたかご教授お願いします。
- ベストアンサー
- ホームページ作成ソフト
お礼
詳細なCSSまでいただきまして、ありがとうございます。 いろいろなやり方をみて、現在制作しているサイトに一番適切な方法を模索しています。 大いに参考にさせていただきます。