jQuery实现B2B网站后台管理系统侧导航


Posted in jQuery onJuly 08, 2020

效果图

jQuery实现B2B网站后台管理系统侧导航

1.html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="external nofollow" >
  <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>

<body>

<div class="account-l fl">
  <a class="list-title">账户概览</a>
  <ul id="accordion" class="accordion">
    <li>
      <div class="link"><i class="fa fa-leaf"></i>产品管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="shop"><a>查看店铺</a></li>
        <li id="publicproducts"><a>发布产品</a></li>
        <li id="productlists"><a>查看产品</a></li>
        <li id="mysaled"><a>已卖出产品</a></li>
      </ul>
    </li>

    <li>
      <div class="link"><i class="fa fa-shopping-cart"></i>采购管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="publishpurchase"><a>发布采购</a></li>
        <li id="postneeds"><a>查看采购</a></li>
        <li id="getneeds"><a>已收到的报价单</a></li>
        <li id="mypricesheet"><a>我的报价单</a></li>
        <li id="concernshop"><a>已关注的店铺</a></li>
        <li id="concerngood"><a>已关注的商品</a></li>
      </ul>
    </li>

    <li>
      <div class="link"><i class="fa fa-pencil-square-o"></i>询盘管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="buyerxunpanlist"><a>收到的询盘</a></li>
        <li id="publishrequire"><a>我的询盘</a></li>
      </ul>
    </li>

    <li>
      <div class="link"><i class="fa fa-file-text"></i>订单管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="myorder"><a>我的订单</a></li>
        <li id="myrefund"><a>退款申请</a></li>
      </ul>
    </li>

    <li>
      <div class="link"><i class="fa fa-globe"></i>金融管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="myloan"><a>我的借贷</a></li>
        <li id="financialmanage"><a>需求申请</a></li>
        <li id="myapplication"><a>我的申请</a></li>
      </ul>
    </li>

    <li>
      <div class="link"><i class="fa fa-unlock-alt"></i>安全管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="basecomInfo"><a>基本信息</a></li>
        <li id="authenchange"><a>认证信息</a></li>
        <li id="phoneAuth"><a>手机认证</a></li>
        <li id="bankCardAuth"><a>银行卡认证</a></li>
        <li id="emailAuth"><a>邮箱认证</a></li>
        <li id="passwordmodify"><a>密码修改</a></li>
        <li id="paymentpsdmodify"><a>支付密码</a></li>
        <li id="address"><a>收货地址</a></li>
      </ul>
    </li>

    <li>
      <div class="link"><i class="fa fa-star"></i>评价管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="usercomments"><a>我的评价</a></li>
      </ul>
    </li>

    <li>
      <div class="link"><i class="fa fa-bell"></i>消息管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="mymsg"><a>我的消息</a></li>
      </ul>
    </li>

    <li>
      <div class="link"><i class="fa fa-signal"></i>统计管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="censusmanager"><a>月贸易量</a></li>
        <li id="statisticmanager"><a>月订单量</a></li>
      </ul>
    </li>

    <li>
      <div class="link"><i class="fa fa-credit-card"></i>白条管理<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
        <li id="oweindex"><a>开通白条</a></li>
        <li id="myIous"><a>我的白条</a></li>
        <li id="louorderlist"><a>订单列表</a></li>
      </ul>
    </li>
  </ul>
</div>

<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
<script src='js/script.js'></script>
</body>
</html>

2.css部分

* {
 margin:0;
 padding:0;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box
}
body {
 background:#fff;
 font:12px Microsoft YaHei,arial,sans-serif
}
ul {
 list-style-type:none
}
a {
 color:#f39800;
 text-decoration:none
}
.list-title {
 display:inline-block;
 width:100%;
 max-width:200px;
 border-top:solid 1px #ccc;
 border-left:solid 1px #ccc;
 border-right:solid 1px #ccc;
 background:#fff;
 text-align:center;
 height:60px;
 line-height:60px;
 font-size:20px;
 color:#f39800;
 font-weight:700;
 cursor:pointer
}
h1 {
 color:#fff;
 font-size:24px;
 font-weight:400;
 text-align:center;
 margin-top:80px
}
h1 a {
 color:#f39800;
 font-size:16px
}
.accordion {
 width:100%;
 max-width:200px;
 border:solid 1px #ccc;
 background:#fff
}
.accordion .link {
 cursor:pointer;
 display:block;
 padding:15px 15px 15px 42px;
 color:#4d4d4d;
 font-size:14px;
 font-weight:700;
 border-bottom:1px solid #ccc;
 position:relative;
 -webkit-transition:all .4s ease;
 -o-transition:all .4s ease;
 transition:all .4s ease
}
.accordion li:last-child .link {
 border-bottom:0
}
.accordion li {
 cursor:pointer
}
.accordion li i {
 position:absolute;
 top:16px;
 left:12px;
 font-size:18px;
 color:#595959;
 -webkit-transition:all .4s ease;
 -o-transition:all .4s ease;
 transition:all .4s ease
}
.accordion li i.fa-chevron-down {
 right:12px;
 left:auto;
 font-size:16px
}
.accordion li.open .link {
 color:#f39800
}
.accordion li.open i {
 color:#f39800
}
.accordion li.open i.fa-chevron-down {
 -webkit-transform:rotate(180deg);
 -ms-transform:rotate(180deg);
 -o-transform:rotate(180deg);
 transform:rotate(180deg)
}
.submenu {
 display:none;
 background:#f5f5f5;
 font-size:14px
}
.submenu li {
 border-bottom:1px solid #d6d7dc
}
.submenu a {
 display:block;
 text-decoration:none;
 color:#666;
 padding:12px;
 padding-left:42px;
 -webkit-transition:all .25s ease;
 -o-transition:all .25s ease;
 transition:all .25s ease
}
.submenu a:hover,.submenu li.current a {
 background:#f39800;
 color:#fff
}

3.js部分

$(function() {
  var Accordion = function(el, multiple) {
    this.el = el || {};
    this.multiple = multiple || false;
    var links = this.el.find('.link');
    links.on('click', {
      el: this.el,
      multiple: this.multiple
    },
    this.dropdown)
  };
  Accordion.prototype.dropdown = function(e) {
    var $el = e.data.el;
    $this = $(this);
    $next = $this.next();
    $next.slideToggle();
    $this.parent().toggleClass('open');
    if (!e.data.multiple) {
      $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
    }
  };
  var accordion = new Accordion($('#accordion'), false);
  $('.submenu li').click(function() {
    $(this).addClass('current').siblings('li').removeClass('current');
  });
});

以上就是jQuery实现B2B网站后台管理系统侧导航的详细内容,更多关于jQuery 实现侧导航的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
jQuery实现简单飞机大战
Jul 05 #jQuery
jQuery实现简单日历效果
Jul 05 #jQuery
jQuery实现飞机大战小游戏
Jul 05 #jQuery
jquery实现上传图片功能
Jun 29 #jQuery
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
php正则校验用户名介绍
2008/07/19 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
js option删除代码集合
2008/11/12 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
Vue中全局变量的定义和使用
2019/06/05 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
深入理解python函数递归和生成器
2016/06/06 Python
python 连接sqlite及简单操作
2017/06/30 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python3爬虫学习入门教程
2018/12/11 Python
基于python的列表list和集合set操作
2019/11/24 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
python代码中怎么换行
2020/06/17 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
职称评定自我鉴定
2014/03/18 职场文书
环境卫生倡议书
2014/08/29 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书