jQueryを使って簡単プルダウンメニュー

←はサンプル画像なんですが、こんな感じのプルダウンメニューってけっこう使っているサイトも多い気がするので、今回はjQueryを使って簡単に出来ちゃうやり方を紹介したいと思います。

画像をつかったバージョンも使ったので、こちらも参考にして下さい。

…ここからが続き

このプルダウンメニューって使う機会がそう多いわけではないですが、もし使う機会があった時でも使ってみて下さい。

Comments

ジョージ

＞jQueryとprototypeの競合でしたら、こちらの記事を参考にして頂けませんか？

ありがとうございます！

全部ページを調べもせず失礼いたしました。
参考にさせていただきます。

ジョージさん。

jQueryとprototypeの競合でしたら、こちらの記事を参考にして頂けませんか？
http://www.css-lecture.com/log/javascript/029.html

ジョージ

いつも拝見させていただいております。

今回、プルダウンをためさせていただいたところprototype.jsとダウンロードさせていただいたjquery.jsが競合していました。
javascriptを解読できないので何かアドバイスや回避方法などわかりましたらご教授ください。よろしくお願い致します。

prototype.jsはlightboxで使うjsファイルでバージョンは1.4.0で
lightboxとプルダウンを両方利用したかったのです。

あと、ソースの順番の入れ替えで片方が認識されました。

すごく嬉しいお言葉ありがとうございます＾＾

＞大文字で英語を打っても小文字で反映されてしまう…

こちらの点なんですが、CSSを見直してみると#nav-one li aに
text-transform: lowercase;
と言う指定が入っているの原因ですね…

上記部分を消して頂いたら今の問題は解決出来ますよ。

後これは余談ですが
text-transform: uppercase;
と指定すると小文字で入力しても大文字で繁栄されます。

cktcat

はじめまして、こんにちは。
このサンプルを使わせて頂いてとっても助かりました！
ありがとうございます。
でもただ一つだけ疑問なのですが、大文字で英語を打っても小文字で反映されてしまうのです・・・。（例えばTOPがtopに）

もしも対処法が分かりましたらご教授下さい。
ひょっとして、これは私の方の問題ですかね？！
だったらスミマセン・・・。

分かりやすいサイトでとても気に入っています。

CSS3、HTML5、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！