HTMLとCSSのホームページメニューの問題
- HTMLとCSSでホームページを作成し、左サイドメニューバーに関する問題が発生しています。
- メニューバーの変更には全HTMLファイルの編集が必要で、手間とミスのリスクがあります。
- 良い解決策があれば教えてください。
- ベストアンサー
HTMLとCSSのホームページのメニューについて
HTMLで過去に作った経験がほんのちょっとだけありますが、フレームは良くないという話もあり、 またCSSたどあとで全HTMLファイルに対してちょっとの変更でデザイン変更できるということで 今回初めてHTMLとCSSでホームページを作りました。 HTMLはまあこんな感じです。 <body> <div id="contener"> <div id="contents"> <h1>内容だよ</h1> <div id="main"> <p>内容１だよ<br> 内容１ですよ。内容１だって言ってるよ。 </p> </div> </div> </div> <!--左サイドメニューバー（回り込み）--> <ul> <li><a href="index.html">TOPページ</a></li><br> <li><a href="naiyou1/naiyou1.html">naiyou1</a></li> <li><a href="naiyou2/naiyou2.html">naiyou2</a></li> <li><a href="naiyou3/naiyou3.html">naiyou3</a></li> <li><a href="naiyou4/naiyou4.html">naiyou4</a></li> </ul> </body> で今困っているのが「左サイドメニューバー（回り込み）」以下で左にメニューバーを設置しているのですが、 コンテンツを増やすたび”全部のHTMLにリンク１行追加しなければいけない”ということです。 <li><a href="naiyou5/naiyou5.html">naiyou5</a></li> とか。 数ページだったらなんてことないのですが、２０ページ以上になると手間ですし、ミスも出てきます。 こんなものなのでしょうか？ いい知恵があれば教えてください。
- denza
- お礼率80% (647/806)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
質問内容から、テキストエディタを使われているようです。 でしたら、置換で行えばよいです。たとえばEmEditor( http://jp.emeditor.com/ )でしたら [検索する文字列] ^\t\t\t\t<li><a href="naiyou4/naiyou4.html">naiyou4</a></li> [置換後の文字列] ^\t\t\t\t<li><a href="naiyou4/naiyou4.html">naiyou4</a></li>\n\t\t\t\t<li><a href="naiyou4/naiyou4.html">naiyou4</a></li> として [ファイルの種類] html [検索するフォルダ] d:\homepage として、「下位フォルダーも対象にする。」をチェック、「変更したファイルを開いたままにする」のチェックを外して[検索ボタン]を押せば一瞬で終わります。 また、サーバーでSSIが許可されていれば、そのような各ページに共通する部分はSSIを使うことも出来ます。(SSIは標準拡張子が.shtmlですが、.htmlでもSSIとして動作するよう設定可能です。またPHPでも同様なことが可能です。) ★補足・・せっかくエディタを使われるなら <body> <div class="article"> <div class="header"> <h1>内容だよ</h1> </div> <div class="section"> <h2>本文</h2> <p>内容１だよ</p> <p>内容１ですよ。内容１だって言ってるよ。</p> <div class="nav"> <ul> <li><a href="index.html">TOPページ</a></li> <li><a href="naiyou1/naiyou1.html">naiyou1</a></li> <li><a href="naiyou2/naiyou2.html">naiyou2</a></li> <li><a href="naiyou3/naiyou3.html">naiyou3</a></li> <li><a href="naiyou4/naiyou4.html">naiyou4</a></li> </ul> </div> </div> </div> </body> のほうが望ましいです。 [HTML4.01] DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) この部分がまったく理解されなくて、<div id="contener">,<div id="contents">,<div id="main">のようなマークアップが続けられた反省から [HTML5]では 「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」が追加されました。 header,section,navなどは、ひとつのページ内に何度も登場する可能性がありますから、idじゃまずいですね。
その他の回答 (2)
- tkmojo
- ベストアンサー率50% (105/207)
考え方としては2パターンあります。 【A】メニューだけのファイルを管理する 【B】更新時に全ファイルを置換する 【A】の場合は、特別なソフトや知識が必要ですが、管理が楽です。 【B】の場合はフリーソフトで十分ですが、ミスがあると大変。 【A】の場合は、さらに以下のような方法があります。 1. Dreamwerverのテンプレート機能を使う 少々高価なソフトですが、共通部分を一つのファイルで管理できるので便利。 2. CMSを使う WordpreeやMovableType等のブログシステム（コンテンツマネジメントシステム）は 各パーツごとに管理するので複数ファイルを更新する必要はありません。 無料のテンプレートが沢山公開されているので、ささっと作るには便利ですが、 好きにデザインするには難易度が高いです。 3. SSIを使う サーバーが対応している必要があり、設定も必要ですが、 特別なソフトが必要なく実現可能です。 こういう所で勉強してみてもいいかも。 http://www.tohoho-web.com/wwwssi.htm 【B】の場合は、1の方が挙げているようなEmEditorをはじめ、 複数ファイルを一括置換するフリーソフトを使用する事になりますが、 置換時にミスがあると全ファイルおかしくなり、ミスの内容によっては元に戻すのが困難な場合もあります。 また個別ファイルを更新時に、スペースや改行具合が変わるだけで置換に対応しなくなります。 意外と管理に気を使うので、【A】の方法をとれない場合に例外的に用いるのが良いかと思います。
お礼
ちょっと忙しくなってしまい、遅くなりました。 Dreamwerver買うようなページじゃないんですよね。 ページ構成工夫してみます。 そもそもなに使っても（フリーで）上手くいかなかったので、最終的にテキストエディターになったわけで。。。 選択肢参考になりました。
- utilityahd
- ベストアンサー率15% (24/160)
あなたがおっしゃられる通り、フレームを使わずにHTMLとCSSだけでHPを作ると、こういった苦労がついて回ります^^ その点、フレームを利用すると一度の修正だけで済むので楽ですよね。 しかし結局、双方ともに長短所があるので、あなたのHPの目的を考えて使い分けられたらいいと思いますよ。
お礼
＞HTMLとCSSだけでHPを作ると、こういった苦労がついて回ります^^ これが普通だということが認識できました。どうおもです。
関連するQ&A
- ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- CSSによるレイアウトが崩れてしまう現象について
Adobe Dreamweaver CS4にて、ヘッダー、TOPメニュー、SIDEメニュー、コンテンツ、フッターというよくある構成でHPを作成しております。 レイアウトを組んでみたところ、Firefox4ではキチンと表示してくれるのですが、Internet Explorer6では、左メニューがやや右ズレをおこし、右のmainコンテンツが下に回りこんでしまうという現象となってレイアウトが崩れてしまいます。 もうひとつ、右mainの下の「株式会社●●」を右寄せに指定しているハズなんですが、どうしても左になってしまい、指定がきいてくれません。 この2つ原因がわからずに困っております。 お教えいただけませんでしょうか。よろしくお願い致します。 <body> <div id="page"> <!---ヘッダーここから-------------> <div id="header"> <div id="header_title"></div> <div id="header_info">TOPコメント…</div> </div> <!---ヘッダーここまで-------------> <!---TOPメニューここから----------> <div id="topmenu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="services.html">SERVICES</a></li> <li><a href="services.html">PRODUCTS</a></li> <li><a href="contact.html">CONTACTS</a></li> <li><a href="contact.html">help</a></li> </ul> </div> <!---TOPメニューここまで----------> <!---左メニューここから----------> <div id="left"> <div id="leftmenu"> <ul> <li><a href="index.html">Category1</a></li> <li><a href="company.html">Category2</a></li> <li><a href="company.html">Category3</a></li> <li><a href="company.html">Category4</a></li> </ul> </div> </div> <!---左メニューここまで----------> <!---メインここから--------------> <div id="main"> <div id="midashi"> <h2>CONTACTS</h2> </div> <div id="contents"> <p> </p> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 <br /> <br /> </p> <table width="500" bordercolor="#66CCCC" border="0" cellspacing="0" cellpadding="0"> <tr> <th bgcolor="#FFFFDF"> <p><span class="tx12pt_ore">サンプルテキスト。</span><br /> </p> <ul> <li>・サンプルテキスト</li> <li>・サンプルテキスト</li> <li>・サンプルテキスト<br /> </li> </ul></th> </tr> </table><br /> <br /> <span class="tx12pt_ore">【サンプルテキスト】</span><br /> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 </p> <br /> <span class="txtright">株式会社●●</span> </div> <!---ページトップここから------------> <div id="pagetop_back"> <a href="#top"> <img src="../all_img/mpage-top.gif" alt="ページトップへ" width="100" height="20" border="0" /> </a> </div> <!---ページトップここまで------------> </div> <!---フッターここから------------> <div id="footer"> <div id="copyright"> <h3>このページは、株式会社●● が運営しています。<br /> Copyright(c) ～～～～Ltd Institute. All Rights Reserved. </h3> </div> <ul> <li><a href="#">サンプルメニュー1</a></li> <li><a href="#">サンプルメニュー2</a></li> <li><a href="#">サンプルメニュー3</a></li> </ul> </div> </div> <!---フッターここまで------------> </div> </body> ≪CSS≫ #page { width: 780px; margin-right: auto; margin-left: auto; background-image: url(all_img/page.gif); } #header { width: 740px; height: 80px; margin-right: auto; margin-left: auto; background-image: url(all_img/header.gif); } #topmenu { width: 740px; height: 40px; margin-right: auto; margin-left: auto; background-image: url(all_img/topmenuber.gif); background-repeat: no-repeat; } #left { width: 178px; height: 1300px; float: left; margin-left: 20px; background-image: url(all_img/sideback.gif); background-repeat: repeat; } #main { float: right; height: auto; padding: 0; background-color: #FFF; width: 560px; margin-top: 20px; margin-right: 20px; } #contents { width: 500px; height: auto; margin-left: 30px; } #contents .txtright { color: #033; text-align: right; } #footer { width: 740px; height: 80px; clear: both; margin-left: auto; margin-top: 0px; margin-right: auto; }
- 締切済み
- CSS
- 左メニューをCSSで固定したい
左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。 固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。 これをフレームを使わずに作ることはできないでしょうか？ できればカクカクしないようなメニューが作りたいです。 ■■■■■■■■■■■■■ ■menu ■ main ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■■■■■■■■■■■■■ ・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる ・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール 【HTML】 <div id="main"> メインの内容 </div> <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> ・・・・（26項目） </ul> </div> 【css】 #main{ float:right; } #menu{ width:160px; position:fixed; _position:absolute; top:30px; left:0px; }
- ベストアンサー
- HTML
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- 練習でHTMLを作っています
HPを作っているのですがメニューコンテンツの画像が表示されませんでした。 どうしたら表示されるようになるのか教えていただけないでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content=text/html; charset=Shift_JIS> <title>猫の飼い方・育て方</title> <link rel="stylesheet" type="text/css" href="neko_index.css" </head> <body> <div id="container"> <div id="header"> <h1>猫を飼うためには</h1> </div><br> <div class="PR1"><!--PR1--> <img src="image/PR.gif"alt="PR"> <a href=""> </a></div> <!--PR1--> </div> <div id="contents"> <h4>このサイトの主旨</h4> 職業訓練の一環として練習のためにweb製作をしている。参考として色々な猫に関するサイトのいいところを参照させていただいている。 多々文章が類似している箇所があると思いますがご容赦ください。今のところあくまでも練習のためのサイトです。</p> <h4>飼い主と我が家の猫紹介</h4> <ul> <li>まめたろう・・・山形県在住 30才・男 アトピー・花粉症・鼻炎持ち元小児喘息患者。病弱だった為に動物を飼うことが間々らなかったが大人になったため自己責任の名のもとに猫を飼い始めて猫主夫になる。</li><br> <li>ノアくん・・・美形・性格おとなしくてやさしいおにーちゃん。里親サイトで譲っていただいた雑種猫♂</li><br> <img src="image/top_noha.jpg"alt="ノアくん写真"width="600" height="350"vspace="10"> <a href=""></a> <br> <li>春ちゃん・・・美醜猫系・足長・耳たれのアメショ＆マンチカンMIX♀のマンチカン。里親サイトで譲っていただいた。耳たれ具合からして大本の血筋はスコテッシュ不フィールドだと思う。</li> <img src="image/top_haru.jpg"alt="春ちゃん写真"width="600" height="350"vspace="10"> <a href=""></a> </ul> <br></div> <div id="menu"> <div id="image"> <ul> <li>メニュー</li> <li><a href="contents/neko_wo_kauhouhou.html"><img src"image/menu_nav1.gif"alt="猫の里親になろう"width="100"height="50">猫を飼う方法</a></li> <li><a href="contents/.html"> 猫の里親になろう！</a></li> <li><a href="contents/.html">子猫の飼い方</a></li> <li><a href="contents/.html">猫のお手入れ</a></li> <li><a href="contents/.html">猫の体のしくみ</a></li> <li><a href="contents/.html">猫の病気</a></li> <li><a href="contents/.html">猫の習性</a></li> <li><a href="contents/.html">猫の気持ち</a></li> <li><a href="contents/.html">去勢と避妊</a></li> <li><a href="contents/.html">猫の種類</a></li> <li><a href="contents/.html">猫に芸を覚えさせよう</a></li> </ul> </div> </div> <!--PR--> <div id="menu under PR"> <img src="image/PR.gif"alt="PR"> <a href=""> </a></div> <!--PR--> <div id="footer"> <ul> <li><a href="contents/.html">home <li><a href="contents/.html">猫を飼う方法</li></a> <li><a href="contents/.html">猫の里親になろう！</li></a> <li><a href="contents/.html">子猫の飼い方</li></a> <li><a href="contents/.html">猫のお手入れ</li></a> <li><a href="contents/.html">猫の体のしくみ</li></a> <li><a href="contents/.html">猫の病気</li></a> <li><a href="contents/.html">猫の習性</li></a> <li><a href="contents/.html">猫の気持ち</li></a> <li><a href="contents/.html">去勢と避妊</li></a> <li><a href="contents/.html">猫が妊娠したら</li></a> <li><a href="contents/.html">猫の種類</li></a> <li><a href="contents/.html">猫に芸を覚えさせよう</li></a></li> <div align="center"> <br>Copyright(C) 猫の飼い方・育て方.All right Reserved. </div> </div><!--これはfooterの終止タグ--> </div><!--これはcontainerのdiv--> </body> </html> ｃｓｓ #menu { background-color:#191970; line-height:1.5; width:200px; padding:10px 0; } #menu ul{ background-color:#191970; margin:0; padding:0 10px; width:180px; line-height:1.5; } #menu li{ background-image:url(image/menu_background.gif); margin:0; padding:0; margin-left:0px; list-style: none; } a:link { color:#0000cc; text-decoration: none; } #contents{ background-image:url(image/contents_background-img.jpg); line-height: 1.5; width:650px; float:right; margin-left:20px; margin-bottom:20px; padding-top:30px; padding-bottom:30px; padding-left:20px; padding-right:20px; } #footer{ width:900px; font-size:10px; float:right; } #footer ul{ width:900px; margin:0; padding:0; text-align:center; } #footer li{ list-style:none; display:inline; }
- ベストアンサー
- ホームページ作成ソフト
- mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい
javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして 単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、 2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）
- ベストアンサー
- JavaScript
- フレームメニューでリンク先を展開して表示させる
はじめて投稿します。よろしくお願いします。 フレームページで、左にメニュー、右にコンテンツです。 右コンテンツ内はtoggleで項目ごとに展開・折りたたみの設定をしており 初期値はdisplay:none;を指定しています。 左メニューのリンクをクリックすると、右コンテンツの該当箇所に移動して 中身を展開して表示させたいです。 ＜左メニュー(menu.html)＞ <ul> <li><a href="a.html#title1" target="right"></li> <li><a href="b.html#title2" target="right"></li> ・ ・ ・ </ul> ＜右コンテンツ(a.html)＞ <script> $(function(){ $("#list li div:nth-child(1)").addClass("title"); $("#list li div:nth-child(2)").addClass("content"); $(".title").click(function(){ $(this).next().toggle(300); }); }); </script> <ul id="list"> <li> <div id="title"> <p> <h4> <a name="title1"> タイトル1</a> </h4> </p> </div> <div id ="content" style="display:none;"> <p> あああああああああああああああああああああああ </p> </div> </li> </ul> javascriptなのかjqueryなのか、CSS3でもできるのか・・ なるべく簡単な方法がいいのですが 知識が乏しく、色々と試しましたが結果が出ずに悩んでいます。 アドバイスいただけないでしょうか。
- ベストアンサー
- JavaScript
- 複数トリガーで動作するアコーディオンメニュー
お世話になります。 シングルページでページ内リンクでコンテンツ移動するタイプのページ作成を現在やっているのですが、急に標題の内容の要望が急ぎ対応として来まして、困っております。 具体的に言うと、 通常アコーディオンメニューは、 隠してある部分の見出しなんかをトリガーにして、開閉して内容を表示・非表示させると思いますが、今回要望としてあるのは、 グローバルナビもそのトリガーにしたいということです。 グローバルナビをクリックすると、該当箇所に移動しつつ、普段見出しだけで内容が隠してあるものも展開されるということができればと思っております。 参考までにコードを記載しておきます。 js部分 //accordion $('#sub01 h4').click(function() { $(this).toggleClass("open").next("div").slideToggle(); }).next().hide(); // drop down $("#nav li.drop").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); }); }); <div id="nav"> <ul class="clear"> <li><a href="#menu1">メニュー１</a></li> <li class="drop"><a href="#menu2">メニュー２<span>▼</span></a> <!-- InstanceBeginEditable name="planList" --> <ul> <li><a href="#sub01">サブ1</a></li> <li><a href="#sub02">サブ2</a></li> </ul> <!-- InstanceEndEditable --> </li> <li><a href="#menu3">メニュー3</a></li> <li><a href="#menu4">メニュー4</a></li> </ul> </div> ------省略-------------- <div id="sub01" class="subcontent"> <h4><span>項目名</small></span></h4> <div class="sub01Inner clear"> 内容内容内容</div><!-- /planInner --> </div><!-- /planBox -->
- 締切済み
- JavaScript
- 展開メニューの修正
展開メニューの修正 をしています。 menu.js------------------------ function block(id){ if(document.getElementById){ if(document.getElementById(id).style.display == "none"){ document.getElementById(id).style.display = "block"; }else if(document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; } } } html--------------------------- <div onMouseOut="block('block1')"> <div onMouseOver="block('block1')"><a href="***">コンテンツ名</a></div> <div id="block1" style="display: none;"> <ul> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul></div></div> 「コンテンツ名」に触った時展開して、サブコンテンツor「コンテンツ名」から離れた時にサブコンテンツを閉じる、という挙動まではできているのですが、 サブコンテンツのメニュー間を移動する際にちらつくというかいちいち閉じてしまうのを直したいのですが、どうしたらいいのでしょうか？ よろしく御教授ください。
- ベストアンサー
- JavaScript
お礼
回答どうもです。 おっしゃるとおり、EmEditorです。 なんかできそうですね。貴重な情報および補足までありがとうございます。 ちょっと数日間出かけるので、帰ったら早速試してみます。