基于jquery实现商城网站红色分类导航



30 117 40



特效描述:基于jquery实现 商城网站 红色分类导航,基于jquery实现商城网站红色分类导航

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/common_new.css">
<link rel="stylesheet" type="text/css" href="css/common_new.css">

2. 引入JS

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

3. HTML代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body mon="position=local">
<div id="container">
<div class="header-wrap">
  <div class="navwrap">
    <div id="nav">
      <div class="navbar clearfix" mon="type=mainnav&action=click"> <a class="navbt" href="http://51qianduan.com" target="_blank" title="团购地图" mon="#content=团购地图"><span>团购地图</span></a> <a mon="#content=首页" class=" current" href="http://51qianduan.com">首页</a> <a mon="#content=餐饮美食" class="" href="http://51qianduan.com">餐饮美食</a> <a mon="#content=休闲娱乐" class="" href="http://51qianduan.com">休闲娱乐</a> <a mon="#content=旅游住宿" class="" href="http://51qianduan.com">旅游住宿</a> <a mon="#content=生活服务" class="" href="http://51qianduan.com">生活服务</a> <a mon="#content=丽人" class="" href="http://51qianduan.com">丽人</a> <a mon="#content=商品" class="" href="http://51qianduan.com">商品</a> </div>
      <div class="pros subpage">
        <h2>全部团购分类</h2>
        <ul class="prosul clearfix" id="proinfo">
          <li class="food" mon="type=subnav&action=click"><i>&gt;</i> <a class="ti" href="http://51qianduan.com" title="美食" mon="#content=美食">美食</a> <a class="hot" href="http://51qianduan.com" title="地方菜" mon="#content=地方菜">地方菜</a> <a  href="http://51qianduan.com" title="火锅" mon="#content=火锅">火锅</a>
            <div class="prosmore hide"><span><em > <a  href="http://51qianduan.com" title="全部"  mon="#content=全部">全部(117)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="火锅"  mon="#content=火锅">火锅(17)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="烧烤"  mon="#content=烧烤">烧烤(16)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="西餐"  mon="#content=西餐">西餐(9)</a></em></span><span><em > <a  href="http://51qianduan.com" title="海鲜"  mon="#content=海鲜">海鲜(37)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="地方菜"  mon="#content=地方菜">地方菜(5)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="日韩料理"  mon="#content=日韩料理">日韩料理(2)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="快餐"  mon="#content=快餐">快餐(2)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="蛋糕"  mon="#content=蛋糕">蛋糕(9)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="其他"  mon="#content=其他">其他(7)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="下午茶"  mon="#content=下午茶">下午茶(5)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="咖啡"  mon="#content=咖啡">咖啡(8)</a> </em></span> </div>
          </li>
          <li class="enjoy" mon="type=subnav&action=click"><i>&gt;</i> <a class="ti" href="http://51qianduan.com" title="休闲" mon="#content=休闲">休闲</a> <a class="hot" href="http://51qianduan.com" title="电影" mon="#content=电影">电影</a> <a  href="http://51qianduan.com" title="KTV" mon="#content=KTV">KTV</a>
            <div class="prosmore hide"><span><em > <a  href="http://51qianduan.com" title="全部"  mon="#content=全部">全部(663)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="电影"  mon="#content=电影">电影(18)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="KTV"  mon="#content=KTV">KTV(8)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="运动健身"  mon="#content=运动健身">运动健身(95)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="游乐电玩"  mon="#content=游乐电玩">游乐电玩(48)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="展览演出"  mon="#content=展览演出">展览演出(13)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="足疗按摩"  mon="#content=足疗按摩">足疗按摩(8)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="洗浴"  mon="#content=洗浴">洗浴(11)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="其他"  mon="#content=其他">其他(29)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="采摘"  mon="#content=采摘">采摘(2)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="滑雪"  mon="#content=滑雪">滑雪(4)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="温泉"  mon="#content=温泉">温泉(427)</a> </em></span> </div>
          </li>
          <li class="travel" mon="type=subnav&action=click"><i>&gt;</i> <a class="ti" href="http://51qianduan.com" title="旅游" mon="#content=旅游">旅游</a> <a class="hot" href="http://51qianduan.com" title="酒店" mon="#content=酒店">酒店</a> <a  href="http://51qianduan.com" title="旅游" mon="#content=旅游">旅游</a>
            <div class="prosmore hide"><span><em > <a  href="http://51qianduan.com" title="全部"  mon="#content=全部">全部(13602)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="酒店"  mon="#content=酒店">酒店(9044)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="旅游"  mon="#content=旅游">旅游(1775)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="景点公园"  mon="#content=景点公园">景点公园(935)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="其他"  mon="#content=其他">其他(1848)</a> </em></span> </div>
          </li>
          <li class="life" mon="type=subnav&action=click"><i>&gt;</i> <a class="ti" href="http://51qianduan.com" title="生活" mon="#content=生活">生活</a> <a  href="http://51qianduan.com" title="婚纱摄影" mon="#content=婚纱摄影">婚纱摄影</a> <a  href="http://51qianduan.com" title="写真" mon="#content=写真">写真</a>
            <div class="prosmore hide"><span><em > <a  href="http://51qianduan.com" title="全部"  mon="#content=全部">全部(333)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="写真"  mon="#content=写真">写真(9)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="婚纱摄影"  mon="#content=婚纱摄影">婚纱摄影(212)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="儿童摄影"  mon="#content=儿童摄影">儿童摄影(1)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="汽车养护"  mon="#content=汽车养护">汽车养护(3)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="教育培训"  mon="#content=教育培训">教育培训(91)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="体检"  mon="#content=体检">体检(8)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="口腔"  mon="#content=口腔">口腔(1)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="其他"  mon="#content=其他">其他(8)</a> </em></span></div>
          </li>
          <li class="women" mon="type=subnav&action=click"><i>&gt;</i> <a class="ti" href="http://51qianduan.com" title="丽人" mon="#content=丽人">丽人</a> <a  href="http://51qianduan.com" title="美发" mon="#content=美发">美发</a> <a  href="http://51qianduan.com" title="美容美体" mon="#content=美容美体">美容美体</a>
            <div class="prosmore hide"><span><em > <a  href="http://51qianduan.com" title="全部"  mon="#content=全部">全部(14)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="美发"  mon="#content=美发">美发(7)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="美甲"  mon="#content=美甲">美甲(3)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="美容美体"  mon="#content=美容美体">美容美体(4)</a> </em></span> </div>
          </li>
          <li class="goods bd-solid" mon="type=subnav&action=click"><i>&gt;</i> <a class="ti" href="http://51qianduan.com" title="商品" mon="#content=商品">商品</a> <a  href="http://51qianduan.com" title="服装" mon="#content=服装">服装</a> <a  href="http://51qianduan.com" title="鞋靴" mon="#content=鞋靴">鞋靴</a>
            <div class="prosmore hide"><span><em > <a  href="http://51qianduan.com" title="全部"  mon="#content=全部">全部(112343)</a> </em></span><span><em class="morehot"> <a class="morehot" href="http://51qianduan.com" title="服装"  mon="#content=服装">服装(32747)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="生活家居"  mon="#content=生活家居">生活家居(14441)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="食品饮料"  mon="#content=食品饮料">食品饮料(10116)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="化妆品"  mon="#content=化妆品">化妆品(12707)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="箱包"  mon="#content=箱包">箱包(7621)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="家用电器"  mon="#content=家用电器">家用电器(3775)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="手机数码"  mon="#content=手机数码">手机数码(3639)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="鞋靴"  mon="#content=鞋靴">鞋靴(11686)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="饰品"  mon="#content=饰品">饰品(4558)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="手表"  mon="#content=手表">手表(1482)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="母婴用品"  mon="#content=母婴用品">母婴用品(3659)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="玩具"  mon="#content=玩具">玩具(777)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="抽奖"  mon="#content=抽奖">抽奖(7)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="礼品"  mon="#content=礼品">礼品(197)</a> </em></span><span><em > <a  href="http://51qianduan.com" title="其他"  mon="#content=其他">其他(4931)</a> </em></span></div>
          </li>
          <li class="hotareas nochild last" mon="type=hotword&action=click">
            <h2>热门搜索</h2>
            <br />
            <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=美食">美食</a> <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=游泳">游泳</a> <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=蛋糕">蛋糕</a> <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=电影">电影</a> <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=眼镜">眼镜</a> <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=自助餐">自助餐</a> <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=酒吧">酒吧</a> <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=美甲">美甲</a> <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=酒店">酒店</a> <a class="mhs" target="_blank" href="http://51qianduan.com" mon="#content=粽子">粽子</a> </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
	  var prompt_word = "��ʳ";
	  if(prompt_word && prompt_word.length > 0)
	  {
		  $(document).ready(function()
		  {
			 (function(element, str)
		  {
		  if (element.size() == 0)
		  { 
			return; 
		  }
	     var elem = element; 
		 var opts = {styleDefault: 'prompt-default',styleFocus: 'prompt-focus'};
		 if (elem.val() === ""){
		 elem.val(str);
		 if (!elem.hasClass(opts.styleDefault)){
		    elem.addClass(opts.styleDefault);
		 }
		 } 
		 elem.bind("focus", function(e){
		   elem.removeClass(opts.styleDefault);
		 if (!elem.hasClass(opts.styleFocus)){
		    elem.addClass(opts.styleFocus);
		 }
		 if (elem.val() === str){elem.val("");
		 }
		 });
		 elem.bind("blur", function(e){
		 if (elem.val() === ""){
			 elem.val(str);
			 elem.removeClass(opts.styleFocus);
			 if (!elem.hasClass(opts.styleDefault)){
			  elem.addClass(opts.styleDefault);
			 }
		 } else {
		 elem.removeClass(opts.styleDefault);
		 }
		 });
		 })($("#ssinput"), prompt_word);
		 });
		 }
		 function bindEvent(uname, utip){
		 if(uname.size() == 0) return;
		 var userNameEnter,userNameLeave,userTipLeave;
		 uname.bind("mouseenter", function(){
		 userNameEnter = setTimeout(function(){
		 if(userNameEnter) clearTimeout(userNameEnter);utip.show();
		 },200);
		 });
		 uname.bind("mouseleave", function(){
		 userNameLeave = setTimeout(function(){
		 if(userNameLeave) clearTimeout(userNameLeave);utip.hide();
		 },200);
		 });
		 utip.bind("mouseenter", function(){
		 if(userNameLeave) clearTimeout(userNameLeave);
		 if(userTipLeave) clearTimeout(userTipLeave);
		 });
		 utip.bind("mouseleave",function(){
		 userTipLeave = setTimeout(function(){
		 if(userNameLeave) clearTimeout(userNameLeave);
		 if(userTipLeave) clearTimeout(userTipLeave);
		 utip.hide();
		 },10);
		 });
		 }
		 $(document).ready(function(){
		 bindEvent($("#J_mytuanorder"), $("#J_mylist"));});/* ȫ����Ʒ */
		 (function(){
		 var $block = $("#jpros"),
		 $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();
		 });
		 $('body').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>\
<br>
<div style="text-align:center;clear:both">
</div>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 导航切换 菜单切换 右键菜单 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 收缩菜单 收缩导航 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 浮动菜单 浮动导航 滚动切换 滚动条切换 滑动选项卡 滑动切换 滑动手风琴 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动星星打分 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 其他 导航切换 菜单切换 二级菜单 二级导航菜单 二级导航 侧边菜单 侧边导航 导航菜单插件 导航插件 菜单插件 文字导航菜单 文字导航 文字菜单 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到