- 締切済み
アコーディオンメニュー
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
時間が取れたので、とりあえず語句簡単な例です。 ★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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
関連する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）を使う方法もいまいちわからないので、どなたかご教授お願いします。
- ベストアンサー
- ホームページ作成ソフト
お礼
ご回答いただき、ありがとうございます。 CSS3？の知識が不足？しているようです。きちんと学習したいと思います。