Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >Python Web前端实战案例——电商网站商品菜单导航栏

Python Web前端实战案例——电商网站商品菜单导航栏

作者头像
荣仔_最靓的仔
发布于 2021-02-02 09:05:22
发布于 2021-02-02 09:05:22
2.2K00
代码可运行
举报
文章被收录于专栏：一些有趣的Python案例一些有趣的Python案例
运行总次数：0
代码可运行
关联问题
换一批

jQuery是一个快速、小巧、轻量级的、写的少、做的多、功能丰富的 JavaScript 库，是目前最流行的 JS 框架。利用它可以帮我们快速实现一些炫酷的效果。

目录

1 原理先知

商品菜单导航栏是每个电商网站首页呈现菜单的必备的部分，因为复杂的网页，功能性较强的网站菜单内容较多，一般会加入侧边栏导航。 通常情况下：一级菜单都是横向导航，二级菜单都是左侧边栏，如果有三级，放到内容页，实例图如下所示：

2 思路概要

利用 jQuery 插件完成电商网站首页菜单导航栏，并当点击“全部团购分类”时：弹出以下菜单栏，鼠标放在【美食】、【休闲】、【旅游】、【生活】、【丽人】等不同的列表项上时，右边显示相应的子菜单。整体效果图如下图所示：

3 详细步骤

3.1 下载资源

图片资源下载链接：https://pan.baidu.com/s/1uvYO7pimTwpKtr92Tdft1g 提取码：kue1

3.2 项目创建架构

3.3 style.css 编写

3.3.1 分步详解

在style.css文件中，设置页面通用样式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;} /* 全局选择器：设置padding和margin为0.所有列表默认样式设置为none */
a,img{border:0;color:#333;text-decoration:none;}/* a和img标签设置颜色，并且去掉默认的超链接下划线 */
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}/* 给body标签设置字体 */
.hide{display:none}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0} /* 清除浮动*/
.clearfix{*zoom:1}
em,i,s{font-style:normal;} /* 给em，i，设置字体样式 */

