jQuery_jquery に基づくシンプルなリスト ナビゲーション メニュー

以下は私が作成した簡単なナビゲーション メニューです。私は初心者なので、間違いがいくつかあると思います。

それでは、本題に入ります。

1まず CSS スタイル シートを定義します:

コードをコピーします コードは次のとおりです。 style type="text/ css">

body{font-size:13px}

ul,li{list-style-type:none;padding:0px;margin:0px}
.menu{ width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
.optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
.content{padding -top:10px;clear :left}
a{text-decoration:none;color:#666;padding:10px}
.optnFocus{background-color:#fff;font-weight:bold}
div{padding:10px }
div img{float:left;padding-right:6px}
span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
.tip{ width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;
background-color:#fff;display:none}
.tip li{line-height: 23px;}
#sort{position:absolute;display:none}



2. JQUERY フレームワークを引用するには、公式 Web サイトにアクセスします。 JQUERY1.5 などの最新の JQUERY をダウンロードします。バージョンはリリースされています。リンク アドレス: http://jquery.com/

3. HTML タグを定義します:

コードをコピーします コードは次のとおりです:

;div>

コンピュータ デジタル製品

• ノートブック
="ヒント">

• ノートブック 1


• ;ノートブック 2
  
• ノートブック 3


• href="#">ノートブック 4< /a>


• ノートブック 5
  
• モバイル ハード ドライブ




• モバイル ハード ドライブ 1


• ハード ドライブ 2


• モバイル ハード ドライブ 3


• モバイル ハード ドライブ 5


• ;コンピュータ ソフトウェア


• >コンピュータ ソフトウェア 1


• コンピュータ ソフトウェア 2
コンピュータ ソフトウェア 3

• コンピュータ ソフトウェア 4
;

• コンピュータ ソフトウェア 5


• ;デジタル製品


• デジタル製品 1


• デジタル製品 2
デジタル プロダクト 3

• デジタル プロダクト 4
;

• デジタル製品 5


< ;img id="sort" src="Images/sort.gif" alt=""/>



4.次に、最も重要な JQUERY コードを定義します。





コードをコピー


コードは次のとおりです:





5. さて、これで完了です...

は次のとおりです: