前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >专栏 >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
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
4. 使用Mybatis完成增删改查操作
编程算法javaxmlmybatissql
在前面的篇章中，我们通过入门案例 以及 Mybatis 核心配置文件的标签说明，已经大概了解了一下 Mybatis 的基础使用。
Devops海洋的渔夫
2022/01/17
1.3K0
4. 使用Mybatis完成增删改查操作
java进阶|MyBatis系列文章(一)基础性文章的思考增删改查
数据库xmlsql
本篇文章主要是使用statetment最原生的方式操作数据库以及基于xml方式操作数据库，为什么自己又去写xml方式操作数据了呢，写了几篇示例程序觉得还是xml方式在支持动态sql方面有着强大的能力，嗯，后面自己会慢慢在用xml方式进行mybatis的操作吧。
码农王同学
2020/04/27
3480
4.Mybatis增删改查的简单实现
sql腾讯云测试服务
1.namespace namespace中的包名要和 mapper 接口名一致！ 2.select 选择，查询语句； id : 就是对应的namespace中的方法名 resultType : sql语句执行返回值的类型 parameterType : 参数类型 1.编写接口 /** * 调用xml方式 * @param id * @return */ public User selectUserForXml(Integer id); 2.编写对应m
DencyCheng
2020/11/17
2970
Mybatis入门 (思路清晰、轻松上手、并配有关键点解读)
xml编程算法数据库mybatisjava
MyBatis 是一款优秀的半自动的ORC持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO（Plain Old Java Objects，普通老式 Java 对象）为数据库中的记录。
天罡gg
2022/12/02
4820
Mybatis入门 (思路清晰、轻松上手、并配有关键点解读)
MyBatis 实战：增删改查入门
androidmybatisjdbcxml数据库
MyBatis 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO（Plain Old Java Objects，普通老式 Java 对象）为数据库中的记录。
耕耘实录
2021/12/07
5600
mybatis 实现增删改
mybatiscomimportpublicstring
reyeye
2023/10/13
1690
mybatis 实现增删改
java进阶|基于mybatis思考一些事情
xmlsqljarmybatisclasspath
没什么好介绍这个框架的，一款半自动化sql的关系映射框架，之所以会写这篇文章还是为了标注一下自己在写CRUD操作过程中的一些思考和理解。
码农王同学
2020/04/27
4380
MyBatis实现增删改查
腾讯云测试服务javaxml数据库mybatis
生成器这里选择Maven，然后名称可以自己命名，Archetype这里可以使用默认的也可以自己添加，这里使用自己添加的
愷龍
2022/12/20
5110
MyBatis实现增删改查
【Mybatis 入门指北】2、Mybatis 入门实例及 CRUD
xml腾讯云测试服务mybatishttpsmaven
上一篇文章中我们讲了什么是持久化以及 Mybatis 的相关简介，今天就来看看如何创建一个 Mybatis 入门实例以及如何利用 Mybatis 进行 CRUD。
村雨遥
2022/06/16
3390
【Mybatis 入门指北】2、Mybatis 入门实例及 CRUD
MyBatis增删改查（CRUD）操作
mybatis
CRUD操作指的就是增加（Create）、读取（Retrieve）、更新（Update）、删除（Delete）这四种基本数据库操作；
久绊A
2024/03/01
2030
二、搭建MyBatis采用xml方式，验证CRUD（增删改查操作）
模型xml人工智能mybatismybatis-plus
相关概念：ORM（Object Relationship Mapping）对象关系映射。
刘大猫
2025/03/09
600
Mybatis第二篇| CRUD，这才是程序员入门第一课
javahashmap官方文档xmlsql
增删改查（CRUD）是程序员必会的技能，我们大部分的时间也都是消耗在增删改查上，当然我们不能只做一个只会CRUD的程序员，当我们掌握并且熟练了CRUD后，我们可以对CRUD进行进一步的优化。这篇文章主要讲解的是如何通过Mybatis来实现CRUD。
Python进击者
2020/04/02
6950
MyBatis学习笔记(一) --- MyBatis入门
云数据库 SQL Serverxml编程算法sql数据库
MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code，并且改名为MyBatis 。2013年11月迁移到Github。 
挽风
2021/04/13
1.3K0
MyBatis学习笔记(一) --- MyBatis入门
day61_Mybatis学习笔记_01
其他
  1、执行sql_table.sql脚本，创建数据库表；   2、执行sql_data.sql初始化测试数据。
