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

效果图

index.html

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

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

        ="fa fa-shopping-cart">采购管理="publishpurchase">发布采购="postneeds">查看采购="getneeds">已收到的报价单="mypricesheet">我的报价单="concernshop">已关注的店铺="concerngood">已关注的商品="fa fa-pencil-square-o">询盘管理="buyerxunpanlist">收到的询盘="publishrequire">我的询盘="fa fa-file-text">订单管理="myorder">我的订单="myrefund">退款申请="fa fa-globe">金融管理="myloan">我的借贷="financialmanage">需求申请="myapplication">我的申请="fa fa-unlock-alt">安全管理="basecomInfo">基本信息="authenchange">认证信息="phoneAuth">手机认证="bankCardAuth">银行卡认证="emailAuth">邮箱认证="passwordmodify">密码修改="paymentpsdmodify">支付密码="address">收货地址="fa fa-star">评价管理="usercomments">我的评价="fa fa-bell">消息管理="mymsg">我的消息="fa fa-signal">统计管理="censusmanager">月贸易量="statisticmanager">月订单量="fa fa-credit-card">白条管理="oweindex">开通白条="myIous">我的白条="louorderlist">订单列表script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'script='js/script.js'html>

style.css

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

script.js

$(function() {
    var Accordion = (el,multiple) {
        this.el = el || {};
        this.multiple = multiple || false;
        var links = this.el.find('.link');
        links.on('click',{
            el: this.el,multiple: .multiple
        },.dropdown)
    };
    Accordion.prototype.dropdown = (e) {
        var $el = e.data.el;
        $this = $();
        $next = $.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'),);
    $('.submenu li').click(() {
        $(this).addClass('current').siblings('li').removeClass('current');
    });
});

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

相关文章