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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 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
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
详解php反序列化
2020/06/10 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Unicode和Python的中文处理
2017/03/19 Python
python的中异常处理机制
2018/08/30 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Django接收自定义http header过程详解
2019/08/23 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
成人大专生实习期的自我评价
2013/10/02 职场文书
护士实习自我鉴定
2013/10/22 职场文书
物业工作计划书
2014/01/10 职场文书
数学系毕业生的自我评价
2014/01/10 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
医药销售自我评价200字
2014/09/11 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2015年新学期寄语
2015/02/26 职场文书
电影建国大业观后感
2015/06/01 职场文书
高一作文之乐趣
2019/11/21 职场文书