みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

1枚の画像でナビゲーション+ドロップダウンの設定

上記の通りになるのですが、
1枚の画像だけを用意して、ナビゲーションメニュー+一部のメニューには
プルダウンも設定したいのです。

例を言えば
MENU1、MENU2、MENU3、MENU4という項目があり、
MENU1とMENU2は単純にマウスオーバーをした際に色が変わるという設定をし、
MENU3とMENU4にはマウスオーバーをした際にその下にそれぞれMENU3_1、MENU3_2、MENU4_1、MENU4_2
というメニュー階層を縦表示でつけられればと思っています(これにもマウスオンマウスオフ、アクティブ時で色変えしたい)。

単純にマウスオーバー時に変わる設定ならば
CSSのhover設定とactive設定でいけるかと思っているのですが、
項目中2つだけドロップダウンを入れるとなるとペライチでどのように設定すれば
いいのか……と悩んでおります。

また、もし普通のメニューは1枚画像で用意して、
ドロップダウンメニューの部分は別画像を用意して設定する、
というの方が簡単であるならばそちらの手法もご指摘いただければと思います。


サンプルとしてペライチで作成する場合の「こういう風の画像を用意して設定できればな」
という画像を添付させていただきます。(サンプルなので簡略に作成しております)

手法は特に指定しておりません。

分かりにくい説明で大変申し訳ございませんが、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。

投稿日時 - 2014-01-20 03:45:37

QNo.8437905

困ってます

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

細かい修正
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 のDATA入力
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options )
でチェックすみ
<!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,div.footer div.nav ol{
width:80%;min-width:420px;
margin:0 auto;padding:1px;
background-color:white;
}
div.header{height:100px;}
div.section{margin-top:30px;}
div.footer div.nav{position:absolute;top:100px;left:0;width:100%;}
div.footer div.nav ol li{margin:0;padding:0;}
div.footer div.nav ol{
list-style:none;text-align:center;font-size:0;
background-color:aqua;
}
div.footer div.nav ol li{
display:inline-block;width:105px;height:30px;
position:relative;font-size:16px;
}
div.footer div.nav ol li a{
display:block;width:100%;height:100%;
overflow:hidden;text-indent:-20em;
}
div.footer div.nav ol li ol{
position:absolute;top:30px;width:105px;margin:0;padding:0;min-width:0;
display:none;
}
div.footer div.nav ol li:hover ol{display:block;}
div.footer div.nav ol li ol li{height:17px;display:block;}

div.footer div.nav ol li a{background-image:url(./images/menue.jpg);}
div.footer div.nav ol li a[href="/"]{background-position:0 -2px;}
div.footer div.nav ol li a[href="/News"]{background-position:-105px -2px;}
div.footer div.nav ol li a[href="/Products"]{background-position:-210px -2px;}
div.footer div.nav ol li a[href="/Products/P1"]{background-position:-210px -102px;}
div.footer div.nav ol li a[href="/Products/P2"]{background-position:-210px -150px;}
div.footer div.nav ol li a[href="/Support"]{background-position:-305px 0;}

div.footer div.nav ol li a[href="/"]:hover,
div.footer div.nav ol li:hover a[href="/"]{background-position:0 -36px;}
div.footer div.nav ol li:hover a[href="/News"],
div.footer div.nav ol li a[href="/News"]:hover{background-position:-105px -36px;}
div.footer div.nav ol li:hover a[href="/Products"],
div.footer div.nav ol li a[href="/Products"]:hover{background-position:-210px -36px;}
div.footer div.nav ol li a[href="/Products/P1"]:hover{background-position:-210px -119px;}
div.footer div.nav ol li a[href="/Products/P2"]:hover{background-position:-210px -169px;}
div.footer div.nav ol li:hover a[href="/Support"],
div.footer div.nav ol li a[href="/Support"]:hover{background-position:-305px -36px;}

div.footer div.nav ol li a[href="/"]:active{background-position:0 -68px;}
div.footer div.nav ol li a[href="/News"]:active{background-position:-105px -68px;}
div.footer div.nav ol li a[href="/Products"]:active{background-position:-210px -68px;}
div.footer div.nav ol li a[href="/Products/P1"]:active{background-position:-210px -135px;}
div.footer div.nav ol li a[href="/Products/P2"]:active{background-position:-210px -185px;}
div.footer div.nav ol li a[href="/Support"]:active{background-position:-305px -68px;}
-->
</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・</p>
_</div>
_<div class="footer">
__<div class="nav">
___<ol>
____<li><a href="/">Top</a></li>
____<li><a href="/News">News</a></li>
____<li><a href="/Products">Products</a>
_____<ol>
______<li><a href="/Products/P1">P1</a></li>
______<li><a href="/Products/P2">P2</a></li>
_____</ol>
____</li>
____<li><a href="/Support">サポート</a></li>
___</ol>
__</div>
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
__</dl>
_</div>
</body>
</html>

