电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】

本文链接：https://blog.csdn.net/qq_41136216/article/details/105604204

本文详细介绍了如何使用CSS3、HTML5和JavaScript设计电商项目【考拉海购网站】的分类导航栏，包括横向和垂直导航栏、三级菜单及商品推荐栏的布局与实现。通过分析页面布局，编写HTML、CSS和JS代码，展示了完整的实现过程。

摘要由CSDN通过智能技术生成

上一节：电商项目实战第二节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【搜索框那一栏】

文章目录

【考拉海购网站】之【分类导航栏】

【考拉海购网站】之【分类导航栏】

之前我们做了顶部导航和搜索框的部分，这一篇我来讲解如何制作分类导航部分
完成效果演示 >>>
在这里插入图片描述

第一步，分析页面布局

总共4个主要的部分：
  1，横向分类导航栏
  2，垂直分类导航栏（二级下拉菜单）
  3，三级菜单内容
  4，商品推荐栏
大致情况如下图所示：在这里插入图片描述

第二步，写需要的html标签

根据结构分析布局可得两个部分：
（1）水平导航栏
（2）垂直导航栏
在这里插入图片描述
还有个三级导航栏，就是在鼠标移动到左侧的导航栏的时候，会出现右侧的内容块 >>>

我们将右侧内容块分为两个区域，一个左侧区域，一个右侧区域 >>>

左侧内容 >>>

右侧内容 >>>

index.html文件代码

 <!-- 分类导航栏 -->
        <div class="classificationNav">
            <div class="allClass">
                <span>
                    <i></i>
                    <i></i>
                    <i></i>
                </span>
                <span>所有分类</span>
                <ul class="vertical">
                    <li>
                        <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>美容彩妆</span>
                        <div class="context">
                            <div class="leftContext">
                                <ul>
                                    <li><a href="">护肤</a></li>
                                    <li><a href="">洁面</a></li>
                                    <li><a href="" style="color: red;">卸妆</a></li>
                                    <li><a href="">爽肤水</a></li>
                                    <li><a href="" style="color: red;">眼部护理</a> </li>
                                    <li><a href="" style="color: red;">精华</a></li>
                                    <li><a href="">乳液</a></li>
                                    <li><a href="" style="color: red;">凝胶</a></li>
                                    <li><a href="">手</a></li>
                                    <li><a href="">足护理</a></li>
                                    <li><a href="">唇部护理</a></li>
                                    <li><a href="">乳液</a></li>
                                    <li><a href="">凝胶</a></li>
                                    <li><a href="">手</a></li>
                                    <li><a href="">足护理</a></li>
                                    <li><a href="">唇部护理</a></li>
                                    <li><a href="">乳液</a></li>
                                    <li><a href="">凝胶</a></li>
                                    <li>