JavaScriptでメニュー一括更新 | アドバイス・記述教えてください

このQ&Aのポイント
  • JavaScriptを使用して、ページを増やしてもメニューを一括更新できる方法についてアドバイスをお願いします。
  • 現在のメニューは各ページごとに書かれており、ページが増えるたびに更新が煩雑になっています。JavaScriptを使って一括更新できるようにする方法を教えてください。
  • メニューの更新に時間がかかってしまうため、JavaScriptを使って効率的に一括更新する方法を教えてください。
回答を見る
  • ベストアンサー

メニューをJavaScriptで一括更新させたい

いつもお世話になっております。 ページが増えてしまったので、 横並びのメニューをjavaScriptで一括更新できるようにしたいのですが、 JavaScriptが勉強不足でうまく記述できません。(これから勉強していくつもりです) 今回は急ぎのため時間がなく… どうかアドバイス等、記述を教えていただけないでしょうか? 宜しくお願いいたします。 現在メニューはこのように1ページごと書いてあります。 <div id="globalnavi"> <ul> <li id="menu1"><a href="#">Home</a></li> <li id="menu2"><a href="#">menu</a></li> <li id="menu3"><a href="#">menu</a></li> <li id="menu4"><a href="#">menu</a></li> <li id="menu5"><a href="#">menu</a></li> <li id="menu6"><a href="#">menu</a></li> <li id="menu7"><a href="#">menu</a></li> </ul> </div> CSS↓----------------------------------------------- #globalnavi{ margin: 0; padding: 0; width: ***; height: 40px; } #globalnavi ul{ list-style-type: none; margin: 0; padding: 0; } #globalnavi li{ text-indent: -9999px; float:left; width: 100px; margin: 0; padding: 0; } #globalnavi a{ display: block; width: 100%; height: 40px; background-image: url(画像のパス); background-repeat: no-repeat; } #menu1 a{background-position: 0 0;} #menu2 a{background-position: -100px 0;} #menu3 a{background-position: -200px 0;} #menu4 a{background-position: -300px 0;} #menu5 a{background-position: -400px 0;} #menu6 a{background-position: -500px 0;} #menu7 a{background-position: -600px 0;} #globalnavi a:hover{ background-image: url(画像のパス); background-repeat: no-repeat; } #menu1 a:hover{background-position: 0 -40px;} #menu2 a:hover{background-position: -100px -40px;} #menu3 a:hover{background-position: -200px -40px;} #menu4 a:hover{background-position: -300px -40px;} #menu5 a:hover{background-position: -400px -40px;} #menu6 a:hover{background-position: -500px -40px;} #menu7 a:hover{background-position: -600px -40px;}

質問者が選んだベストアンサー

  • ベストアンサー
  • y3k
  • ベストアンサー率61% (16/26)
回答No.1

●HTMLファイル <div id="globalnavi"> <ul> <li id="menu1"><a href="#">Home</a></li> <li id="menu2"><a href="#">menu</a></li> <li id="menu3"><a href="#">menu</a></li> <li id="menu4"><a href="#">menu</a></li> <li id="menu5"><a href="#">menu</a></li> <li id="menu6"><a href="#">menu</a></li> <li id="menu7"><a href="#">menu</a></li> </ul> </div> ↓へ置き換えましょう。*.jsは任意のファイル名を指定してください。 <script type="text/javascript" src="*.js"></script> ●JavaScript(ファイル名:*.js) document.write("<div id=\"globalnavi\">"); document.write("<ul>"); document.write("<li id=\"menu1\"><a href=\"#\">Home</a></li>"); document.write("<li id=\"menu2\"><a href=\"#\">menu</a></li>"); document.write("<li id=\"menu3\"><a href=\"#\">menu</a></li>"); document.write("<li id=\"menu4\"><a href=\"#\">menu</a></li>"); document.write("<li id=\"menu5\"><a href=\"#\">menu</a></li>"); document.write("<li id=\"menu6\"><a href=\"#\">menu</a></li>"); document.write("<li id=\"menu7\"><a href=\"#\">menu</a></li>"); document.write("</ul>"); document.write("</div>"); こうしておけばメニューを変更する際は、*.jsを変更するだけでいいはずです。

hanadori22
質問者

お礼

御礼が遅くなり大変申し訳ありません。 教えていただいたコードでばっちり再現できました! blankも簡単に設定できて、わかりやすく書いていただいて本当に助かりました。 本当にありがとうございます!

