..


スポンサーリンク

jQueryの：スライドの効果を持つドロップダウンメニュー

マックスボッシによって書かれた記事
ページ1の2

この短い記事では、 スライドの効果でシンプルですが、きれいな、 ドロップダウンメニュー （ドロップダウンメニュー）を作成するために私のjQueryプラグインを紹介。 実際に、私は正直でなければ、すべて私自身の仕事ではない... 私の仕事は、実際には、実際の再加工ですこのプラグインは私が実際には、追加することによって最適化し、拡大することを許可していることに、効果のスライド（巻き戻し）。

ドロップダウンメニューを実装する方法を見てみましょう

最初に、もちろん、我々は、当社のウェブページでjQueryをインクルードする必要があります。 

 



全トラックsrc="jquery.js"> </ SCRIPT>

これがなければ我々は、文書の本文（<BODY> ...</ body>の）、他のリストが（"アンロール"である腱を表す存在する箇条書きのリストで構成されている私たちのメニューで、作成する必要があります。 ）項目母に置きます。 ここにサンプルコードは、次のとおりです。 






 <ul id="mrwddm">



  



 <LI> <a href="/"> chickpeatocook.com </ A> </ LI>



  



 <LI> <a href="#">のJavaScript </ A>



    



 <UL>



      



 <LI> <a href="/javascript/guide/">ガイド</ a> </ LI>



      



 <LI> <a href="/javascript/articoli/">記事</ A> </ LI>



      



 <LI> <a href="/javascript/faq/">に関するよくある質問</ a> </ LI>



    



 </ UL>



  



 </ LI>



  



 <LI> <a href="#">経典</ A>



    



 <UL>



      



 <LI> <a href="/script/applet-java/"> Javaアプレット</ A> </ LI>



      



 <LI> <a href="/script/javascript/">のJavaScript </ A> </ LI>



      



 <LI> <a href="/script/script-php/"> PHP </ A> </ LI>



      



 <LI> <a href="/script/script-aspnet/"> ASP.Net </ A> </ LI>



    



 </ UL>



  



 </ LI>



  



 <LI> <a href="http://forum.chickpeatocook.com/">フォーラム</ a> </ LI>



  



 <LI> <a href="http://blog.chickpeatocook.com/">ブログ</ a> </ LI>



  



 <LI> <a href="http://tool​​s.chickpeatocook.com/">ツール</ a> </ LI>







 </ UL>

私たちのメニューは、もちろん、適切に様式化されたでなければならない。 これを行うには、単にスタイルシートCSSのコードでこれらの行を追加します。 






 UL＃mrwddm {マージン：40pxに0px 20px 0px;パディング：0px;}







 ＃Mrwddm李{フロート：左;表示：インライン;リストスタイル：なし;}







 ＃それらを{：;：3px 10pxの;マージン：0px;テキスト装飾：なし、ホワイトスペース：NOWRAP;背景：＃EEEEEE;パディングブロック表示を} Mrwddm







 ＃それらMrwddm：ホバー{背景：＃CCCCCC;色：＃FFFFFF;}







 ＃MrwddmそれらのUL {分幅：120px;マージン：3px 0px 0px 0px;パディング：0px;位置：絶対;のz - index：999;可視性：隠された、ディスプレイ：なし;}







 ＃MrwddmそれらのUL李{フロート：なし、ディスプレイ：インライン;}







 ＃MrwddmそれらのULのLi A {パディング：5pxの3px;背景：＃EEEEEE;色：＃666666;}







 ＃MrwddmそれらのULのLi A：ホバー{背景：＃CCCCCC;色：＃FF6600}

同じカテゴリの...
E -ラーニング
CSS（コース） CSS（コース）
W3C CSSやXHTMLに応じてWebデザインとアクセシビリティ。 29€から開始。
HTML（コース） HTML（コース）
29€からWeb用のマークアップ言語。
ジャバスクリプト（コース） ジャバスクリプト（コース）
クライアントサイドスクリプトへのガイドを完了します。 39€から。
スポンサーリンク