Tutoriel sur la classification des pages du grand menu de navigation des catégories sur le côté gauche du centre commercial

Cet effet est l'effet de masquage au survol utilisant CSS. Écrivons d'abord notre page HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城左侧大分类导航菜单</title>
</head>
<body>
<div class="hc_lnav">
    <div class="allbtn">
        <h2><a href="#"><strong>&nbsp;</strong>全部商品分类<i>&nbsp;</i></a></h2>
        <ul style="width:190px">
            <li class=a1>
                <div class=tx><a href="#"><i>&nbsp;</i>各地名优茶</a> </div>
                <dl>
                    <dt>热门</dt>
                    <dd>
                        <a href="#">西湖龙井</a>
                        <a href="#">金骏眉</a>
                        <a href="#">大红袍</a>
                        <a href="#">铁观音</a>
                    </dd>
                </dl>
                <dl>
                    <dt>名茶</dt>
                    <dd>
                        <a href="#">红茶</a>
                        <a href="#">绿茶</a>
                        <a href="#">乌龙茶</a>
                        <a href="#">黑茶</a>
                        <a href="#">白茶 </a>
                    </dd>
                </dl>
                <div class=pop>
                    <h3><a href="#">各地名优茶</a></h3>
                    <dl>
                        <dl>
                            <dt>绿茶</dt>
                            <dd>
                                <a class="" href="#">西湖龙井</a>
                                <a class=""  href="#">龙井</a>
                                <!--<a class=""  href="#">黄山毛峰</a>-->
                                <!--<a class=""  href="#">安吉白茶</a>-->
                                <!--<a class=""  href="#">其他绿茶</a>-->
 </dd>
                        </dl>
                        <dl>
                            <dt>乌龙茶</dt>
                            <dd>
                                <a class="" href="">铁观音</a>
                                <a class=""  href="">大红袍</a>
                                <!--<a class="" href="">水仙</a>-->
                                <!--<a class="" href="">肉桂</a>-->
                                <!--<a class="" href="">台湾乌龙</a>-->
                                <!--<a class="" href="">其他乌龙茶</a>-->
 </dd>
                        </dl>
                        <dl>
                            <dt>红茶</dt>
                            <dd>
                                <a class="" href="" >金骏眉</a>
                                <a class=""  href="">正山小种</a>
                                <!--<a class=""  href="">祁门红茶</a>-->
                                <!--<a class=""   href="">坦洋工夫</a>-->
                                <!--<a class=""  href="">其他红茶</a>-->
                                <!--<a class=""    href="">政和工夫</a>-->
                                <!--<a class=""   href="">滇红工夫</a>-->
 </dd>
                        </dl>
                        <dl>
                            <dt>黑茶</dt>
                            <dd>
                                <a class="" href="">白沙溪黑茶</a>
                                <a class=""  href="">普洱茶饼</a>
                                <!--<a class="" href="">普洱沱茶</a>-->
                                <!--<a class=""  href="">普洱茶砖</a>-->
                                <!--<a class=""  href="">普洱散茶</a>-->
                                <!--<a class="" href="">其他黑茶</a>-->
 </dd>
                        </dl>
                        <dl>
                            <dt>白茶</dt>
                            <dd>
                                <a class="" href="#">白牡丹</a>
                                <a class=""  href="">白毫银针</a>
                                <!--<a class="" href="">寿眉</a>-->
                                <!--<a class="" href="">其他白茶</a>-->
 </dd>
                        </dl>
                    </dl>
                    <dl>
                        <dt>品牌</dt>
                        <dd>
                            <a  href="">滋恩</a>
                            <a  href="">远荣</a>
                            <!--<a  href="">顶峰</a>-->
                            <!--<a  href="">公泰</a>-->
                            <!--<a  href="">一品堂</a>-->
                            <!--<a  href="">好吉</a>-->
                            <!--<a   href="">绿雪芽</a>-->
                            <!--<a  href="">台湾梅山制茶</a>-->
                            <!--<a href="" >白沙溪</a>-->
                            <!--<a href="">联兴茶叶</a>-->
 </dd>
                    </dl>
                    <dl>
                        <dt>价格</dt>
                        <dd>
                            <a  href="">100元及以下</a>
                            <a  href="">100-300元</a>
                            <!--<a  href="">300元及以上</a>-->
 </dd>
                    </dl>
                    <dl>
                        <dt>净含量</dt>
                        <dd>
                            <a  href="" >50g及以下</a>
                            <a   href="">51-100g</a>
                            <!--<a  href="">101-250g</a>-->
                            <!--<a   href="">250g以上</a>-->
 </dd>
                    </dl>
                    <dl>
                        <dt>包装</dt>
                        <dd>
                            <a href="">经济自饮装</a>
                            <a href="" >精美礼品装</a>
                        </dd>
                    </dl>
                    <div class=clr></div>
                    <div class=act><a href=""><img src="images/20150518092317.jpg" /></a> </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Nous divisons le code ci-dessus en un domaine caché de premier niveau et un domaine caché de deuxième niveau,

Classe de domaine caché de premier niveau=tx
Classe de domaine caché de deuxième niveau=pop

Dans le prochain chapitre, nous ajouterons des styles CSS à notre masquage au niveau de la page

Formation continue

nouveau fichier

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商城左侧大分类导航菜单</title> </head> <body> <div class="hc_lnav"> <div class="allbtn"> <h2><a href="#"><strong> </strong>全部商品分类<i> </i></a></h2> <ul style="width:190px"> <li class=a1> <div class=tx><a href="#"><i> </i>各地名优茶</a> </div> <dl> <dt>热门</dt> <dd> <a href="#">西湖龙井</a> <a href="#">金骏眉</a> <a href="#">大红袍</a> <a href="#">铁观音</a> </dd> </dl> <dl> <dt>名茶</dt> <dd> <a href="#">红茶</a> <a href="#">绿茶</a> <a href="#">乌龙茶</a> <a href="#">黑茶</a> <a href="#">白茶 </a> </dd> </dl> <div class=pop> <h3><a href="#">各地名优茶</a></h3> <dl> <dl> <dt>绿茶</dt> <dd> <a class="" href="#">西湖龙井</a> <a class="" href="#">龙井</a>    </dd> </dl> <dl> <dt>乌龙茶</dt> <dd> <a class="" href="">铁观音</a> <a class="" href="">大红袍</a>     </dd> </dl> <dl> <dt>红茶</dt> <dd> <a class="" href="" >金骏眉</a> <a class="" href="">正山小种</a>      </dd> </dl> <dl> <dt>黑茶</dt> <dd> <a class="" href="">白沙溪黑茶</a> <a class="" href="">普洱茶饼</a>     </dd> </dl> <dl> <dt>白茶</dt> <dd> <a class="" href="#">白牡丹</a> <a class="" href="">白毫银针</a>   </dd> </dl> </dl> <dl> <dt>品牌</dt> <dd> <a href="">滋恩</a> <a href="">远荣</a>         </dd> </dl> <dl> <dt>价格</dt> <dd> <a href="">100元及以下</a> <a href="">100-300元</a>  </dd> </dl> <dl> <dt>净含量</dt> <dd> <a href="" >50g及以下</a> <a href="">51-100g</a>   </dd> </dl> <dl> <dt>包装</dt> <dd> <a href="">经济自饮装</a> <a href="" >精美礼品装</a> </dd> </dl> <div class=clr></div> <div class=act><a href=""><img src="images/20150518092317.jpg" /></a> </div> </div> </li> </ul> </div> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique