当前位置：首页 > Web开发 > 正文

dropdown.buildMenuItem);}).dropdown({css3: true

2024-03-31 Web开发

组件化思想，包罗：

下拉菜单项封装 + 按需加载

搜索成果组件化，显示数据 + 下拉显示 + 缓存

分类导航按需加载

幻灯片效果组件封装及按需加载

商品楼层模块组件化 + 商品数据按需加载 + Tab选项卡 + 电梯布局

是时候放出大长图了！！！

技术图片

index.html

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="css/index.css" /> </head> <body>  <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li> <li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li> <li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛XX网</a></li> </ul> <ul class="fr"> <li class="menu dropdown fl" data-active="menu"> <a href="###" target="_blank" class="dropdown-toggle link transition">我的XX<i class="dropdown-arrow icon transition"></i></a> <ul class="dropdown-layer dropdown-left"> <li><a href="###" target="_blank" class="menu-item">已买到的法宝</a></li> <li><a href="###" target="_blank" class="menu-item">我的足迹</a></li> </ul> </li> <li class="menu dropdown fl" data-active="menu"> <a href="###" target="_blank" class="dropdown-toggle link transition">保藏夹<i class="dropdown-arrow icon transition"></i></a> <ul class="dropdown-layer dropdown-left"> <li><a href="###" target="_blank" class="menu-item">保藏的法宝</a></li> <li><a href="###" target="_blank" class="menu-item">保藏的店铺</a></li> </ul> </li> <li class="fl"> <a href="###" target="_blank" class="nav-site-category link">商品分类</a> </li> <li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json"> <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition"></i></a> <ul class="dropdown-layer dropdown-left"> <li class="dropdown-loading"></li> </ul> </li> <li class="nav-site-service menu dropdown fl" data-active="menu"> <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition"></i></a> <ul class="dropdown-layer dropdown-right"> <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li> <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li> </ul> </li> </ul> </div> </div>   <div class="header"> <div class="container"> <h1 class="fl"><a href="./index.html" class="header-logo text-hidden">XX网</a></h1> <div id="header-search" class="search fl"> <form action="https://s.taobao.com/search" class="search-form"> <input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off" class="search-inputbox fl" /> <input type="submit" value="搜索" class="search-btn btn fl" /> </form> <ul class="search-layer"> <li class="search-layer-item text-ellipsis">111</li> <li class="search-layer-item text-ellipsis">111</li> <li class="search-layer-item text-ellipsis">111</li> </ul> </div> </div> </div>   <div class="nav-main"> <div class="container"> <a href="###" target="_blank" class="link">数码城</a ><a href="###" target="_blank" class="link">天黑黑</a ><a href="###" target="_blank" class="link">团购</a ><a href="###" target="_blank" class="link">发明</a ><a href="###" target="_blank" class="link">二手特价</a ><a href="###" target="_blank" class="link">名品汇</a> </div> </div> <div class="focus"> <div class="container"> <div id="focus-category" class="category fl"> <a href="###" target="_blank" class="category-title"><i class="icon"></i>商品分类</a> <ul class="category-list"> <li class="dropdown" data-active="category" data-load="js/category-detail-1.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">家用电器</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-2.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">手机</a >、<a href="###" target="_blank" class="dropdown-link">运营商</a >、<a href="###" target="_blank" class="dropdown-link">数码</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-3.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">电脑</a >、<a href="###" target="_blank" class="dropdown-link">办公</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-4.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">家居</a >、<a href="###" target="_blank" class="dropdown-link">家具</a >、<a href="###" target="_blank" class="dropdown-link">家装</a >、<a href="###" target="_blank" class="dropdown-link">厨具</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-5.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">男装</a >、<a href="###" target="_blank" class="dropdown-link">女装</a >、<a href="###" target="_blank" class="dropdown-link">童装</a >、<a href="###" target="_blank" class="dropdown-link">内衣</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-6.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">化妆</a >、<a href="###" target="_blank" class="dropdown-link">清洁</a >、<a href="###" target="_blank" class="dropdown-link">宠物</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-7.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">运动户外</a >、<a href="###" target="_blank" class="dropdown-link">钟表</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-8.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">汽车</a >、<a href="###" target="_blank" class="dropdown-link">汽车用品</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-9.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">母婴</a >、<a href="###" target="_blank" class="dropdown-link">玩具乐器</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-10.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">食品</a >、<a href="###" target="_blank" class="dropdown-link">酒类</a >、<a href="###" target="_blank" class="dropdown-link">生鲜</a >、<a href="###" target="_blank" class="dropdown-link">特产</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-11.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">医药保健</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-12.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">图书</a >、<a href="###" target="_blank" class="dropdown-link">音像</a >、<a href="###" target="_blank" class="dropdown-link">电子书</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-13.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">彩票</a >、<a href="###" target="_blank" class="dropdown-link">旅行</a >、<a href="###" target="_blank" class="dropdown-link">充值</a >、<a href="###" target="_blank" class="dropdown-link">票务</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/category-detail-14.json"> <div class="dropdown-toggle"> <a href="###" target="_blank" class="dropdown-link">理财</a >、<a href="###" target="_blank" class="dropdown-link">众筹</a >、<a href="###" target="_blank" class="dropdown-link">白条</a >、<a href="###" target="_blank" class="dropdown-link">保险</a> <i class="dropdown-arrow">></i> </div> <div class="dropdown-layer"> <div class="dropdown-loading"></div> </div> </li> </ul> </div> <div id="focus-slider" class="slider fl"> <div class="slider-container"> <div class="slider-item">  <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/1.png" alt="" class="slider-img" /></a> </div> <div class="slider-item"> <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/2.png" alt="" class="slider-img" /></a> </div> <div class="slider-item"> <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/3.png" alt="" class="slider-img" /></a> </div> <div class="slider-item"> <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/4.png" alt="" class="slider-img" /></a> </div> </div> <ol class="slider-indicator-wrap"> <li class="slider-indicator text-hidden fl">1</li> <li class="slider-indicator text-hidden fl">2</li> <li class="slider-indicator text-hidden fl">3</li> <li class="slider-indicator text-hidden fl">4</li> </ol> <a href="javascript:;" class="slider-control slider-control-left"><</a> <a href="javascript:;" class="slider-control slider-control-right">></a> </div> <div class="focus-sidebar fr"> <div class="focus-news"> <div class="focus-news-head"> <h2 class="focus-news-title fl">XX快报</h2> <a href="###" target="_blank" class="link fr">更多 ></a> </div> <div class="focus-news-body"> <p class="text-ellipsis"> <a href="###" target="_blank" class="link"><strong>[特惠]</strong> 精选图书每满150减50</a> </p> <p class="text-ellipsis"> <a href="###" target="_blank" class="link"><strong>[通告]</strong> 因广州图书仓搬仓升级配送延迟</a> </p> <p class="text-ellipsis"> <a href="###" target="_blank" class="link"><strong>[特惠]</strong> 爆款手机12期免息</a> </p> <p class="text-ellipsis"> <a href="###" target="_blank" class="link"><strong>[通告]</strong> 广东、福建受台风影响配送延迟</a> </p> <p class="text-ellipsis"> <a href="###" target="_blank" class="link"><strong>[特惠]</strong> 大闸蟹领券满399减180</a> </p> </div> </div> <div class="focus-service cf"> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">话费</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">机票</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">影戏票</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">游戏</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">彩票</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">加油卡</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">酒店</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">火车票</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">众筹</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">理财</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">礼品卡</span> </a> <a href="###" target="_blank" class="focus-service-item fl"> <i class="icon focus-service-icon"></i> <span class="focus-service-text">白条</span> </a> </div> <div class="focus-ad"></div> </div> </div> </div> <div class="todays"> <div class="container"> <div id="todays-slider" class="slider"> <div class="slider-container"> <div class="slider-item"> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/1.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/2.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/4.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a> </div> <div class="slider-item"> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/6.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/8.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/10.png" class="slider-img" /></a> </div> <div class="slider-item"> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/11.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a> <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a> </div> </div> <a href="javascript:;" class="slider-control slider-control-left"><</a> <a href="javascript:;" class="slider-control slider-control-right">></a> </div> </div> </div>  <div class="floor"> <div class="container"> <img src="img/floor-loading.gif" alt="" /> </div> </div>  <div class="floor"> <div class="container"> <img src="img/floor-loading.gif" alt="" /> </div> </div>  <div class="floor"> <div class="container"> <img src="img/floor-loading.gif" alt="" /> </div> </div>  <div class="floor"> <div class="container"> <img src="img/floor-loading.gif" alt="" /> </div> </div>  <div class="floor floor-last"> <div class="container"> <img src="img/floor-loading.gif" alt="" /> </div> </div>  <div id="elevator" class="elevator container"> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F1</span> <span class="elevator-text">衣饰</span> </a> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F2</span> <span class="elevator-text">美妆</span> </a> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F3</span> <span class="elevator-text">手机</span> </a> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F4</span> <span class="elevator-text">家电</span> </a> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F5</span> <span class="elevator-text">数码</span> </a> </div> <div class="toolbar"> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">会员</span> </a> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">购物车</span> </a> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">我的存眷</span> </a> <a href="javascript:;" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">我的动静</span> </a> <a href="javascript:;" id="backToTop" class="toolbar-item"> <i class="toolbar-icon icon"></i> <span class="toolbar-text transition">顶部</span> </a> </div> <script> //两种判断是否有jquery库的写法： // window.jQuery || document.write(‘<script src="http://www.mamicode.com/js/jquery.js"><‘ + ‘/script>‘) window.jQuery || document.write(‘<script src="http://www.mamicode.com/js/jquery.js"><\/script>‘); </script> <script src="js/transition.js"></script> <script src="js/showhide.js"></script> <script src="js/dropdown.js"></script> <script src="js/search.js"></script> <script src="js/move.js"></script> <script src="js/slider.js"></script> <script src="js/tab.js"></script> <script src="js/index.js"></script> </body> </html>

base.css

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32228.html

dropdown.buildMenuItem);}).dropdown({css3: true

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