首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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实现B2B网站后台管理系统侧导航

- Author -

陈莺莺呀

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
倡议书(159) 责任书(145) 决心书(42) 承诺书(369) 请假条(31) 广告词(105) 建议书(203) 保证书(97) 主持词(345) 活动总结(790)
You might like
用ODBC的分页显示
2006/10/09 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript加强之自定义callback示例
2013/09/21 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Python趣味实例，实现一个简单的抽奖刮刮卡
2020/07/18 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
计算机专业自我鉴定
2013/10/15 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
信息合作协议书
2014/10/09 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python