쇼핑몰 좌측 대형 카테고리 내비게이션 메뉴의 페이지 분류 튜토리얼

이 효과는 CSS를 사용한 호버 숨기기 효과입니다. 먼저 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>

위 코드를 1단계 숨겨진 도메인과 2단계 숨겨진 도메인인

  • 1단계 숨겨진 도메인으로 나눕니다. class=tx

  • 두 번째 수준 숨겨진 도메인 class=pop


다음 장에서는 페이지의 첫 번째 수준 숨김에 CSS 스타일을 추가하겠습니다


지속적인 학습
||
<!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> <!--<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>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~