Community
Learn
Tools Library
AI Tools
Leisure
search
English
search
logo
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

Tutorial on page classification of the large category navigation menu on the left side of the mall

This effect is the hover hidden effect using CSS. Let’s write out our HTML page first. 

<!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>

We divide the above code into a first-level hidden domain and a second-level hidden domain,

  • First-level hidden domain class=tx

  • Second-level hidden domain class=pop

##In the next chapter, we will add css styles to our page’s first-level hiding


Continuing Learning
new file
<!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>
Reset Code
Automatic operation
submit
logo
Preview Clear
Previous section
Next Section
Tutorial List
get help
  • Course Recommendations
  • Courseware download
Free CSS navigation bar production tutorial
Free HTML+CSS implementation of navigation bar secondary drop-down menu tutorial
Free ECMAScript new features in-depth video tutorial
Free Detailed video tutorial on Ajax principles
Free React basics in-depth video tutorial
Free React routing in-depth video tutorial
Free React Native basics video tutorial
Free PHP Fun Breakthrough Class
Free Ajax message board, waterfall flow video tutorial
Free AJAX cross-domain solution: JSONP video tutorial
Free Yexiutang HTML5+CSS3 video tutorial
Free React Native advanced in-depth video tutorial
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
496451
Let's briefly talk about starting a business in PHP Quick introduction to web front-end development Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum] Login verification and classic message board Computer network knowledge collection Quick Start Node.JS Full Version The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)