- 締切済み
横に展開する(伸縮ベルト)メニューの作成について。
http://www.geocities.jp/miyake_kobo/dl/temp/temp_1055.html こちらのテンプレートを利用させてもらったんですが、カスタマイズがしにくいのと、著作権表示でデザインがくずれてしまうため、同じようなデザインで、カスタマイズがしやすく、著作権表示がないものを探しています。 検索してあちこち探したのですが、見付けられなくて困り果てた末、質問させていただきました。 cssで細かい設定(カスタマイズ)ができる、サンプルのよーなJavaScriptを使ったメニューの作り方、または掲載しているサイトをご存知の方いらっしゃいましたら、どうかご回答お願いいたします。 できればサンプル・デモページがあるとありがたいです。 cssでも同じようなものが作れるのであれば、そちらもお教え願いたいです。 よろしくお願いします 。
- breathingxxx
- お礼率33% (1/3)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 どのようなマークアップで、どのようなカスタマイズをしたいのかまったく不明なので、まぁ、ご参考までに。 （あたりまえですが、2階層しか対応していません） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1.5.0");</script> <style type="text/css"> #navi { width:840px; } #navi, #navi ul { list-style-type:none; padding:0; margin:0; } #navi li { position:relative; } #navi ul { position:absolute; top:1px; left:180px; overflow:hidden; } #navi ul li { float:left; } #navi span, #navi ul li a { display:block; height:40px; text-align:center; line-height:36px; } #navi li span { width:178px; background-color:#eea; border-top:1px solid #eee; border-bottom:1px solid #aaa; } #navi ul li a { width:218px; background-color:#aea; border-left:1px solid #eee; border-right:1px solid #aaa; } </style> <script type="text/javascript"> <!-- $(function(){ $("#navi>li>ul").each(function(){ $("li", this).css("left", -$(this).width()); }); $("#navi>li>span").mouseover(function(){ $(this).next("ul").children("li").stop(true).animate({left: 0}, "slow"); }); $("#navi>li").mouseleave(function(){ var w = $("ul", this).width(); $("li", this).stop(true).animate({left: -w}, "slow"); }); }); //--> </script> </head> <body> <ul id="navi"> <li><span>menu1</span> <ul> <li><a href="#">menu1-1</a></li> <li><a href="#">menu1-2</a></li> <li><a href="#">menu1-3</a></li> </ul> </li> <li><span>menu2</span> <ul> <li><a href="#">menu2-1</a></li> <li><a href="#">menu2-2</a></li> </ul> </li> <li><span>menu3</span> <ul> <li><a href="#">menu3-1</a></li> <li><a href="#">menu3-2</a></li> <li><a href="#">menu3-3</a></li> </ul> </li> </ul> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
回答になってませんが・・・ あまり見かけないタイプのメニューですね。 ＞cssで細かい設定(カスタマイズ)ができる tableレイアウトで細かく使っているのは、個人的には好きになれないですが、メニューの各要素構成は同じ構成となるように作成されているので、CSSの設定には困らないのでは？ 逆にこれで不満だとすれば、他のマークアップにしてもダメではないでしょうか？ 同じ要素でも違う設定を使い分けたいのであれば、idやclassを追加設定すればよさそうですし… ＞著作権表示がないものを探しています。 同サイトに、1000円で表示を消したものを提供してくれるとありますが・・・？ 自分向きのものをカスタマイズしたいのであれば、自作してしまう手もあります。 縦横の動作を変えれば似たようなものはたくさんありそうなので（縦型にスライドダウンするメニューはよく見かける）、そのようなサイトが参考になるのではないでしょうか？ （ご提示のものと同じものは、あまり見かけたことはないですね）
お礼
ご回答ありがとうございます。 ＞CSSの設定には困らないのでは？ 確かに、このくらいならカスタマイズはできそうですが、あくまで、これよりカスタマイズしやすいものはないものかと思った次第で。 ＞同サイトに、1000円で表示を消したものを提供してくれるとありますが・・・？ 書き忘れていましたが、無料のものを探しております。 ＞自分向きのものをカスタマイズしたいのであれば、自作してしまう手もあります。 確かに1から自分で作れれば、それに超したことはないんですが、そこまでの知識は持ち合わせておらず、テンプレートやサンプルに頼る手段をとった次第で・・・。 確かに、縦に展開するものは結構見付かったので、何とか横にスライドしないものかと、いじれる範囲でカスタマイズしてみましたがダメでした。 やっぱり諦めるしかないんでしょうかね・・・。