黑泽君
2018/11/08
1.4K0
SSM-Mybatis(1)[通俗易懂]
数据库mybatismaven编程算法java
注意 maven中的约定的事/src/main/resources中的配置文件会被导出，但是我们写的实现类xml文件在/src/main/java下，maven默认是不会导出的，所以需要手动配置
全栈程序员站长
2022/09/21
2470
SSM-Mybatis(1)[通俗易懂]
Mybatis增删改查操作
javamybatis
1. 增加数据操作 编写UserMapper映射文件 <!--插入操作--> <insert id="add" parameterType="com.xdr630.domain.User"> insert into user values(#{id},#{username},#{password}) </insert> 创建user表 [在这里插入图片描述] User实体类 public class User { private int id; private String user
兮动人
2022/03/06
5370
MyBatis 实现数据的增删改查
腾讯云测试服务xmlsql
1. 查询操作 select 1.1 根据各属性来查询用户 在 UserDao 中添加对应方法： /** * @param name 用户名 * @return 对应用户名的用户对象 * @description 根据用户名获取用户 * @date 2020/7/14 14:52 * @author cunyu1943 * @version 1.0 */ User getUserByName(String name); /** * @param password 密码 * @return 对应密码的用户对
村雨遥
2020/07/21
6360
Mybatis【5】-- Mybatis多种增删改查那些你会了么？
mybatis
前面我们学会了Mybatis如何配置数据库以及创建SqlSession，那怎么写呢？crud怎么写？
秦怀杂货店
2020/12/05
4420
Mybatis【5】-- Mybatis多种增删改查那些你会了么？
MyBatis 从入门到精通：CRUD操作详解
接口入门事务mybatiscrud
在 MyBatis 中，namespace 的包名要和 DAO/Mapper 接口的包名一致！
默 语
2024/11/20
850
Mybatis（三）增删改查
mybatisspring boot
在前面写到的一些数据库操作中，所有的 参数都是已知的，但是在实际情况中，这些id等信息都是未知的，所以说用别的符号代替它，使用的时候直接换成id即可。在获取参数时有两个方法，分别是${}和#{} ，它们的区别如下：
麻辣醉虾
2022/04/04
6520
Mybatis（三）增删改查
推荐阅读
编辑精选文章
鹅厂写码13年，我总结的程序员高效阅读方法论进程，线程，协程 - 你了解多少？微服务与分布式系统设计看这篇就够了！腾讯文档表格卡顿指标探索之路从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解微服务架构：由浅入深带你了解底层注册中心
相关讨论
视频通话常见问题？请教一下，懂得说一下，谢谢了？test一下？
相关课程
轻量应用构建训练营微信小程序应用实践_《锋运票务系统》Android
4. 使用Mybatis完成增删改查操作
1.3K0
java进阶|MyBatis系列文章(一)基础性文章的思考增删改查
3480
4.Mybatis增删改查的简单实现
2970
Mybatis入门 (思路清晰、轻松上手、并配有关键点解读)
4820
MyBatis 实战：增删改查入门
5600
mybatis 实现增删改
1690
java进阶|基于mybatis思考一些事情
4380
MyBatis实现增删改查
5110
【Mybatis 入门指北】2、Mybatis 入门实例及 CRUD
3390
MyBatis增删改查（CRUD）操作
2030
二、搭建MyBatis采用xml方式，验证CRUD（增删改查操作）
600
Mybatis第二篇| CRUD，这才是程序员入门第一课
6950
MyBatis学习笔记(一) --- MyBatis入门
1.3K0
day61_Mybatis学习笔记_01
1.4K0
SSM-Mybatis(1)[通俗易懂]
2470
Mybatis增删改查操作
5370
MyBatis 实现数据的增删改查
6360
Mybatis【5】-- Mybatis多种增删改查那些你会了么？
4420
MyBatis 从入门到精通：CRUD操作详解
850
Mybatis（三）增删改查
6520
相关推荐
4. 使用Mybatis完成增删改查操作
更多 >
前端达人0
LV.2
这个人很懒，什么都没有留下～
文章
777
获赞
1.7K
专栏
1
目录
  • 目录
  • 1 原理先知
  • 2 思路概要
  • 3 详细步骤
    • 3.1 下载资源
    • 3.2 项目创建架构
    • 3.3 style.css 编写
      • 3.3.1 分步详解
      • 3.3.2 总观代码
    • 3.4 menubar.html 编写
      • 3.4.1 分步详解
      • 3.4.2 总观代码
  • 4 成品效果展示
  • 5 总结
加入讨论
的问答专区 >
肥晨0
相关课程
一站式学习中心 >
轻量应用构建训练营
2786人在学
云服务器
轻量应用服务器
云计算
微信小程序应用实践_《锋运票务系统》
312人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
Android
157人在学
android
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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
查看详情【社区公告】 技术创作特训营有奖征文