プラグインで画像を使ったドロップダウンを作りたい

質問

JQUERYのプラグインで画像を使ったドロップダウンを作りたいのですが見つかりません。
テキストのはいくらでもあるのですが、画像の良い物があれば教えてください。

回答No.2

ORUKA1951

＞恐らくCSSではそこまでは無理ですよね？
　CSS3のtransformを使えば簡単です。
　いずれにしてもHTMLには文書構造しか書かれていないほうがデザインの自由度も変更も楽になります。
　例えば、
<header>
　・・・
　<nav>
　　<ol>
・・・
[HTML4.01など]は文書構造を示す要素が用意されていませんでしたから、
「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」してきましたから、
<div class="header">
　・・・
　<div class="nav">
　　<ol>
・・・
　とマークアップさえされていれば、
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　で、[表示]→[スタイルシート]のようにスタイルシートで好きなようにデザインできます。(Chromeは代替スタイルシートに未対応)

後方互換のためHTML4.01だとして、---先のサンプルは下記の形に修正
<div class="header">
　<div class="nav">
　　<ol>
　　　<li><a href="/">Top</a></li>
　　　<li><a href="/Books">Books</a>
　　　　<ol>
・・・【中略】・・・
　　　</li>
　　</ol>
　</div>
</div>

[スタイルシート]
div.header{position:relative;}
div.header div.nav{
width:100%;line-height:40px;height:40px;
text-align:center;/* 中央に並べる */
font-size:0;/* すき間 */
}
div.header div.nav ol,div.header div.nav ol li{list-style:none;margin:0;padding:0;}
div.header div.nav ol li{
font-size:16px;
display:inline-block;
width:20%;
position:relative;
/* text-align:left; *//* 文字を隠すとき */
}
div.header div.nav ol li ol{
position:absolute;
top:40px;left:0;width:100%;/* 位置とサイズ */
}
div.header div.nav ol li ol li{
width:100%;display:block;height:0;
overflow:hidden;
/* 時間的変化 */
transition-property: height;
transition-duration:2s;
transition-timing-function:ease-in-out;
}
div.header div.nav ol li:hover ol li{height:40px;}
div.header div.nav ol li a{
display:block;
width:100%;height:100%;
/* text-indent:-100em;*//* 文字を隠すとき */
}
div.header div.nav ol li a{background-color:yellow;}
div.header div.nav ol li a:hover{background-color:orange;}

これが基本です。
背景に画像を指定するときは、
div.header div.nav ol li a[href]{background-image:url();}
div.header div.nav ol li a[href]:hover{background-image:url();}
div.header div.nav ol li a[href="/Books/001.html"]{background-image:url();}
div.header div.nav ol li a[href="/Books/001.html"]:hover{background-image:url();}
div.header div.nav ol li]hover a[href="/Manual"]{background-image:url();}
など、要素セレクタなどを使って指定するなど御自由に・・

お礼

ありがとうございます。

少し時間がかかりそうなので、またチャレンジしてわからない事があったらご対応お願いします。

回答No.1

ORUKA1951

画像だろうがテキストだろうがわざわざjquery使わなくてもCSS2.1だけではまずいの？？
HTMLが下記だとしてどのようにデザインしたいのですか？？
<nav>
　<ol>
　　<li><a href="/">Top</a></li>
　　<li><a href="/Books">Books</a>
　　　<ol>
　　　　<li><a href="/Books/001.html">001.html</a></li>
　　　　<li><a href="/Books/002.html">002.html</a></li>
　　　　<li><a href="/Books/003.html">003.html</a></li>
　　　</ol>
　　</li>
　　<li><a href="/Product">Product</a>
　　　<ol>
　　　　<li><a href="/Product/001.html">001.html</a></li>
　　　　<li><a href="/Product/002.html">002.html</a></li>
　　　　<li><a href="/Product/003.html">003.html</a></li>
　　　</ol>
　　</li>
　　<li><a href="/Manual">Manual</a>
　　　<ol>
　　　　<li><a href="/Manual/001.html">001.html</a></li>
　　　　<li><a href="/Manual/002.html">002.html</a></li>
　　　　<li><a href="/Manual/003.html">003.html</a></li>
　　　</ol>
　　</li>
　</ol>
</nav>

お礼

グローバルナビの中のボタン？の画像を横に並べて、ホバーしたときに、同じサイズの画像がドロップダウンするようにしたいです。

出来ればふわっとやわらかいイメージですこしゆっくり出したいのですが、恐らくCSSではそこまでは無理ですよね？