jQuery电商网站常用商品分类导航菜单代码.zip资源-CSDN文库

共13个文件

jpg：6个

png：4个

css：1个

版权申诉

jquery代码

jquery特效

jquery插件

86 浏览量 2023-09-23 09:55:44 上传评论收藏 52KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery电商网站常用商品分类导航菜单代码.zip （13个子文件）

jquery-1.11.0.min.js 94KB

css

style.css 5KB

index.html 8KB

images

nav-bg.jpg 1KB

icon-hot-more.png 1KB

iconmap-hover.jpg 2KB

icon-hot-hover.png 1KB

navbt.jpg 3KB

iconcatg.png 4KB

icon-dropdown.jpg 1KB

iconmap.jpg 2KB

navbt-hover.jpg 3KB

icon-hot.png 1KB

<!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><script src="/demos/googlegg.js"></script> <div class="header-wrap"> <div class="navwrap"> <div id="nav"> <div class="navbar clearfix"> <a class="navbt" href="#">团购地图</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"> > <a class="ti" href="#">美食</a> <a class="hot" href="#">地方菜</a> <a href="#">火锅</a> <div class="prosmore hide"> <a href="#">全部(117)</a> <a class="morehot" href="#">火锅(17)</a> <a class="morehot" href="#">烧烤(16)</a> <a href="#">西餐(9)</a> <a href="#">海鲜(37)</a> <a href="#">地方菜(5)</a> <a href="#">日韩料理(2)</a> <a href="#">快餐(2)</a> <a class="morehot" href="#">蛋糕(9)</a> <a href="#">其他(7)</a> <a href="#">下午茶(5)</a> <a href="#">咖啡(8)</a> </div> </li> <li class="enjoy"> > <a class="ti" href="#">休闲</a> <a class="hot" href="#">电影</a> <a href="#">KTV</a> <div class="prosmore hide"> <a href="#">全部(663)</a> <a class="morehot" href="#">电影(18)</a> <a class="morehot" href="#">KTV(8)</a> <a href="#">运动健身(95)</a> <a href="#">游乐电玩(48)</a> <a href="#">展览演出(13)</a> <a class="morehot" href="#">足疗按摩(8)</a> <a href="#">洗浴(11)</a> <a href="#">其他(29)</a> <a href="#">采摘(2)</a> <a href="#">滑雪(4)</a> <a href="#">温泉(427)</a> </div> </li> <li class="travel"> > <a class="ti" href="#">旅游</a> <a class="hot" href="#">酒店</a> <a href="#">旅游</a> <div class="prosmore hide"> <a href="#">全部(13602)</a> <a class="morehot" href="#">酒店(9044)</a> <a href="#">旅游(1775)</a> <a href="#">景点公园(935)</a> <a href="#">其他(1848)</a> </div> </li> <li class="life"> > <a class="ti" href="#">生活</a> <a href="#">婚纱摄影</a> <a href="#">写真</a> <div class="prosmore hide"> <a href="#">全部(333)</a> <a href="#">写真(9)</a> <a class="morehot" href="#">婚纱摄影(212)</a> <a href="#">儿童摄影(1)</a> <a href="#">汽车养护(3)</a> <a href="#">教育培训(91)</a> <a href="#">体检(8)</a> <a href="#">口腔(1)</a> <a href="#">其他(8)</a> </div> </li> <li class="women"> > <a class="ti" href="#">丽人</a> <a href="#">美发</a> <a href="#">美容美体</a> <div class="prosmore hide"> <a href="#">全部(14)</a> <a class="morehot" href="#">美发(7)</a> <a href="#">美甲(3)</a> <a href="#">美容美体(4)</a> </div> </li> <li class="goods bd-solid"> > <a class="ti" href="#">商品</a> <a href="#">服装</a> <a href="#">鞋靴</a> <div class="prosmore hide"> <a href="#">全部(112343)</a> <a class="morehot" href="#">服装(32747)</a> <a href="#">生活家居(14441)</a> <a href="#">食品饮料(10116)</a> <a href="#">化妆品(12707)</a> <a href="#">箱包(7621)</a> <a href="#">家用电器(3775)</a> <a href="#">手机数码(3639)</a> <a href="#">鞋靴(11686)</a> <a href="#">饰品(4558)</a> <a href="#">手表(1482)</a> <a href="#">母婴用品(3659)</a> <a href="#">玩具(777)</a> <a href="#">抽奖(7)</a> <a href="#">礼品(197)</a> <a href="#">其他(4931)</a> </div> </li> <li class="hotareas nochild last"> <h2>热门搜索</h2> <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="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript"> (function(){ var $subblock = $(".subpage"), $head=$subblock.find('h2'), $ul = $("#proinfo"), $lis = $ul.find("li"), inter=false; $head.click(function(e){ e.stopPropagation(); if(!inter){ $ul.show(); }else{ $ul.hide(); } inter=!inter; }); $ul.click(function(event){ event.stopPropagation(); }); $(document).click(function(){ $ul.hide(); inter=!inter; }); $lis.hover(function(){ if(!$(this).hasClass('nochild')){ $(this).addClass("prosahover"); $(this).find(".prosmore").removeClass('hide'); } },function(){ if(!$(this).hasClass('nochild')){ if($(this).hasClass("prosahover")){ $(this).removeClass("prosahover"); } $(this).find(".prosmore").addClass('hide'); } }); })(); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a> </div> </body> </html>

评论收藏

内容反馈

版权申诉