<!DOCTYPE html>
<html lang="en">
</html>
CSS: ##***{
リーリー
###}###体{###
リーリー
}
ナビゲーション バーの背景
/
リーリー
}/ナビゲーション バー ボタン
/
リーリー
}
.box a {
リーリー
/
IE の処理、リンク破線枠互換/
a:focus{outline:none;}
.a1{
リーリー
}
リーリー
}.a3{
リーリー
}.a4{
リーリー
}.a5{
リーリー
}.a6{
リーリー
}/
左の格納式サイドバー、3 レベル
//
大きな背景ボックス/.leftNav{
リーリー
}/一番外側の大きなUL、第1層全体の位置
/
リーリー
}.ulBox1 リ {
リーリー
}
リーリー
}
第 2 レベルのパブリック クラス.Arrow
/
リーリー
}/第 3 層のパブリック クラス。Arrow
/
.caiwu3,.yingshou3,.yingfu3,.tongji3{
リーリー
}/
レポート スタイル パブリック クラス
/
リーリー
}
/
第一層アイコン設定システム
.ulBox1 .xitong{
リーリー}
/
第 2 レベルのすべてのオプションの上限と下限の距離、すべてのオプション
.ulBox2 li{
リーリー}
/
2層目、1番目の項目設定アイコン user
.ulBox2 .yonghu1-1 {
リーリー}
/
2層目2項目設定アイコン email
.ulBox2 .jichu2-1 {
リーリー}/第 2 レベル、第 2 オプション、第 3 レベルのディレクトリ、左に移動
/
リーリー
}/第 2 レベル、第 2 オプション、第 3 レベルのディレクトリ アイコン設定
/
最初の項目
/.jichu2-2 .kehu3- 1 {
リーリー
}/2 番目の項目
/
リーリー
}/3 番目の項目
/
リーリー
}
/
第 2 レベル、第 3 オプション、第 3 レベルのディレクトリは左に移動します。
.ulBox2 .xiaoshou2 ul{
リーリー}/2層目2項目設定アイコン email
/
リーリー
}/第 2 レベル、第 3 オプション、第 3 レベルのディレクトリ アイコン設定
/
最初の項目
/.xiaoshou2-2 .dingdan3- 1 {
リーリー
}
/
第 2 レベル、第 4 オプション、第 3 レベルのディレクトリは左に移動します。
.ulBox2 .caigou2 ul {
リーリー}/第 2 レベル、第 4 項目設定購入アイコン
/
リーリー
}/第 2 レベル、第 4 オプション、第 3 レベルのディレクトリ設定アイコン
/
最初の項目 /第 2 レベル、第 5 オプション、第 3 レベルのディレクトリを左に移動します。 / } } } /第 2 レベル、第 6 オプション、第 3 レベルのディレクトリは左に移動します。 / } } } } } /第 2 レベル、第 7 オプション、第 3 レベルのディレクトリ、左に移動 / } } } } } } } } } } } /3 番目の層 .tongji3 は折り目です、 .caiwu2-3/ } } //CSSS コード: *{ / .nav{ .box{ } IE の処理、リンク破線枠互換 a:focus{outline:none;} .a2{ } .a3{ } .a4{ } .a5{ } .a6{ } / / 大きな背景ボックス/.leftNav{ .ulBox1 { .ulBox1 a { } } } } /第一層アイコン設定システム/ } /第 2 レベルのすべてのオプションの上限と下限の距離、すべてのオプション/ } /2層目、1番目の項目設定アイコン user/ } /2層目2項目設定アイコン email / } } } } } /第 2 レベル、第 3 オプション、第 3 レベルのディレクトリは左に移動します。/ } } } /第 2 レベル、第 4 オプション、第 3 レベルのディレクトリは左に移動します。/ } } } /第 2 レベル、第 5 オプション、第 3 レベルのディレクトリを左に移動します。 / } } } /第 2 レベル、第 6 オプション、第 3 レベルのディレクトリは左に移動します。 / } } } } } /第 2 レベル、第 7 オプション、第 3 レベルのディレクトリ、左に移動 / } } } } } } } } } } } /3 番目の層 .tongji3 は折り目です、 .caiwu2-3/ } } //JS コード、JQ を使用##*/**
リーリー
リーリー
リーリー
/.caigou2-2 .jihua3- 1 {
リーリー
}
.ulBox2 .shengchan2 ul {
/2 番目のレイヤー、5 番目のアイテムはプロダクションアイコンを設定します/
.ulBox2 .shengchan2-1 {
/第 2 レベル、第 5 オプション、第 3 レベルのディレクトリ設定アイコン/
/最初の項目/
.shengchan2-2 .shengchan3- 1 {
.ulBox2 .kucun2 ul {
/2層目6項目設定インベントリアイコン/
.ulBox2 .kucun2-1 {
/第2階層、第6オプション、第3階層のディレクトリ設定アイコン/
/最初の項目/
.kucun2-2 .cangku3- 1 {
/2 番目のアイテム /
.kucun2-2 .ruku3-1 {
/3 番目の項目 /
.kucun2-2 .chuku3-1 {
.ulBox2 .caiwu2 ul {
/第 2 レベル、7 番目のアイテム設定インベントリ アイコン/
.ulBox2 .caiwu2-1 {
/第 2 レベル、第 7 オプション、第 3 レベルのディレクトリ設定アイコン/
/最初の項目/
.caiwu2-2 .caiwu3- 1 {
/2 番目の項目 /
.caiwu2-2 .yingshou3-1 {
/3 番目の項目 /
.caiwu2-2 .yingfu3-1 {
/4 番目の項目 /
.caiwu2-2 .tongji3-1 {
/第 2 レベル、第 7 オプション、第 4 レベルのディレクトリ設定アイコン/
.caiwu2-3{
/最初のアイテム/
.caiwu2-3 .baobiao4 {
/2 番目のアイテム /
.caiwu2-3 .liebiao4 {
/3 番目の項目 /
.caiwu2-3 .xinzeng4 {
/第 2 層、第 2 レベル ul ulBox2、7 li options.jichu2/.xiaoshou2/.caigou2/.shengchan2/.kucun2/.caiwu2 第 2 レベル 6 は折り畳まれます /
/ は 3 番目の層 .jichu2-2 .xiaoshou2-2 .caigou2-2 .shengchan2-2 .kucun2-2 .caiwu2-2/
.ulBox2 .jichu2-2 に対応します。 .xiaoshou2-2、.caigou2-2、.shengchan2-2、.kucun2-2、.caiwu2-2 {
.ulBox2 .caiwu2-3 {
.非表示 {
/#Display!!/
.show {
display: block;
}
リーリー
###}###体{###
リーリー
ナビゲーション バーの背景
リーリー
}/
ナビゲーション バー ボタン
リーリー
}
.box a {
.a1{
リーリー
}
リーリー
}/
一番外側の大きなUL、第1層全体の位置
リーリー
}.ulBox1 リ {
リーリー
リーリー
/第 2 レベルのパブリック クラス.Arrow/
.ulBox2 .yonghu2,.jichu2,.xiaoshou2,.caigou2,.shengchan2,.kucun2,.caiwu2 {
/第 3 層のパブリック クラス。Arrow/
.ulBox2 .kehu3,.gongying3,.chanping3,.dingdan3,.baobiao3,.jihua3,.baobiao3-2, .shengcan3,.baobiao3-3,.cangku3,.ruku3,.chuku3,.baobiao3-4,
.caiwu3,.yingshou3,.yingfu3,.tongji3{
/レポート スタイル パブリック クラス/
.ulBox2 .baobiao3-1,.baobiao3-2-1,.baobiao3-3-1,.baobiao3-4-1 {
.ulBox1 .xitong{
.ulBox2 li{
.ulBox2 .yonghu1-1 {
.ulBox2 .jichu2-1 {
/第 2 レベル、第 2 オプション、第 3 レベルのディレクトリ、左に移動 /
.ulBox2 .jichu2 ul{
/第 2 レベル、第 2 オプション、第 3 レベルのディレクトリ アイコン設定/
/最初の項目/
.jichu2-2 .kehu3- 1 {
/2 番目の項目 /
.jichu2-2 .gongying3-1 {
/3 番目の項目 /
.jichu2-2 .chanping3-1 {
.ulBox2 .xiaoshou2 ul{
/2層目2項目設定アイコン email/
.ulBox2 .xiaoshou2-1 {
/第 2 レベル、第 3 オプション、第 3 レベルのディレクトリ アイコン設定/
/最初の項目/
.xiaoshou2-2 .dingdan3- 1 {
.ulBox2 .caigou2 ul {
/第 2 レベル、第 4 項目設定購入アイコン/
.ulBox2 .caigou2-1 {
/第 2 レベル、第 4 オプション、第 3 レベルのディレクトリ設定アイコン/
/最初の項目/
.caigou2-2 .jihua3- 1 {
.ulBox2 .shengchan2 ul {
/2 番目のレイヤー、5 番目のアイテムはプロダクションアイコンを設定します/
.ulBox2 .shengchan2-1 {
/第 2 レベル、第 5 オプション、第 3 レベルのディレクトリ設定アイコン/
/最初の項目/
.shengchan2-2 .shengchan3- 1 {
.ulBox2 .kucun2 ul {
/2層目6項目設定インベントリアイコン/
.ulBox2 .kucun2-1 {
/第2階層、第6オプション、第3階層のディレクトリ設定アイコン/
/最初の項目/
.kucun2-2 .cangku3- 1 {
/2 番目のアイテム /
.kucun2-2 .ruku3-1 {
/3 番目の項目 /
.kucun2-2 .chuku3-1 {
.ulBox2 .caiwu2 ul {
/第 2 レベル、7 番目のアイテム設定インベントリ アイコン/
.ulBox2 .caiwu2-1 {
/第 2 レベル、第 7 オプション、第 3 レベルのディレクトリ設定アイコン/
/最初の項目/
.caiwu2-2 .caiwu3- 1 {
/2 番目の項目 /
.caiwu2-2 .yingshou3-1 {
/3 番目の項目 /
.caiwu2-2 .yingfu3-1 {
/4 番目の項目 /
.caiwu2-2 .tongji3-1 {
/第 2 レベル、第 7 オプション、第 4 レベルのディレクトリ設定アイコン/
.caiwu2-3{
/最初のアイテム/
.caiwu2-3 .baobiao4 {
/2 番目のアイテム /
.caiwu2-3 .liebiao4 {
/3 番目の項目 /
.caiwu2-3 .xinzeng4 {
/第 2 層、第 2 レベル ul ulBox2、7 li options.jichu2/.xiaoshou2/.caigou2/.shengchan2/.kucun2/.caiwu2 第 2 レベル 6 は折り畳まれます /
/ は 3 番目の層 .jichu2-2 .xiaoshou2-2 .caigou2-2 .shengchan2-2 .kucun2-2 .caiwu2-2/
.ulBox2 .jichu2-2 に対応します。 .xiaoshou2-2、.caigou2-2、.shengchan2-2、.kucun2-2、.caiwu2-2 {
.ulBox2 .caiwu2-3 {
.非表示 {
/#Display!!/
.show {
display: block;
}2017/4/18 に zhengyongchun によって作成されました。
$(function () {
})
フレンドリーなサポート。 。 。
アドバイスをさせてください: 1. 質問のタイトルに誤字がなく、文章が滑らかである必要があります。送信する前に自分で見直してください。 2. サンプルコードは長すぎないでください。ここで 300 〜 400 行のコードを読んでください
キーコードを投稿した方が良いのではないでしょうか?