関連するQ&A

  • 後付けでドロップダウンメニューを作りたい

    現在画像で作った横並びのナビゲーションメニューがあります。 そこへマウスポントすることでドロップダウンのメニュー(出来れば半透明)を追加したいのですが うまくいきません。 既存のコードは以下の通りです。 --------------------------------------------------------------------- 【css】 #globalnavi{ margin: 0; padding: 0; width: 994px; height: 50px; background-image: url(../image/button/button-bg.png); background-repeat: no-repeat; } #globalnavi ul{ list-style-type: none; margin: 0; padding: 0; } #globalnavi li{ text-indent: -9999px; float:left; width: 142px; margin: 0; padding: 0; } #globalnavi a{ display: block; width: 100%; height: 50px; background-image: url(../image/button/button.png); background-repeat: no-repeat; } #menu1 a{background-position: 0 0;} #menu2 a{background-position: -142px 0;} #menu3 a{background-position: -284px 0;} #menu4 a{background-position: -426px 0;} #menu5 a{background-position: -568px 0;} #menu6 a{background-position: -710px 0;} #menu7 a{background-position: -852px 0;} #globalnavi a:hover{ background-image: url(../image/button/button.png); background-repeat: no-repeat; } #menu1 a:hover{background-position: 0 -50px;} #menu2 a:hover{background-position: -142px -50px;} #menu3 a:hover{background-position: -284px -50px;} #menu4 a:hover{background-position: -426px -50px;} #menu5 a:hover{background-position: -568px -50px;} #menu6 a:hover{background-position: -710px -50px;} #menu7 a:hover{background-position: -852px -50px;} 【html】 <nav id="globalnavi"> <ul> <li id="menu1"><a href="menu1.html" title="メニュー1">メニュー1</a></li> <li id="menu2"><a href="menu2.html" title="メニュー2">メニュー2</a></li> <li id="menu3"><a href="menu3.html" title="メニュー3">メニュー3</a></li> <li id="menu4"><a href="menu4.html" title="メニュー4">メニュー4</a></li> <li id="menu5"><a href="menu5.html" title="メニュー5">メニュー5</a></li> <li id="menu6"><a href="menu6.html" title="メニュー6">メニュー6</a></li> <li id="menu7"><a href="menu7.html" title="メニュー7">メニュー7</a></li> </ul> </nav> --------------------------------------------------------------------- どうぞ宜しくお願い致します。

  • 【CSS】float横並びメニューに余白ができてしまいます

    リストをfoat:leftさせ横並びのメニューを作っています.下記画像の赤枠の幅に(包含されているdivのボーダーを赤線にしています)メニューをぴったり収めたいのですが,左右に余白ができてしまいます. いろいろネット等で調べてみましたが原因がわかりません.ご教授よろしくおねがいします. ------CSSソース----------------------------------------------------- /*グローバルナビゲーション */ .globalnavi{ width:770px;   height:30px;   margin:0;   padding:0; border:1px solid #cc0000; } .gloabalnavi ul{ height:30px; margin:0; padding:0; background:#ffffff; list-style:none; } .globalnavi li{ float:left; margin:0; padding:0; } .globalnavi span{ display:none; } .globalnavi a{ height:30px; display:block; background-repeat:no-repeat; } li#m1{ width:154px; background-image:url(../image2/menu1.gif); background-position:0px -30px; } li#m1 a{ background-image:url(../image2/menu1.gif); } li#m1 a:hover{ background-image:none; } li#m2{ width:154px; background-image:url(../image2/menu2.gif); background-position:0px -30px; } li#m2 a{ background-image:url(../image2/menu2.gif); } li#m2 a:hover{ background-image:none; } li#m3{ width:154px; background-image:url(../image2/menu3.gif); background-position:0px -30px; } li#m3 a{ background-image:url(../image2/menu3.gif); } li#m3 a:hover{ background-image:none; } li#m4{ width:154px; background-image:url(../image2/menu4.gif); background-position:0px -30px; } li#m4 a{ background-image:url(../image2/menu4.gif); } li#m4 a:hover{ background-image:none; } li#m5{ width:100px; background-image:url(../image2/menu5.gif); background-position:0px -30px; } li#m5 a{ background-image:url(../image2/menu5.gif); } li#m5 a:hover{ background-image:none; } ------------------------------------------------------------------ -----HTML ソース-------------------------------------------------- <div class="globalnavi"> <ul> <li id="m1" title="研究室紹介へのリンク"><a href="#"><span>大学紹介</span></a></li> <li id="m2" title="スタッフへのリンク"><a href="#"><span>スタッフ</span></a></li> <li id="m3" title="研究設備へのリンク"><a href="#"><span>研究設備</span></a></li> <li id="m4" title="アーカイブへのリンク"><a href="#"><span>アーカイブ</span></a></li> <li id="m5" title="外部リンクへのリンク"><a href="#"><span>リンク</span></a></li> </ul> </div><!--div globalnavi finish--> ------------------------------------------------------------------

    • ベストアンサー
    • HTML
  • リスト横並びのメニューのアンドロイドでの隙間

    スマホ用のメニューを作成しています。 とりあえず、シンプルなメニューを作っているのですが、viewportを入れると画面を横に回転した際に右端に余白が生じてしまいます。 ぴったり収まるように20%ずつ5つのメニューとしています。 解決する方法はあるでしょうか? <style> body{ margin:0; padding:0; } .globalnavi{ margin: 0; padding: 0; width: ***; } .globalnavi ul{ list-style-type: none; width: 100%; margin: 0 auto; padding: 0; } .globalnavi li{ float: left; width: 20%; margin: 0; padding: 0; } .globalnavi a{ text-align: center; display:block; padding: 0.5em 0; width: 100%; background-color: black; color: white; } .globalnavi a:hover{ background-color: red; color: white; } </style> <nav> <ul class="globalnavi"> <li><a href="#">Home</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> </ul> </nav>

    • 締切済み
    • CSS
  • jqueryでのプルダウンメニューについて

    jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示(CSSでやってます)です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか? html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。

  • IE6で見るとメニューバーが崩れてしまいます

    ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }

  • グローバルナビの画像のサイズ変更方法

    グローバルナビのサイズ指定をして大枠のwidthを1000pxにして、ひとつひとつのナビのサイズを200px×5で調節して1000pxでナビ同士の横の隙間を無くすように合わせたいです。 自分なりにやってみたのですが、どうしてもわかりません。 プログラミングをどのように変更すれば良いのでしょうか。よろしくお願いします。 html部分 <div id="globalnavi"> <nav> <ul> <li><a href="#" class="home">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#">Portfolio</a></li> <li><a href="#"><span>Contact</a></li> </ul> </nav> </div> css部分 #globalnavi{ height:36px; width:1000px; margin-top:0px; margin-bottom:5px; background-color:white; } #globalnavi ul{ list-style-type:none; margin:0; padding:0; margin-top:1px; margin-bottom:4px; } #globalnavi li{ float:left; width:200px; height:20px; margin-bottom:10px; margin-top:5px; margin:0px; padding-left:10px; } #globalnavi a{ text-align:center; display:block; padding-top:8px; padding-bottom:15px; margin-bottom:-1px; width:160px; background-image:url(images/btn046_06.gif); background-repeat:no-repeat; color:blue; } #globalnavi a.home{ width:160px; background-image:url(images/btn046_05.gif); } #globalnavi a:hover{ background-image:url(images/btn046_10.gif); }

    • ベストアンサー
    • CSS
  • 幅違うメニュー(リスト)、floatで横並びで背景画像でテキスト飛ばしたいが・・

    お世話になります。 メニュー(リスト)のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。 マウスオーバーすると、画像がかわるようにしたいです。 どうか、何が問題なのか、教えてくださいませ。 ★メニューのwidthは、全てちがいます。 ★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。  マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。 ★リストは、横並びにしたい。 【HTML】 <div id="gNavi"> <ul> <li id="01"><a href="#">メニュー1</a></li> <li id="02"><a href="#">メニュ-2</a></li> <li id="03"><a href="#">メニュ-3</a></li> <li id="04"><a href="#">メニュ-4</a></li> <li id="05"><a href="#">メニュ-5</a></li> <li id="06"><a href="#">メニュ-6</a></li> </ul> </div> 【CSS】 #gNavi { width:513px; height:14px; } #gNavi ul{ list-style: none; margin: 0; padding: 0; height: 14px; overflow: hidden; } #gNavi li { float:left; margin:0; padding:0; } #gNavi li a{ display:block; height:100%; width: 100%; height: 0 !important; height /**/: 14px; background:url(../images/gNavi/gNav.gif) no-repeat; text-decoration:none; text-indent:-7777px; } #gNavi li a:hover{ background:url(../images/gNavi/gNav_ov.gif) no-repeat; } #gNavi li#01 a{ background-position: 0 0; width: 52px; } #gNavi li#02 a{ background-position: -52px 0; width: 71px;} #gNavi li#03 a{ background-position: -123px 0; width: 105px;} #gNavi li#04 a{ background-position: -228px 0; width: 93px;} #gNavi li#05 a{ background-position: -321px 0; width: 93px;} #gNavi li#06 a{ background-position: -414px 0; width: 99px;} #gNavi li#01 a:hover { background-position: 0 0;} #gNavi li#02 a:hover { background-position: -52px 0;} #gNavi li#03 a:hover { background-position: -123px 0;} #gNavi li#04 a:hover { background-position: -228px 0;} #gNavi li#05 a:hover { background-position: -321px 0;} #gNavi li#06 a:hover { background-position: -414px 0;} (何か、他に必要な情報があれば、言ってください!)

    • ベストアンサー
    • CSS
  • ロールオーバーで画像がずれない方法

    初めてWebサイトを作成しており、今はグローバルナビゲーションを作成していますが、ロールオーバーしたときに、位置が微妙にずれてしまいます。 ちなみに画像の作成は、フォトショップCS6で次のように作成しました。 (1)カンバスサイズを、幅800px、縦60pxで作成 (2)長方形ツールを使い、境界線ありの画像を5つ作成し、手動で横に整列させる。 ※一つ当たりのサイズは幅160px、縦30pxなので、全体の幅は800、縦30です。 (3)ロールオーバー用の画像のために、上記5つのボタンを複製し、色を変える (4)通常表示用とロールオーバー用の画像を、手動で上下に連結させる ※これで幅800px、縦60pxになったので、カンバスサイズと同じサイズになりました。 (5)手動にて連結した画像をカンバスサイズの位置に合わせる (6)テキストツールで会社概要など5つ作成し、上5つの画像の中心に合わせる (7)上5つにある会社概要などの文字を一括コピーする。 (8)一括コピーした文字を、手動で下5つの画像の中心へ合わせる ※大変でしたが、グリッド機能を使って、調整しました。 以上のような流れで全体のグローバルナビゲーションのボタンを作成し、そして次の用にHTMLとCSSを入力したのですが、ロールオーバーした時に、ボタンも文字も微妙にすれてしまいます。 フォトショップの使い方が悪いのか、HTMLとCSSの使い方が悪いのか、どちらなのかわかりません。 いろいろな方からご教示を頂きたいです。本当にお願い致します!! <!-- /以下HTML --> <ul id="globalnavi"> <li id="menu1"><a href="#"></a></li> <li id="menu2"><a href="#"></a></li> <li id="menu3"><a href="#"></a></li> <li id="menu4"><a href="#"></a></li> <li id="menu5"><a href="#"></a></li> </ul> <!-- /以下CSS --> #globalnavi { margin: 0; padding: 0; } #globalnavi li { width: 160px; height: 30px; float:left; text-align: center; line-height: 3.5; margin:0; padding-left:0; } #globalnavi a { float:left; display: block; text-decoration: none; width: 160px; height: 30px; background-image: url(./img/menu-all.gif); background-repeat: no-repeat; margin:0; padding-left:0; } #menu1 a { background-position: 0px 0px; } #menu2 a { background-position: -160px 0px; } #menu3 a { background-position: -320px 0px; } #menu4 a { background-position: -480px 0px; } #menu5 a { background-position: -640px 0px; } #globalnavi a:hover { text-decoration: none; background-image: url(./img/menu-all.gif); background-repeat: no-repeat; margin:0; padding-left:0; } #menu1 a:hover { background-position: 0px -30px; } #menu2 a:hover { background-position: -160px -30px; } #menu3 a:hover { background-position: -320px -30px; } #menu4 a:hover{ background-position: -480px -30px; } #menu5 a:hover{ background-position: -640px -30px; }

    • ベストアンサー
    • CSS
  • IE9で画像のロールオーバーが上手く表示されない

    CSSで一枚の画像のみを使用しロールオーバーをしてみたのですが、Google Chromeではなんとか再現できたものの、IE9で確認してみたところ、画像が全て同じ物(左上の画像)になっていました(マウスを乗せても変化なし) 初心者なので初歩的な部分でつまずいている可能性もあると思いますが、どうかよろしくお願いいたします 以下HTMLとCSSです <body> <ul id="globalnavi"> <li><a href="./info.html" target="main">info</a></li> <li><a href="./main.html" target="main">main</a></li> <li><a href="./blog.html" target="sub">blog</a></li> <li><a href="./link.html" target="main">link</a></li> <li><a href="./index.html" target="top">index</a></li> </ul> </body> #globalnavi,#globalnavi li{ display:block;list-style:none; margin: 0;padding: 0; width: 96px; } #globalnavi li{ width: 96px;height: 79px; display:inline-block; position:relative; } #globalnavi a { display: block; text-indent: -9999px; text-decoration: none; width:100%;height:100%; background: url(./img/1.png) no-repeat 0 0 ; text-decoration: none; } #globalnavi a[href="./info.html"] { background-position: 0px 0px; } #globalnavi a[href="./main.html"] { background-position: 0px -79px; } #globalnavi a[href="./blog.html"] { background-position: 0px -158px; } #globalnavi a[href="./link.html"] { background-position: 0px -237px; } #globalnavi a[href="./index.html"] { background-position: 0px -316px; } #globalnavi a[href="./info.html"]:hover, #globalnavi a[href="./info.html"]:focus { background-position: -96px -0px; } #globalnavi a[href="./main.html"]:hover, #globalnavi a[href="./main.html"]:focus { background-position: -96px -79px; } #globalnavi a[href="./blog.html"]:hover, #globalnavi a[href="./blog.html"]:focus { background-position: -96px -158px; } #globalnavi a[href="./link.html"]:hover, #globalnavi a[href="./link.html"]:focus { background-position: -96px -237px; } #globalnavi a[href="../index.html"]:hover, #globalnavi a[href="./index.html"]:focus { background-position: -96px -316px; }

    • ベストアンサー
    • CSS
  • IEでCSSによる背景画像の高さが伸びる原因は?

    2枚の画像で、リンクを行おうとした場合、 div内にh2とulでリンクを行っています。 ところが、高さ(hight)を全てに指定しているにも関わらず、 divが引き伸ばされて、background-imageの不要な部分まで出てきてしまいます。 borderを入れると全体を挟んでいるDIVが何かによって引き伸ばされていますが、なぜIEだと引き伸ばされているのでしょうか? FIREFOXだと綺麗に表示されます。 <!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"> <title>無題ドキュメント</title> <style> <!-- * { margin:0; padding:0; } h2,ul { text-indent:-9999px; list-style:none; } h2 a { width:175px; height:28px; display:block; } ul a { display:block; width:175px; height:24px; } ul li { padding:0; margin:0; } .float_right { float:right; } .mgn_btm7 { margin-bottom:7px; } div#NAVIBAR { width:175px; margin-top:43px; height:398px; background-image:url(image/test-a.gif); background-repeat:no-repeat; border:1px #FF0000 solid; } h2 a:hover { background-image:url(image/test.gif); background-position:0 0; background-repeat:no-repeat; height:23px; } ul a:hover { background-image:url(image/test.gif); background-repeat:no-repeat; height:23px; } ul a#E:hover { background-position:0 -28px; } ul a#F:hover { background-position:0 -52px; } ul a#G:hover { background-position:0 -76px; } ul a#H:hover { background-position:0 -100px; } ul a#I:hover { background-position:0 -124px; } ul a#J:hover { background-position:0 -155px; } ul a#K:hover { background-position:0 -179px; } ul a#L:hover { background-position:0 -203px; } ul a#M:hover { background-position:0 -227px; } ul a#N:hover { background-position:0 -251px; } ul a#O:hover { background-position:0 -275px; } ul a#P:hover { background-position:0 -299px; } ul a#Q:hover { background-position:0 -323px; } ul a#R:hover { background-position:0 -347px; } ul a#S:hover { background-position:0 -371px; } --> </style> </head> <body> <div id="NAVIBAR" class="float_right"> <h2><a href="#">タイトル</a></h2> <ul class="mgn_btm4"> <li><a href="#" id="E">ああああああ</a></li> <li><a href="#" id="F">いいいいいい</a></li> <li><a href="#" id="G">うううううう</a></li> <li><a href="#" id="H">ええええええ</a></li> <li class="mgn_btm7"><a href="#" id="I">おおおおおおお</a></li> <li><a href="#" id="J">かかかかかか</a></li> <li><a href="#" id="K">きききききき</a></li> <li><a href="#" id="L">くくくくくく</a></li> <li><a href="#" id="M">けけけけけけ</a></li> <li><a href="#" id="N">ここここここ</a></li> <li><a href="#" id="O">ささささささ</a></li> <li><a href="#" id="P">しししししし</a></li> <li><a href="#" id="Q">すすすすすす</a></li> <li><a href="#" id="R">せせせせせせ</a></li> <li><a href="#" id="S">そそそそそそ</a></li> </ul> <hr> </div> </body> </html>

    • ベストアンサー
    • HTML

専門家に質問してみよう