締切済み

１つの画像を使ったナビゲーションからプルダウン

2013/10/20 03:57

<div id="menu"> <ul> <li id="menu01"><a href="＃">profile</a></li> <li id="menu02"><a href="＃">works</a></li> <li id="menu03"><a href="＃" target="_blank">memo</a> <li id="menu04"><a href="＃">link</a></li> </ul> </div> ------- #menu{ width:824px; height:100px; padding:0px; margin: 0px auto 20px;} #menu ul{ list-style:none; width:824px; height:100px;} #menu ul li a{ text-indent:9999px; background:url(img/menu.jpg) no-repeat; display:block; width:206px; height:100px;} #menu ul li { float:left; width:206px; height:100px;} #menu ul li#menu01 a { background-position: 0px 0px; } #menu ul li#menu02 a { background-position: -206px 0px; } #menu ul li#menu03 a { background-position: -412px 0px; } #menu ul li#menu04 a { background-position: -618px 0px; } #menu ul li#menu01 a:hover { background-position: 0px -100px; } #menu ul li#menu02 a:hover { background-position: -206px -100px; } #menu ul li#menu03 a:hover { background-position: -412px -100px; } #menu ul li#menu04 a:hover { background-position: -618px -100px; } ※数字のキリが悪いですが、お気になさらず。上記のような１つの画像をスライドするナビメニューを作ったのですが、これをベースに、一箇所メニューからドロップダウンさせる事は可能でしょうか。また、そのドロップダウンされたメニューはテキストではなく画像が良いです。バックグラウンドの画像の上にメニューの1つの画像を重ね配置してからドロップダウンさせるなど。。ほぼ初心者に近い為勝手に思いついたのはこれくらいで、よく分かりません。ネットで色々と検索をしたのですが、思ったようなものがなく、何か参考になるようなURL等あれば教えていただけますでしょうか。できれば分かり易いものがありがたいです。。また、上記のやり方では根本的に無理だという場合も教えて欲しいです。よろしくお願いします。

capri7
お礼率21% (35/161)

CSS
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/10/21 07:54 回答No.2

No.1です。まず試すこと。うまくサブメニューがその下に出るはずです。＞classは？　HTML4.01で、DIVは「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。」でありました。デザインではなく、用意されているタグでは表しきれない文書構造を示すためでした。これが理解されたとは言いがたく、HTML5では「文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」新しい要素が追加されました。＿＿<div class="nav" id="siteMenue"> のclass名は、ナビゲーションを示すブロックと言う意味で、HTML5のnavの代わりです。将来HTML5に直すときは、そのままコンバーターで＿＿<nav id="siteMenue"> とすればよいように・・・。　すなわち <body> 　<header> 　　<h1>title</h1> 　　<nav></nav> 　</header> 　<section> ・・・・・・ ★画像をずらして使いまわす方法は、「スプライト」と呼ばれる手法ですが、その目的はCSSで背景が変わるたびに画像を読み込ませるとタイムラグが生じるために、最初に画像を読み込んだ時点で、必要な画像を読み込ませておく手法です。　そのため、ひとつのリンク先ですでに画像が読み込まれれば良いのですから、すべてを一枚にしなくても、最初に表示されて時点で完了しているからです。そのほうが画像サイズが小さく出来る。そして、なによりも位置の指定が楽だからです。 a:link{background:silver url() 0 50%;} a:visited{background-position:100px;} a:hover{background-position:200px;} a:active{background-position:300px;} とかける。　先のソースは、CSS(カスケーディングスタイルシート)の命でもあるカスケーディングをうまく利用してシンプルになっています。詳細度を活用して同じ指定を繰り返さないように・・。　まずは試してみること、なお、No.1の添付図は 200px×100pxの画像を左右50px、上下10pxあけて並べた物です。　こちらの添付図は動作確認 JQueryを使う必要はありません。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/10/20 17:29 回答No.1

※potion:absoluteは直近のstticでないコンテナブロックを基準にすること　すなわち子孫のul,olをabsoluteで配置すること ※カスケーディングをうまく利用すること。 ★画像は各項目ごとに作ったほうが楽ですよ。(縦位置の調整だけですむ) 　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) で、ブラウザの[表示]メニューからスタイルを選択すると色々なデザイン例がある。(Chromeを除く) ＿＿<div class="nav" id="siteMenue"> ＿＿＿<ul> ＿＿＿＿<li><a href="/profile.html">profile</a></li> ＿＿＿＿<li><a href="/works">works</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/works/a/">WorksA</a></li> ＿＿＿＿＿＿<li><a href="/works/b/">WorksB</a></li> ＿＿＿＿＿＿<li><a href="/works/c/">WorksC</a></li> ＿＿＿＿＿</ul>＿＿＿＿＿</li> ＿＿＿＿<li><a href="/memo.html">memo</a> ＿＿＿＿<li><a href="/links.html">links</a></li> ＿＿＿</ul> ＿＿</div> div#siteMenue{ width:824px;height:100px; margin: 0 auto 20px; position:relative; text-align:center; x-index:10; } div#siteMenue ul,div#siteMenue ul li{ list-style-none;margin:0;padding:0; line-height:100px; } div#siteMenue ul li{ display:inline-block; width:200px; position:relative; } div#siteMenue ul li a{ text-align:left; text-indent:-20em; overflow:hidden; background:url(img/menu.jpg) no-repeat; display:block; width:100%x; height:100%; background-color:silver; } div#siteMenue ul li ul li{ display:block; } div#siteMenue ul li ul{ position:absolute; top:100px;left:0px; display:none; } div#siteMenue ul li:hover ul{ display:block; } div#siteMenue a[href="/profile.html"]{ background-position: 0 0; } div#siteMenue a[href="/works"]{ background-position: -250px 0px; } div#siteMenue a[href="/works/a/"]{ background-position: -250px -110px; } div#siteMenue a[href="/works/b/"]{ background-position: -250px -220px; } div#siteMenue a[href="/works/c/"]{ background-position: -250px -330px; } div#siteMenue a[href="/memo.html"]{ background-position: -500px 0px; } div#siteMenue a[href="/links.html"]{ background-position: -750px 0px; } div#siteMenue a[href="/profile.html"]:hover{ background-position: 0px -440px; } div#siteMenue li:hover a[href="/works"]{ background-position: -250px -440px; } div#siteMenue li a[href="/works/a/"]:hover{ background-position: -250px -550px; } div#siteMenue a[href="/works/b/"]:hover{ background-position: -250px -660px; } div#siteMenue a[href="/works/c/"]:hover{ background-position: -250px -770px; } div#siteMenue a[href="/memo.html"]:hover{ background-position: -500px -440px; } div#siteMenue a[href="/links.html"]:hover{ background-position: -750px -440px; }