jquery に基づく点滴定、カテゴリ ナビゲーションの実装 code_jquery

シンプル、軽量、高速、そして効率的です。

html 構造:

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

;/ spa>





• 広東料理

...


ショッピング



• ショッピング チャンネル


• スーパーマーケット/コンビニ
..

• その他

/ul>

jquery コード:

コードをコピーします

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


CSS スタイル:

コードをコピー

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

BODY {
背景色:#fff;
カラー:#555;
フォント: 9pt/14px Tahoma、「宋体」、Arial、Helvetica、Sans-Serif;
文字間隔: 0;
マージン: 0;
}
html、本文、ul、ol、li、dl、dt、dd、p、h1、h2、h3、h4、h5、h6、a、img、th、td、フォーム、フィールドセット、iframe 、オブジェクト、プレ、コード、凡例、blockquote {
border: 0 none;
マージン: 0;
概要: 0 なし。
パディング: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
フォントの太さ: 通常;
}
UL, LI {
リストスタイル: 外側にはなし; なし;
マージン: 0;
パディング: 0;
}
IMG {
ボーダー: 中 なし;
マージン: 0;
パディング: 0;
カーソル:ポインタ;
}
input, img, select {
vertical-align: middle;
}
A {
色: #666666;
}
A:link {
色: #666666;
テキスト装飾: なし。
}
A: 訪問済み {
色: #666666;
テキスト装飾: なし。
}
A:hover {
色: #C90809;
テキスト装飾: なし。
}
/*导航*/
.pp_channels .root-item, .pp_channels .root-name, .pp_channels .root-name span, .pp_channels .sub-list li a {
background -画像: url("bg.png");
背景リピート: リピートなし;
}
.G_chan-panel {
位置: 絶対;
z インデックス: 1000;
トップ: 120ピクセル;
左: 199px;
可視性: 非表示。
}
.pp_channels {
幅: 138px;
パディング: 0;
ボーダー幅: 0 0 2px 1px;
境界半径: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: -1px 1px 1px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc;
ボックスシャドウ: 0 1px 5px #ccc;
}
.pp_channels .root-item {
ズーム: 1;
位置: 相対。
幅: 139px;
高さ: 34px;
背景位置: -13px -373px;
オーバーフロー: 表示されます。
vertical-align: 中央;
}
.pp_channels .root-name {
表示: ブロック;
z インデックス: 1001;
位置: 相対。
ボーダートップ:1px ソリッド #B9F5D2;
パディング左: 10px;
背景位置: -10px -358px;
カーソル: ポインタ;
}
.pp_channels .root-name span {
display: block;
ボーダー右: 1px ソリッド #B9F5D2;
パディング左: 9px;
高さ: 34px;
フォントサイズ: 1.2em;
行の高さ: 34px;
カラー: #000;
背景位置: -167px -358px;
}
.pp_channels .active .root-name {
background: #fff;
}
.pp_channels .active .root-name スパン {
color: #C00;
境界線の色: #fff;
}
.pp_channels .no-sub .root-name span {
border-color: #fff;
背景位置: 20px -358px;
}
.pp_channels .sub-list {
左: 138px;
トップ: -34px;
パディング: 5px 2px 5px 16px;
幅: 200px;
オーバーフロー: 非表示;
_top: -35px;
-moz-box-shadow: -1px 1px 1px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc;
ボックスシャドウ: 0 1px 5px #ccc;
}
.pp_channels .active .sub-list {
可視性: 表示;
}
.pp_channels .sub-list li {
float: left;
幅: 83px;
マージン: 0 10px 5px 0;
}
.pp_channels .sub-list .main-cate {
width: 200px;
マージン右: -10px;
フォントの太さ: 太字;
}
.pp_channels .sub-list a {
padding-left: 3px;
行の高さ: 21px;
背景位置: -169px -418px;
*背景位置: -169px -420px;
}
.pp_channels .sub-list a: hover {
背景位置: -169px -438px;
*背景位置: -169px -440px;
}
.pop-panel {
z-index: 1000;
位置: 絶対。
可視性: 非表示。
ボーダー: 1px ソリッド #B9F5D2;
パディング: 5px 9px;
背景: #fff;
カラー: #61646E;
#margin-left:-0px;
_margin-left:-0px;
}
.pop-panel a {
color: #61646E;
}
.pop-panel a: hover {
text-decoration:none;
色: #C00;
}

その他の应用：

复制代代码如下:

//定位
var X = $('#G_chan').offset().top;
var Y = $('#G_chan').offset().left;
$("#G_chan-panel").offset({ 上: X 36、左: Y - 5 });
// 鼠标经过 アニメ画效果 防点击链接跳转
$("#G_chan").hover(function (event) {
event ||event.stopPropagation(); $("#G_chan-パネル").slideDown().mouseleave(function () {
$(this).slideUp()
});
});
//点击城市列表 下拉アニメーション画防冒泡
$("#G_loc").click(function (event) {event.preventDefault(); $("#G_loc-panel").slideToggle("遅い"); });著者：曾祥展