上一节：电商项目实战第二节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【搜索框那一栏】
文章目录
【考拉海购网站】之【分类导航栏】第一步，分析页面布局第二步，写需要的html标签index.html文件代码index.css文件代码index.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=" /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><a href="">手</a></li><li><a href="">足护理</a></li><li><a href="">唇部护理</a></li></ul><ul><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="">眼部护理</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></ul><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="">精华</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></ul><ul><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><a href="">唇部护理</a></li></ul></div><div class="rightContext"><ul><li><img src="./icc1uivj43.jpg" alt=""></li><li><img src="./idvqc2kv42.jpg" alt=""></li><li><img src="./ii7faa9k34_120_120.jpg" alt=""></li><li><img src="./icc1uivj43.jpg" alt=""></li><li><img src="./icc1uivj43.jpg" alt=""></li><li><img src="./ii7faa9k34_120_120.jpg" alt=""></li><img class="ad" src="./广告.jpg" alt=""></ul></div></div></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>母婴儿童</span></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>营养保障</span></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>数码家电</span></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>个人洗护</span></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>服饰鞋靴</span></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>运动户外</span></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>手表配饰</span></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>轻奢</span></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>家居生活</span></li><li> <img class="icon"src=" /1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"alt=""><span>环球美食</span></li></ul></div><ul class="horizontal"><li><a style="color: red;">首页</a></li><li><a>海外直邮</a></li><li><a>工厂店</a></li><li><a>品质奶粉</a></li><li><a>人气面膜</a></li><li><a>充值</a></li></ul></div>
index.css文件代码
/*------------------分类导航栏部分--------------- *//* classificationNav是classification+Nav，意思是分类导航 */.classificationNav {width: 1090px;}/* 给分类导航栏的水平导航栏设置相关属性 */.classificationNav ul.horizontal {width: 100%;height: 40px;}/* 对分类导航栏的水平导航栏选项进行行级块元素设置 */.classificationNav ul.horizontal li {display: inline-block;height: 40px;font-size: 14px;font-weight: bolder;line-height: 40px;overflow: hidden;padding: 0 20px;}/* 当鼠标经过导航栏里面的字体的时候，字体颜色变为红色，鼠标指针的图标变成小手 */.classificationNav ul.horizontal li a:hover {color: red;cursor: pointer;}/* 对全部分类选项进行设置 */.classificationNav .allClass {display: block;float: left;height: 40px;position: relative;line-height: 40px;width: 164px;text-align: center;font-size: 14px;margin-right: 30px;color: #fff;background-color: red;border-bottom: 1px solid #ff5160;cursor: pointer;}/* 对全部分类的标签头部三杠图标进行设置 */.classificationNav .allClass span i {display: block;width: 15px;border-top: 2px solid #ddd;height: 0px;margin-bottom: 3px;}.classificationNav .allClass span:nth-child(1) {float: left;margin-top: 14px;margin-left: 18px;margin-bottom: 3px;}.classificationNav .allClass span:nth-child(2) {margin-left: -30px;margin-bottom: 3px;}.classificationNav .allClass ul.vertical {display: none;margin-left: -40px;margin-top: 0px;}/* 当鼠标移动到全部分类的标签上时，垂直导航栏将会显示 */.classificationNav .allClass:hover ul.vertical {display: block;}/* 这是一个细节，对垂直导航栏的第一个li的顶部有红色边线 */.classificationNav .allClass ul.vertical>li:first-child {border-top: 1px solid #ff5160;}.classificationNav .allClass ul.vertical>li {width: 160px;height: 40px;list-style: none;border-left: 1px solid #ff1e32;border-right: 3px solid #ff1e32;border-bottom: 1px solid #ff626f;background: linear-gradient(90deg, red, #ff3264);}/* 这是一个细节，对垂直导航栏的最后一个li的顶部有白色边线 */.classificationNav .allClass ul.vertical>li:last-child {border-bottom: 1px solid #fff;}.classificationNav .allClass ul.vertical>li:hover {color: #ff1e32;background: #fff;}.classificationNav .allClass ul.vertical>li .icon {display: inline-block;vertical-align: middle;line-height: 16px;width: 20px;height: 20px;margin-left: -28px;}.classificationNav .allClass ul.vertical>li span {display: inline-block;vertical-align: middle;width: 70px;line-height: 16px;margin-left: 12px;white-space: nowrap;}/* 鼠标移动到垂直标签上面的时候，右侧内容会出现 */.classificationNav .allClass ul.vertical>li:nth-child:hover>.context {display: block;}/* 文本内的内容 */.context {display: block;position: absolute;width: 930px;height: 450px;margin-top: -41px;margin-left: 162px;color: black;background-color: rgb(241, 241, 241);border: 1px solid #ff1e32;cursor: default;}/* 文本左边区域 */.context .leftContext {width: 74%;height: 450px;background-color: rgb(255, 255, 255);}.context .leftContext ul {float: left;width: 44%;height: 46%;margin-left: -20px;margin-bottom: 16px;border-width: 0px;}.context .leftContext ul:nth-of-type(even) {margin-left: -41px;}.context .leftContext ul li {float: left;list-style: none;font-size: 13px;margin-left: 20px;}.context .leftContext ul li a{color: black;}.context .leftContext ul li:first-child {width: 100%;text-align: left;font-size: 14px;font-weight: 700;border-bottom: 1px solid #ddd;}/* 这是一个细节，当鼠标移动到超链接上的时候，出现下划线 */.context .leftContext ul li:hover a{text-decoration: underline;}/* 文本右边区域 */.context .rightContext {position: absolute;width: 32%;height: 440px;top: 22px;right: -24px;}.context .rightContext ul {width: 100%;height: 46%;border-width: 0px;}.context .rightContext ul li {float: left;list-style: none;font-size: 13px;margin-left: 1px;margin-top: -14px;}.context .rightContext ul li>img{width: 108px;height: 108px;border: 1px solid #eaeaea;margin: 0 3px 2px 0;cursor: pointer;}/* 右侧区域底部广告样式设定 */.context .rightContext ul img.ad{position: absolute;width: 220px;bottom: 22px;left: 42px;}
index.js文件代码
这部分代码可以不写，我这里是用来做测试用的，当鼠标移动到下垂标签上的时候，右侧内容块的文字和图片会被改变，假装我们在切换商品（为什么要假装？因为数据实在是太多了，我就简单放上一点做个表示，要补全还需自行扩展其他数据）
// 以下全部代码用于数据调整测试，仅仅是随机试验，可以不用var verticalLi = document.getElementsByClassName('vertical')[0].getElementsByTagName('li');var verticalImg = document.getElementsByClassName('rightContext')[0].getElementsByTagName('img')var leftContextLi = document.getElementsByClassName('leftContext')[0].getElementsByTagName('li');for (i in verticalLi) {verticalLi[i].onmouseover = function (e) {for (i in verticalLi) {if (verticalLi[i] === this) {console.log(i);res = i - 10;if (res < 0) {leftContextLi[0].innerText = '护肤';verticalImg[1].src = "./icc1uivj43.jpg";verticalImg[2].src = "./idvqc2kv42.jpg";verticalImg[3].src = "./ii7faa9k34_120_120.jpg";verticalImg[6].src = "./iqmfbh3y97_244_100.jpg";} else {res %= 2;switch (res) {case 0:leftContextLi[0].innerText = '偶数产品';verticalImg[1].src = "./1cj2db4o551_120_120.jpg";verticalImg[2].src = "./igats98t62_120_120.jpg";verticalImg[3].src = "./ii7faa9k34_120_120.jpg";verticalImg[6].src = "./iqmf9t6y71_244_100.jpg"break;case 1:leftContextLi[0].innerText = '结果为奇数';verticalImg[1].src = "./igats98t62_120_120.jpg";verticalImg[2].src = "./ii7faa9k34_120_120.jpg";verticalImg[3].src = "./1c8527h6j15_244_100.jpg";verticalImg[6].src = "./广告.jpg"break;default:break;}}}}}}
最终结果 >>>
下一节：电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
如果觉得《电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】》对你有帮助，请点赞、收藏，并留下你的观点哦！