给head部分，即导航菜单的父级元素设置样式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/* .header-wrap给顶部div设置背景色为#fff,宽度占页面的宽度*/
.header-wrap{background-color:#fff;width:100%}
/* .navwrap给顶部导航栏div设置属性：背景是一张图片，x轴重复，设置宽高和border属性*/
.navwrap{background:#9b0000 url(../static/nav-bg.jpg) repeat-x;height:36px;border-top:1px #9c1900 solid;border-bottom:1px #8a1501 solid;box-shadow:0 1px 2px #999;-webkit-box-shadow:0 1px 2px #999;-moz-box-shadow:0 1px 2px #999}
/*#nav设置导航栏 */
#nav{height:36px;width:980px;margin:0 auto;position:relative;padding:0;z-index:99}

接下来设置导航一级菜单样式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
.navbar{height:36px;padding-left:210px;position:relative}
.navbar a{float:left;width:auto;text-align:center;height:36px;line-height:36px;color:#fff;padding:0 15px;text-decoration:none;font-size:15px;font-family:"\5FAE\8F6F\96C5\9ED1";white-space:nowrap;border-right:1px #931900 solid;border-left:1px #a52600 solid;position:relative}
.navbar a.first{border-left:0 none}
.navbar a.last{border-right:0 none}
.navbar a:hover{background-color:#8d1e01;color:#fff}
.navbar a.current{background-color:#6c1500;border-right:1px #6c1500 solid;box-shadow:0 0 10px #4f0000 inset;-webkit-box-shadow:0 0 10px #4f0000 inset;-moz-box-shadow:0 0 10px #4f0000 inset}
.navbar a:hover{text-decoration:none}
.navbar a.current:hover{color:#fff}
.navbar .navbt{width:105px;height:30px;position:absolute;top:3px;right:10px;background:url(../images/navbt.jpg) no-repeat;border:0 none;float:none;font-size:14px;line-height:30px;padding:0}
a.navbt span{background:url(../static/iconmap.jpg) no-repeat 1px 3px;padding-left:18px}
.navbar a.navbt:hover{background:transparent url(../static/navbt-hover.jpg) no-repeat}
.navbar a.navbt:hover span{background-image:url(../static/iconmap-hover.jpg)}

接下来设置二级菜单和三级菜单样式：包括背景图片和字体等

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
.pros{position:absolute;top:-1px;left:0;z-index:1000;width:210px;background-color:#d03322}
.pros h2{width:194px;height:38px;line-height:38px;color:#fff;padding-left:16px;font-size:16px;font-weight:400;font-family:"\5FAE\8F6F\96C5\9ED1"}
.subpage h2{background:url(../static/icon-dropdown.jpg) no-repeat 122px center;cursor:pointer}
.subpage .prosul{display:none}
.prosul{padding-left:3px;width:207px;margin-top:2px;_overflow:hidden;height:414px}
.prosul li,.prosul i{background:url(../static/iconcatg.png) no-repeat;}
li.food{background-position:10px 15px}
li.enjoy{background-position:10px -35px}
li.women{background-position:10px -85px}
li.life{background-position:10px -135px}
li.travel{background-position:10px -185px}
li.goods{background-position:10px -235px}
.prosul li{line-height:50px;height:50px;_overflow:hidden;border-bottom:1px #bb2d1e dashed;margin-right:3px;padding-left:38px}
.prosul li.prosahover{border-bottom:1px #fff solid;background-color:#fff;margin-right:0;padding-right:3px;}
.prosul a{color:#ffd0c0;padding-right:8px;_padding-right:6px;white-space:nowrap;display:inline-block;height:50px}
.prosul a.hot{background:url(../static/icon-hot.png) right 8px no-repeat}
.prosul li.prosahover a.hot{background-image:url(../static/icon-hot-hover.png)}
.prosul li.prosahover a{color:#636363}
.prosul li a.ti{font-size:14px;font-family:"\5FAE\8F6F\96C5\9ED1";color:#fff}
.prosul li.prosahover a.ti{color:#d03322}
.prosul li a:hover{color:#d03322}
.prosul li.nochild a:hover{color:#fff}
.prosul li i{float:right;display:block;width:3px;height:50px;text-indent:-999em;background-position:0 -276px;padding-right:12px}
.prosul li.prosahover i{background-position:0 -326px}
.prosul li.last{border-bottom:0 none}
.prosul li.bd-solid{border-bottom:1px #c22900 solid}
.prosul li.hotareas{background-image:none;padding-left:12px;line-height:26px;height:106px;*overflow:hidden}
.prosul li.hotareas i{line-height:30px;margin-top:-2px;height:40px;background-position:0 -279px}
.prosul li.hotareas a{line-height:30px;height:30px}
.prosul li.hotareas a.hot{background-position:right 0}
.prosul li h2{padding-left:0;line-height:40px;display:inline;font-size:14px;font-weight:400;}
.prosul li.prosahover h2{color:#d03322}
.prosmore{padding:15px 0 15px 15px;position:absolute;z-index:999;left:210px;top:38px;background-color:#fff;border:2px #d03322 solid;border-left:0 none;width:214px;height:382px}
.prosul .prosmore{text-align:left}
.prosul .prosmore span{float:left;height:36px;width:107px;line-height:22px}
.prosul li .prosmore a{height:18px;line-height:18px;padding:0 4px}
.prosul li .prosmore a:hover{background-color:#d03322;color:#fff}
.prosmore em{font-weight:400;padding-top:9px;display:inline-block}
.prosmore em.morehot{background:url(../static/icon-hot-more.png) right top no-repeat;padding-right:22px}

3.3.2 总观代码

style.css完整代码为

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;color:#333;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.hide{display:none}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.clearfix{*zoom:1}
em,i,s{font-style:normal;}

/* 导航样式 */
.header-wrap{background-color:#fff;width:100%}
.navwrap{background:#9b0000 url(../static/nav-bg.jpg) repeat-x;height:36px;border-top:1px #9c1900 solid;border-bottom:1px #8a1501 solid;box-shadow:0 1px 2px #999;-webkit-box-shadow:0 1px 2px #999;-moz-box-shadow:0 1px 2px #999}
#nav{height:36px;width:980px;margin:0 auto;position:relative;padding:0;z-index:99}
.navbar{height:36px;padding-left:210px;position:relative}
.navbar a{float:left;width:auto;text-align:center;height:36px;line-height:36px;color:#fff;padding:0 15px;text-decoration:none;font-size:15px;font-family:"\5FAE\8F6F\96C5\9ED1";white-space:nowrap;border-right:1px #931900 solid;border-left:1px #a52600 solid;position:relative}
.navbar a.first{border-left:0 none}
.navbar a.last{border-right:0 none}
.navbar a:hover{background-color:#8d1e01;color:#fff}
.navbar a.current{background-color:#6c1500;border-right:1px #6c1500 solid;box-shadow:0 0 10px #4f0000 inset;-webkit-box-shadow:0 0 10px #4f0000 inset;-moz-box-shadow:0 0 10px #4f0000 inset}
.navbar a:hover{text-decoration:none}
.navbar a.current:hover{color:#fff}
.navbar .navbt{width:105px;height:30px;position:absolute;top:3px;right:10px;background:url(../images/navbt.jpg) no-repeat;border:0 none;float:none;font-size:14px;line-height:30px;padding:0}
a.navbt span{background:url(../static/iconmap.jpg) no-repeat 1px 3px;padding-left:18px}
.navbar a.navbt:hover{background:transparent url(../static/navbt-hover.jpg) no-repeat}
.navbar a.navbt:hover span{background-image:url(../static/iconmap-hover.jpg)}

.pros{position:absolute;top:-1px;left:0;z-index:1000;width:210px;background-color:#d03322}
.pros h2{width:194px;height:38px;line-height:38px;color:#fff;padding-left:16px;font-size:16px;font-weight:400;font-family:"\5FAE\8F6F\96C5\9ED1"}
.subpage h2{background:url(../static/icon-dropdown.jpg) no-repeat 122px center;cursor:pointer}
.subpage .prosul{display:none}
.prosul{padding-left:3px;width:207px;margin-top:2px;_overflow:hidden;height:414px}
.prosul li,.prosul i{background:url(../static/iconcatg.png) no-repeat;}
li.food{background-position:10px 15px}
li.enjoy{background-position:10px -35px}
li.women{background-position:10px -85px}
li.life{background-position:10px -135px}
li.travel{background-position:10px -185px}
li.goods{background-position:10px -235px}
.prosul li{line-height:50px;height:50px;_overflow:hidden;border-bottom:1px #bb2d1e dashed;margin-right:3px;padding-left:38px}
.prosul li.prosahover{border-bottom:1px #fff solid;background-color:#fff;margin-right:0;padding-right:3px;}
.prosul a{color:#ffd0c0;padding-right:8px;_padding-right:6px;white-space:nowrap;display:inline-block;height:50px}
.prosul a.hot{background:url(../static/icon-hot.png) right 8px no-repeat}
.prosul li.prosahover a.hot{background-image:url(../static/icon-hot-hover.png)}
.prosul li.prosahover a{color:#636363}
.prosul li a.ti{font-size:14px;font-family:"\5FAE\8F6F\96C5\9ED1";color:#fff}
.prosul li.prosahover a.ti{color:#d03322}
.prosul li a:hover{color:#d03322}
.prosul li.nochild a:hover{color:#fff}
.prosul li i{float:right;display:block;width:3px;height:50px;text-indent:-999em;background-position:0 -276px;padding-right:12px}
.prosul li.prosahover i{background-position:0 -326px}
.prosul li.last{border-bottom:0 none}
.prosul li.bd-solid{border-bottom:1px #c22900 solid}
.prosul li.hotareas{background-image:none;padding-left:12px;line-height:26px;height:106px;*overflow:hidden}
.prosul li.hotareas i{line-height:30px;margin-top:-2px;height:40px;background-position:0 -279px}
.prosul li.hotareas a{line-height:30px;height:30px}
.prosul li.hotareas a.hot{background-position:right 0}
.prosul li h2{padding-left:0;line-height:40px;display:inline;font-size:14px;font-weight:400;}
.prosul li.prosahover h2{color:#d03322}
.prosmore{padding:15px 0 15px 15px;position:absolute;z-index:999;left:210px;top:38px;background-color:#fff;border:2px #d03322 solid;border-left:0 none;width:214px;height:382px}
.prosul .prosmore{text-align:left}
.prosul .prosmore span{float:left;height:36px;width:107px;line-height:22px}
.prosul li .prosmore a{height:18px;line-height:18px;padding:0 4px}
.prosul li .prosmore a:hover{background-color:#d03322;color:#fff}
.prosmore em{font-weight:400;padding-top:9px;display:inline-block}
.prosmore em.morehot{background:url(../static/icon-hot-more.png) right top no-repeat;padding-right:22px}

3.4 menubar.html 编写

3.4.1 分步详解

在menubar.html的body标签中，用div布局页面，因为是导航菜单栏，每个菜单都可以点击进去，所以用a标签定义【团购地图】、【首页】、【餐饮美食】等。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div>
    <div>
	  <div>
		<div>
			<a href="#"><span>团购地图</span></a>
			<a href="#">首页</a>
			<a href="#">餐饮美食</a>
			<a href="#">休闲娱乐</a>
			<a href="#">旅游住宿</a>
			<a href="#">生活服务</a>
			<a href="#">丽人</a>
			<a href="#">商品</a>
		</div>
	    <div>
	        <h2>全部团购分类</h2>
        </div>
     </div>
   </div>
</div>

当点击左边【全部团购分类】时，需要弹出子菜单，子菜单如图所示：总共有7个子菜单

所以在【全部团购分类】所在的div中，用无序列表定义7个子菜单列表

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<ul>  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
</ul>

第一个 li 中效果如下图所示的白色背景部分，主要是【美食】相关的，具体菜单用 a 标签包裹

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<li>  
    <i>&gt;</i>  
    <a  href="#">美食</a>  
    <a  href="#">地方菜</a>  
    <a  href="#">火锅</a>  
    <div>  
        <span><em><a href="#">全部(117)</a></em></span>  
        <span><em><a href="#">火锅(17)</a></em></span>  
        <span><em><a href="#">烧烤(16)</a></em></span>  
        <span><em><a href="#">西餐(9)</a></em></span>  
        <span><em><a href="#">海鲜(37)</a></em></span>  
        <span><em><a href="#">地方菜(5)</a></em></span>  
        <span><em><a href="#">日韩料理(2)</a></em></span>  
        <span><em><a href="#">快餐(2)</a></em></span>  
        <span><em><a href="#">蛋糕(9)</a></em></span>  
        <span><em><a href="#">其他(7)</a></em></span>  
        <span><em><a href="#">下午茶(5)</a></em></span>  
        <span><em><a href="#">咖啡(8)</a></em></span>  
    </div>  
</li>

同理，定义第 2~7 个 li，依此为【休闲】、【旅游】、【生活】、【丽人】、【商品】、【热门搜索】，每个 li 下面还有子菜单，当鼠标移到上面时在右边显现出来，子菜单也用 div 定义，具体内容用 a 标签包裹。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<li>
	<i>&gt;</i>
	<a  href="#">休闲</a>
	<a  href="#">电影</a>
	<a  href="#">KTV</a>
	<div>
	    <span><em><a href="#">全部(663)</a></em></span>
		<span><em><a href="#">电影(18)</a></em></span>
		<span><em><a href="#">KTV(8)</a></em></span>
		<span><em><a href="#">运动健身(95)</a></em></span>
		<span><em><a href="#">游乐电玩(48)</a></em></span>
		<span><em><a href="#">展览演出(13)</a></em></span>
		<span><em><a href="#">足疗按摩(8)</a></em></span>
		<span><em><a href="#">洗浴(11)</a></em></span>
		<span><em><a href="#">其他(29)</a></em></span>
		<span><em><a href="#">采摘(2)</a></em></span>
		<span><em><a href="#">滑雪(4)</a></em></span>
		<span><em><a href="#">温泉(427)</a></em></span>
	</div>
</li>
<li>
	<i>&gt;</i>
	<a href="#">旅游</a>
	<a href="#">酒店</a>
	<a href="#">旅游</a>
	<div>
		<span><em><a href="#">全部(13602)</a></em></span>
		<span><em><a href="#">酒店(9044)</a></em></span>
		<span><em><a href="#">旅游(1775)</a></em></span>
		<span><em><a href="#">景点公园(935)</a></em></span>
		<span><em><a href="#">其他(1848)</a></em></span>
	</div>
</li>
<li>
	<i>&gt;</i>
	<a href="#">生活</a>
	<a href="#">婚纱摄影</a>
	<a href="#">写真</a>
	<div>
		<span><em><a href="#">全部(333)</a></em></span>
		<span><em><a href="#">写真(9)</a></em></span>
		<span><em><a href="#">婚纱摄影(212)</a></em></span>
		<span><em><a href="#">儿童摄影(1)</a></em></span>
		<span><em><a href="#">汽车养护(3)</a></em></span>
		<span><em><a href="#">教育培训(91)</a></em></span>
		<span><em><a href="#">体检(8)</a></em></span>
		<span><em><a href="#">口腔(1)</a></em></span>
		<span><em><a href="#">其他(8)</a></em></span>
	</div>
</li>
<li>
	<i>&gt;</i>
	<a href="#">丽人</a>
	<a href="#">美发</a>
	<a href="#">美容美体</a>
	<div>
		<span><em><a href="#">全部(14)</a></em></span>
		<span><em><a href="#">美发(7)</a></em></span>
		<span><em><a href="#">美甲(3)</a></em></span>
		<span><em><a href="#">美容美体(4)</a></em></span>
	</div>
</li>
<li>
	<i>&gt;</i>
	<a href="#">商品</a>
	<a href="#">服装</a>
	<a href="#">鞋靴</a>
	<div class="prosmore hide">
		<span><em><a href="#">全部(112343)</a> </em></span>
		<span><em><a href="#">服装(32747)</a> </em></span>
		<span><em><a href="#">生活家居(14441)</a> </em></span>
		<span><em><a href="#">食品饮料(10116)</a> </em></span>
		<span><em><a href="#">化妆品(12707)</a> </em></span>
		<span><em><a href="#">箱包(7621)</a> </em></span>
		<span><em><a href="#">家用电器(3775)</a> </em></span>
		<span><em><a href="#">手机数码(3639)</a> </em></span>
		<span><em><a href="#">鞋靴(11686)</a> </em></span>
		<span><em><a href="#">饰品(4558)</a> </em></span>
		<span><em><a href="#">手表(1482)</a> </em></span>
		<span><em><a href="#">母婴用品(3659)</a> </em></span>
		<span><em><a href="#">玩具(777)</a> </em></span>
		<span><em><a href="#">抽奖(7)</a> </em></span>
		<span><em><a href="#">礼品(197)</a> </em></span>
		<span><em><a href="#">其他(4931)</a> </em></span>
	</div>
</li>
<li>
	<h2>热门搜索</h2>
	<br />
	<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>
</li>

之后将 style.css 引入 menubar.html，并将我们设置的 id、类样式设置到标签上，与此同时，我们还需要引入 jquery-3.3.1.min.js 设置鼠标点击、悬停事件。 点击事件：先用 jQuery 选择器选中【全部团购分类】，再选中团购分类下的无序列表，点击【全部团购分类】让列表显示和隐藏。toggle() 函数用于实现被选中元素的显示和隐藏。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
            var $subblock = $(".subpage")
            var $head=$subblock.find('h2')//选中【全部团购分类】
			var $ul = $("#proinfo")//再选中团购分类下的无序列表
			//点击【全部团购分类】时触发的点击事件
			$head.click(function(e){
				e.stopPropagation(); //event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
				$ul.toggle() //列表显示和隐藏进行切换，用toggle实现
			});
			//点击列表中的每一项时，触发的函数：不能影响父元素（显示和隐藏）的效果
			$ul.click(function(event){
				event.stopPropagation();
			});
			//点击页面上任何地方时，让列表隐藏起来
			$(document).click(function(){
				$ul.hide();
			});

最后定义列表鼠标悬停事件：hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。触发 mouseenter 和 mouseleave 事件。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
$lis = $ul.find("li"), //选中ul下的所有li  
            $lis.hover(  
            function(){//第一个函数：触发 mouseenter 事件  
                if(!$(this).hasClass('nochild')){  
                    $(this).addClass("prosahover"); //添加子菜单样式  
                    $(this).find(".prosmore").removeClass('hide'); //移除隐藏的样式  
                }  
            },  
            function(){//第二个函数：触发 mouseleave 事件  
                if(!$(this).hasClass('nochild')){  
                    if($(this).hasClass("prosahover")){  
                        $(this).removeClass("prosahover");  
                    }  
                    $(this).find(".prosmore").addClass('hide');  
                }  
            });

3.4.2 总观代码

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jquery带商品分类侧边栏列表的商城导航菜单</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
		<div class="header-wrap">
			<div class="navwrap">
				<div id="nav">
					<div class="navbar clearfix">
						<a class="navbt" href="#"><span>团购地图</span></a>
						<a class="current" href="#">首页</a>
						<a href="#">餐饮美食</a>
						<a href="#">休闲娱乐</a>
						<a href="#">旅游住宿</a>
						<a href="#">生活服务</a>
						<a href="#">丽人</a>
						<a href="#">商品</a>
					</div>
					<div class="pros subpage">
						<h2>全部团购分类</h2>
						<ul class="prosul clearfix" id="proinfo">
							<li class="food">
								<i>&gt;</i>
								<a class="ti" href="#">美食</a>
								<a class="hot" href="#">地方菜</a>
								<a href="#">火锅</a>
								<div class="prosmore hide">
									<span><em><a href="#">全部(117)</a></em></span>
									<span><em class="morehot"><a class="morehot" href="#">火锅(17)</a></em></span>
									<span><em class="morehot"><a class="morehot" href="#">烧烤(16)</a></em></span>
									<span><em><a href="#">西餐(9)</a></em></span>
									<span><em><a href="#">海鲜(37)</a></em></span>
									<span><em><a href="#">地方菜(5)</a></em></span>
									<span><em><a href="#">日韩料理(2)</a></em></span>
									<span><em><a href="#">快餐(2)</a></em></span>
									<span><em class="morehot"><a class="morehot" href="#">蛋糕(9)</a></em></span>
									<span><em><a href="#">其他(7)</a></em></span>
									<span><em><a href="#">下午茶(5)</a></em></span>
									<span><em><a href="#">咖啡(8)</a></em></span>
								</div>
							</li>
							<li class="enjoy">
								<i>&gt;</i>
								<a class="ti" href="#">休闲</a>
								<a class="hot" href="#">电影</a>
								<a href="#">KTV</a>
								<div class="prosmore hide">
									<span><em><a href="#">全部(663)</a></em></span>
									<span><em class="morehot"><a class="morehot" href="#">电影(18)</a></em></span>
									<span><em class="morehot"><a class="morehot" href="#">KTV(8)</a></em></span>
									<span><em><a href="#">运动健身(95)</a></em></span>
									<span><em><a href="#">游乐电玩(48)</a></em></span>
									<span><em><a href="#">展览演出(13)</a></em></span>
									<span><em class="morehot"><a class="morehot" href="#">足疗按摩(8)</a></em></span>
									<span><em><a href="#">洗浴(11)</a></em></span>
									<span><em><a href="#">其他(29)</a></em></span>
									<span><em><a href="#">采摘(2)</a></em></span>
									<span><em><a href="#">滑雪(4)</a></em></span>
									<span><em><a href="#">温泉(427)</a></em></span>
								</div>
							</li>
							<li class="travel">
								<i>&gt;</i>
								<a class="ti" href="#">旅游</a>
								<a class="hot" href="#">酒店</a>
								<a href="#">旅游</a>
								<div class="prosmore hide">
									<span><em><a href="#">全部(13602)</a></em></span>
									<span><em class="morehot"><a class="morehot" href="#">酒店(9044)</a></em></span>
									<span><em><a href="#">旅游(1775)</a></em></span>
									<span><em><a href="#">景点公园(935)</a></em></span>
									<span><em><a href="#">其他(1848)</a></em></span>
								</div>
							</li>
							<li class="life">
								<i>&gt;</i>
								<a class="ti" href="#">生活</a>
								<a href="#">婚纱摄影</a>
								<a href="#">写真</a>
								<div class="prosmore hide">
									<span><em><a href="#">全部(333)</a></em></span>
									<span><em><a href="#">写真(9)</a></em></span>
									<span><em class="morehot"><a class="morehot" href="#">婚纱摄影(212)</a></em></span>
									<span><em><a href="#">儿童摄影(1)</a></em></span>
									<span><em><a href="#">汽车养护(3)</a></em></span>
									<span><em><a href="#">教育培训(91)</a></em></span>
									<span><em><a href="#">体检(8)</a></em></span>
									<span><em><a href="#">口腔(1)</a></em></span>
									<span><em><a href="#">其他(8)</a></em></span>
								</div>
							</li>
							<li class="women">
								<i>&gt;</i>
								<a class="ti" href="#">丽人</a>
								<a href="#">美发</a>
								<a href="#">美容美体</a>
								<div class="prosmore hide">
									<span><em><a href="#">全部(14)</a></em></span>
									<span><em class="morehot"><a class="morehot" href="#">美发(7)</a></em></span>
									<span><em><a href="#">美甲(3)</a></em></span>
									<span><em><a href="#">美容美体(4)</a></em></span>
								</div>
							</li>
							<li class="goods bd-solid">
								<i>&gt;</i>
								<a class="ti" href="#">商品</a>
								<a href="#">服装</a>
								<a href="#">鞋靴</a>
								<div class="prosmore hide">
									<span><em><a href="#">全部(112343)</a> </em></span>
									<span><em class="morehot"><a class="morehot" href="#">服装(32747)</a> </em></span>
									<span><em><a href="#">生活家居(14441)</a> </em></span>
									<span><em><a href="#">食品饮料(10116)</a> </em></span>
									<span><em><a href="#">化妆品(12707)</a> </em></span>
									<span><em><a href="#">箱包(7621)</a> </em></span>
									<span><em><a href="#">家用电器(3775)</a> </em></span>
									<span><em><a href="#">手机数码(3639)</a> </em></span>
									<span><em><a href="#">鞋靴(11686)</a> </em></span>
									<span><em><a href="#">饰品(4558)</a> </em></span>
									<span><em><a href="#">手表(1482)</a> </em></span>
									<span><em><a href="#">母婴用品(3659)</a> </em></span>
									<span><em><a href="#">玩具(777)</a> </em></span>
									<span><em><a href="#">抽奖(7)</a> </em></span>
									<span><em><a href="#">礼品(197)</a> </em></span>
									<span><em><a href="#">其他(4931)</a> </em></span>
								</div>
							</li>
							<li class="hotareas nochild last">
								<h2>热门搜索</h2>
								<br />
								<a class="mhs" href="#">美食</a>
								<a class="mhs" href="#">游泳</a>
								<a class="mhs" href="#">蛋糕</a>
								<a class="mhs" href="#">电影</a>
								<a class="mhs" href="#">眼镜</a>
								<a class="mhs" href="#">自助餐</a>
								<a class="mhs" href="#">酒吧</a>
								<a class="mhs" href="#">美甲</a>
								<a class="mhs" href="#">酒店</a>
								<a class="mhs" href="#">粽子</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	<script src="static/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $subblock = $(".subpage")
			var $head=$subblock.find('h2')//选中【全部团购分类】
			var $ul = $("#proinfo") //再选中团购分类下的无序列表
			//点击【全部团购分类】时触发的点击事件
			$head.click(function(e){
				e.stopPropagation(); //event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
				$ul.toggle() //列表显示和隐藏进行切换，用toggle实现
			});
			//点击列表中的每一项时，触发的函数：不能影响父元素（显示和隐藏）的效果
			$ul.click(function(event){
				event.stopPropagation();
			});
			//点击页面上任何地方时，让列表隐藏起来
			$(document).click(function(){
				$ul.hide();
			});

			$lis = $ul.find("li"), //选中ul下的所有li
			$lis.hover(
			function(){//第一个函数：触发 mouseenter 事件
				if(!$(this).hasClass('nochild')){
					$(this).addClass("prosahover"); //添加子菜单样式
					$(this).find(".prosmore").removeClass('hide'); //移除隐藏的样式
				}
			},
			function(){//第二个函数：触发 mouseleave 事件
				if(!$(this).hasClass('nochild')){
					if($(this).hasClass("prosahover")){
						$(this).removeClass("prosahover");
					}
					$(this).find(".prosmore").addClass('hide');
				}
			});
		});
		</script>
</body>
</html>

4 成品效果展示

5 总结

此效果为大多数电商网站首页菜单必须部分，如京东、淘宝等。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/01/08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
css
html
电商
jquery

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

css
html
电商
jquery
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
1479
Go 开发者必备：Protocol Buffers 入门指南
714
10分钟带你彻底搞懂分布式链路跟踪
384
多租户的 4 种常用方案
863
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
651
60页PPT全解：DeepSeek系列论文技术要点整理
1338
WEB入门.九 导航菜单
设计网站web框架入门
上一章节中讲解了 background 属性的用法，以及两种主流的背景特效——页面图片整合技术以及滑动门技术，设计师可以使用这两种技术制作出多种页面背景特效，如平滑投票、Tab 导航菜单等。
张哥编程
2024/12/17
2020
WEB入门.九 导航菜单
每日分享html特效篇之一个菜单栏、一个渐变背景、一个加载特效、七个导航栏特效
网站腾讯云开发者社区html
1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。
淼学派对
2022/11/20
2.5K0
每日分享html特效篇之一个菜单栏、一个渐变背景、一个加载特效、七个导航栏特效
大一Web课程设计：企业网站——HTML+CSS+JavaScript电子购物商城(37页面)
javascripthtmlcssjqueryjava
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 --- @TOC 一
IT司马青衫
2022/08/14
4540
大一Web课程设计：企业网站——HTML+CSS+JavaScript电子购物商城(37页面)
CSS 特征布局实例 - 导航栏、新闻列表、淘宝布局
blockdisplaypointtext布局
重点：这里不能使用float:left的方式，因为这种方式不方便于居中。如果使用偏移的方式居中，当页数增加的时候，可能就不居中了。
Devops海洋的渔夫
2019/06/02
1.9K0
【web课程设计】HTML+CSS仿QQ音乐网站
javascripthtmljavacssjquery
](https://blog.csdn.net/bigwhiteshark/category_11924503.html)
IT司马青衫
2022/08/11
1.1K0
【web课程设计】HTML+CSS仿QQ音乐网站
从零开始学 Web 之 移动Web（九）微金所案例
githubhttpshtml
相关源代码已放置github：https://github.com/Daotin/Web/blob/master/Code/src/11/wjs.zip
Daotin
2018/08/31
1.5K0
从零开始学 Web 之 移动Web（九）微金所案例
大学生HTML期末作业网页：使用DIV+CSS技术制作一个简单的小说网站 (3个页面 登录+注册+首页 )
javascripthtmlcssjqueryjava
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！ 一、👨‍🎓网站题目 🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。 <hr> 二、✍️网站描述 🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+
IT司马青衫
2022/08/13
1.7K0
大学生HTML期末作业网页：使用DIV+CSS技术制作一个简单的小说网站 (3个页面 登录+注册+首页 )
电商项目（上）
编程算法
:nth-last-child(n): 选择器匹配属于其元素的第n个子元素的每个元素
达达前端
2019/07/03
3.8K0
电商项目（上）
利用JQuery实现复杂的顶部导航栏功能
jqueryhtml
今天给大家介绍一下如何利用JQuery实现复杂的顶部导航栏功能，复杂指的是导航栏选项下面显示的是文字+图片的内容。 简单的导航栏我们一般利用多个ul+li进行嵌套使用，可以实现多级的导航栏功能，可是界
林老师带你学编程
2018/01/04
5.2K0
利用JQuery实现复杂的顶部导航栏功能
HTML 实现仿 Windows 桌面主题特效
https网络安全htmlcssgithub
1.CSDN资源下载：https://download.csdn.net/download/qq_44273429/85524325 2.GitHub 地址：https://github.com/wanghao221/moyu
海拥
2022/06/05
3.3K0
HTML 实现仿 Windows 桌面主题特效
计算机毕业设计：基于html制作大学生网上报到系统响应式模板项目源码
javascripthtmlcssjqueryjava
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师，
IT司马青衫
2022/08/18
7040
计算机毕业设计：基于html制作大学生网上报到系统响应式模板项目源码
7b2美化-添加好看的底部介绍
phpcssfooter
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
小狐狸说事
2022/11/16
6990
7b2美化-添加好看的底部介绍
HTML+CSS实战(一)——导航条菜单的制作
cssjavahttps网络安全
一、垂直导航菜单的制作 1、基本的样式清除： *{margin:0;padding:0} 2、无序列表圆点去除： ul{list-style:none} 3、下划线去除： a{text-decoration:none} 4、文本缩进标签 text-indent 不会影响总体宽度（padding会） 5、使用行高line-height可以实现文字默认居中，前提是行高和width相等。 6、需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block}hover格式 a:hover{}//通过a：hover，可以为菜单增加交互效果。
全栈程序员站长
2022/09/15
3.1K0
HTML+CSS实战(一)——导航条菜单的制作
分享一个自用emlog手机底部导航加样式代码
classdisplaymenupadding手机
看到很多朋友都要这个手机端底部导航索性就分享了，这玩意其实我也不是不舍得发，是懒得而已 这玩意我都是扣别人的所以这个东西自己扣就行了，如果你不会扣那我赶紧我分享出来你也不会用。
用户8099761
2023/05/11
7420
WordPress动漫图片主题cxudy模板代码
模板引擎
WordPress多功能CX-UDY图片主题是基于wordpress开源程序开发的简洁时常自适应图片模板，适用于各种图片写真类型、图片壁纸类、博客站、多媒体分享站等类型站点。图片主题效果演示http://m.bokequ.com/dongman/gc
博客趣
2024/02/14
4120
WordPress动漫图片主题cxudy模板代码
基于HTML+CSS+JavaScript大学生静态后台管理7个页面(带JS商品删除)
javascripthtmlcssjqueryjava
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师，技
IT司马青衫
2022/08/16
3.6K0
基于HTML+CSS+JavaScript大学生静态后台管理7个页面(带JS商品删除)
WEB入门.八 背景特效
web浏览器入门特效background
在前面章节中，已经系统地讲解了页面设计中常见的布局模型，主要内容涉及到流动模型和浮动模型。理解了如何在盒子模型的基础上，使用流动模型与浮动模型设计出如网易、淘宝等大型门户网站的页面布局。
张哥编程
2024/12/17
1760
WEB入门.八 背景特效
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
css网站容器继承配置
该盒子是处于版心位置 , 先为其设置版心的样式 , 版心宽度 1200 像素 , 水平居中 , 先将版心的样式设置给盒子 ;
韩曙亮
2023/04/06
5.4K0
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
校园学生网页设计HTML
htmlcssjavascript
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主    💂 作者主页: 【主页——🚀获取更多优质源码】   🎓  web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】   🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】  🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】  🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】  🥇  关于作者:
IT司马青衫
2022/08/10
1.9K0
校园学生网页设计HTML
h5电商模板_网站模板
csslinuxseohtml网站
搜索引擎优化，又称为 SEO ，即 Search Engine Optimization 两种优化方式：氪金，优化网页相关信息 SEO 三大标签
全栈程序员站长
2022/11/10
8.1K0
h5电商模板_网站模板
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪多租户的 4 种常用方案亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？60页PPT全解：DeepSeek系列论文技术要点整理
相关讨论
西班牙电商？电商平台能 维吾尔语版吗？求大神，做垮境电商选哪个套餐？
相关课程
AI驱动的TDSQL-Cserverless实战营EdgeOne一站式玩转网站加速与防护实战营微信公众号在线学习平台搭建实践_《硅谷课堂》
WEB入门.九 导航菜单
2020
每日分享html特效篇之一个菜单栏、一个渐变背景、一个加载特效、七个导航栏特效
2.5K0
大一Web课程设计：企业网站——HTML+CSS+JavaScript电子购物商城(37页面)
4540
CSS 特征布局实例 - 导航栏、新闻列表、淘宝布局
1.9K0
【web课程设计】HTML+CSS仿QQ音乐网站
1.1K0
从零开始学 Web 之 移动Web（九）微金所案例
1.5K0
大学生HTML期末作业网页：使用DIV+CSS技术制作一个简单的小说网站 (3个页面 登录+注册+首页 )
1.7K0
电商项目（上）
3.8K0
利用JQuery实现复杂的顶部导航栏功能
5.2K0
HTML 实现仿 Windows 桌面主题特效
3.3K0
计算机毕业设计：基于html制作大学生网上报到系统响应式模板项目源码
7040
7b2美化-添加好看的底部介绍
6990
HTML+CSS实战(一)——导航条菜单的制作
3.1K0
分享一个自用emlog手机底部导航加样式代码
7420
WordPress动漫图片主题cxudy模板代码
4120
基于HTML+CSS+JavaScript大学生静态后台管理7个页面(带JS商品删除)
3.6K0
WEB入门.八 背景特效
1760
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
5.4K0
校园学生网页设计HTML
1.9K0
h5电商模板_网站模板
8.1K0
相关推荐
WEB入门.九 导航菜单
更多 >
荣仔_最靓的仔0
LV.1
这个人很懒，什么都没有留下～
文章
176
获赞
339
专栏
1
作者相关精选
换一批
加入讨论
的问答专区 >
大Hero0
相关课程
一站式学习中心 >
AI驱动的TDSQL-Cserverless实战营
1413人在学
云原生数据库 TDSQL-C
EdgeOne一站式玩转网站加速与防护实战营
1278人在学
EdgeOne
微信公众号在线学习平台搭建实践_《硅谷课堂》
383人在学
文件存储
云点播
CODING DevOps
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
3
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验