投稿日時 - 2014-01-20 17:26:11

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

いわゆるスプライトと言う技法です。
※スプライトの利点は、画像を一枚だけ読み込むので、動作のたびに読み替えるより動作が機敏になる事です。

CSSは兎も角、HTMLはきちんと書きましょう。そうすればどのようにもデザインできる。
 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
 にてブラウザの表示メニューからスタイルシートを選択

[HTML4.01]
<div class="header"></div>
<div class="section"></div>
<div class="footer">
 <div class="nav">
  <ol>
   <li><a href="/">Top</a></li>
   <li><a href="/News">News</a></li>
   <li><a href="/Products">Products</a>
    <ol>
     <li><a href="/Products/P1">P1</a></li>
     <li><a href="/Products/P2">P2</a></li>
    </ol>
   </li>
   <li><a href="/Support">サポート</a></li>
  </ol>
 </div>
</div>
[HTML5]参考
<header></header>
<section></section>
<footer>
 <nav>
  <ol>
   <li><a href="/">Top</a></li>
   <li><a href="/News">News</a></li>
   <li><a href="/Products">Products</a>
    <ol>
     <li><a href="/Products/P1">P1</a></li>
     <li><a href="/Products/P2">P2</a></li>
    </ol>
   </li>
   <li><a href="/Support">サポート</a></li>
  </ol>
 </nav>
</footer>

のように書かれていると思いますので、後はスタイルシートで・・。スラスラと・・
HTMLがちゃんと書かれていたら、簡単ですね。
★画像は添付のものをそのまま./images/menue.jpgとして利用してます。
★子孫セレクタで指定してあるので、sectionやheaderなど他の場所のnavには影響しない。

html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:80%;margin:0 auto;}
div.header{height:100px;}
div.section{margin-top:30px;}
div.footer div.nav{position:absolute;top:100px;left:0;width:100%;}
div.footer div.nav ol,div.footer div.nav ol li{margin:0;padding:0;}
div.footer div.nav ol{list-style:none;text-align:center;}
div.footer div.nav ol li{display:inline-block;width:105px;height:30px;position:relative;}
div.footer div.nav ol li a{
display:block;width:100%;height:100%;background-image:url(./images/menue.jpg);
overflow:hidden;text-indent:-20em;
}
/* スプライト */
div.footer div.nav ol li ol{position:absolute;top:30px;display:none;}
div.footer div.nav ol li:hover ol{display:block;}
div.footer div.nav ol li ol li{height:17px;}
div.footer div.nav ol li a[href="/"]{background-position:0 -2px;}
div.footer div.nav ol li a[href="/News"]{background-position:-105px -2px;}
div.footer div.nav ol li a[href="/Products"]{background-position:-210px -2px;}
div.footer div.nav ol li a[href="/Products/P1"]{background-position:-210px -102px;}
div.footer div.nav ol li a[href="/Products/P2"]{background-position:-210px -150px;}
div.footer div.nav ol li a[href="/Support"]{background-position:-305px 0;}

div.footer div.nav ol li a[href="/"]:hover,
div.footer div.nav ol li:hover a[href="/"]{background-position:0 -36px;}
div.footer div.nav ol li:hover a[href="/News"],
div.footer div.nav ol li a[href="/News"]:hover{background-position:-105px -36px;}
div.footer div.nav ol li:hover a[href="/Products"],
div.footer div.nav ol li a[href="/Products"]:hover{background-position:-210px -36px;}
div.footer div.nav ol li a[href="/Products/P1"]:hover{background-position:-210px -119px;}
div.footer div.nav ol li a[href="/Products/P2"]:hover{background-position:-210px -169px;}
div.footer div.nav ol li:hover a[href="/Support"],
div.footer div.nav ol li a[href="/Support"]:hover{background-position:-305px -36px;}

div.footer div.nav ol li a[href="/"]:active{background-position:0 -68px;}
div.footer div.nav ol li a[href="/News"]:active{background-position:-105px -68px;}
div.footer div.nav ol li a[href="/Products"]:active{background-position:-210px -68px;}
div.footer div.nav ol li a[href="/Products/P1"]:active{background-position:-210px -135px;}
div.footer div.nav ol li a[href="/Products/P2"]:active{background-position:-210px -185px;}
div.footer div.nav ol li a[href="/Support"]:active;{background-position:-305px -68px;}

投稿日時 - 2014-01-20 09:57:15

あなたにオススメの質問