美文网首页
2019-11-02 首页

2019-11-02 首页

作者: 独造之域 | 来源:发表于2019-11-02 19:53 被阅读0次
    index.gif

    html 代码的布局分为top 和 content
    content 分为 左侧的 sidebar 和 main 这两部分内容

    • 代码 html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <link rel="stylesheet" type="text/css" href="../../static/css/homepage.css">
        <link rel="stylesheet" type="text/css" href="../../static/css/icon/iconfont.css">
        <script src="../../static/JQuery3.4.1/jquery-3.4.1.min.js"></script>
    </head>
    <body>
    <div class="cantian">
        <div class="top">
            <div class="top-title">
                <img src="../../static/img/demo.png">
                <span>System manager</span>
            </div>
            <div class="top-user">
                <img id="user-img" class="log-img dropdown" src="../../static/img/user1.jpg">
                <span class="log-name">Admin</span>
                <span><i class="iconfont" style="font-size:25px;">&#xe65a;</i></span>
            </div>
            <div class="top-drop-menu dropdown" id="dropmenu">
                <div class="profile-info">
                    <h4 class="username">Scott White</h4>
                </div>
                <ul class="action">
                    <li class="litest">
                        <a href="#">
                            Profile
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="badge badge-danger pull-right">5</span>
                            My Inbox
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Setting
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Logout
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div id="mySidebar" class="sidebar" >
                <a id="user-a" href="#"><span><i class="iconfont">&#xe7cf;</i><span class="icon-text">用户</span></span></a><br>
                <a id="role-a" href="#"><span><i class="iconfont">&#xe882;</i><span class="icon-text">角色</span></span></a>
                </a><br>
                <a id="power-a" href="#"><span><i class="iconfont">&#xe7dc;</i><span class="icon-text">权限</span></span></a><br>
                <a href="#"><span><i class="iconfont">&#xe7d0;</i><span class="icon-text">资源</span></span></a>
            </div>
    
            <div id="main">
                <!--<h2>A simple sidebar.</h2>-->
                <!--<p>The sidebar is in fixed position and does not close.</p>-->
                <iframe id="main-iframe" style="width: 100%;height: 100%;border:none" src="userpage"></iframe>
            </div>
        </div>
    </div>
    </body>
    <script src="../../static/js/homepage.js"></script>
    </html>
    
    • css 代码
      布局上使用了 position :absolute 把top 固定再最上方 高度为100px
      其中左侧栏的滑动动画由如下图的css 所示


      image.png
    * {
        margin: 0;
        padding: 0;
    }
    
    html{
        margin: 0;
        padding: 0;
    }
    
    .top{
        position: absolute;
        height: 100px;
        width: 100%;
        background-color: #595959;
    }
    
    .top .top-title{
        position: absolute;
        width: 600px;
        height: 100px;
        left: 10px;
        line-height: 100px;
        /*font-size:0;*/
    }
    
    .top .top-title * , .top .top-user *{
        color: #fefeff;
        display:inline-block;vertical-align:middle;
    }
    
    .top .top-title span{
        font-size: 35px;
    }
    
    .top .top-title .top-img{
    
        height: 100px;
        width: 100px;
        line-height: 100px;
        display: inline-block;
    }
    
    .top .top-title .top-name{
        width: 200px;
        height: 100px;
        display: inline-block;
        line-height: 100px;
        /*background-color: #1f6377;*/
    }
    
    .top .top-user{
        position: absolute;
        right: 15px;
        height: 100px;
        line-height: 100px;
    }
    
    .top .top-user img{
        width: 64px;
        height: 64px;
        border-radius:100%;
        margin-right: 10px;
    }
    
    .top .top-user span{
        font-size:15px;
    }
    
    .top .top-drop-menu{
        position: absolute;
        right: 0px;
        top:100px;
        background-color: #cc2936;
        border-radius:5px;
        min-width: 300px;
        color: #fefeff;
        /*opacity:0;*/
        /*visibility:hidden;*/
        display:none;
        z-index:1;
    }
    
    .action li:hover{
        background-color: #64A6BD;
    }
    .profile-info{
        background-color: #64A6BD;
    }
    
    .top .top-drop-menu div h4 ,.top .top-drop-menu ul li{
        padding: 12px;
        border-bottom: 1px solid #595959;
    }
    
    /*后期放到一个公共的Common 的js 中*/
    a{
        /*去掉下划线*/
        text-decoration:none;
        color: #fefeff;
    }
    
    .top .top-drop-menu ul{
        list-style-type: none;
        font-size: 12px;
    }
    
    .content{
        position: absolute;
        top: 100px;
        bottom: 0px;
        width: 100%;
        /*background-color: #1f6377;*/
    }
    
    .content .sidebar{
        /*绝对定位,(固定定位)*/
        position: fixed;
        top:100px;
        background-color: #CC2936;
        bottom: 0px;
        height: 100%;
        width: 80px;
        padding-top: 10px;
        /*是文本不换行*/
        white-space: nowrap;
        overflow-x:hidden;
        z-index: 1;
        transition: 0.5s;
    }
    
    .content .sidebar a{
        padding: 8px 8px 8px 32px;
        color: #f5dd9b;
        font-size: 18px;
        display:block;
    }
    
    .content .sidebar a:hover{
        color: #fefeff;
    }
    .content .sidebar span i{
        margin-right: 32px;
    }
    .content #main{
        height: 100%;
        transition: margin-left 0.5s;
        margin-left: 80px;
    }
    
    • js代码
    $(function () {
        //侧滑
        $("#mySidebar").hover(toggleSlideBar);
        initAOnclick();
        //登出的下拉动作
        let btn = document.getElementById('user-img');
        let box = document.getElementById('dropmenu');
        let timer = null;
        box.onmouseover = btn.onmouseover = function () {
            if (timer) clearTimeout(timer)
            box.style.display = 'block';
            console.log("mouserover");
        }
        box.onmouseout = btn.onmouseout = function () {
            timer = setTimeout(function () {
                box.style.display = 'none';
            }, 100);
            console.log("mouserout");
        }
    })
    
    // 为true 时 侧边栏处于 缩小 状态 变为 扩展状态
    let toggleFlag = true;
    function toggleSlideBar() {
        if (toggleFlag) {
            $(".sidebar").width(200);
            $("#main").css("marginLeft", "200px");
            console.log("toggleFlag:" + toggleFlag);
            toggleFlag = false;
            console.log("open sideBar");
        } else {
            $(".sidebar").width(80);
            $("#main").css("marginLeft", "80px");
            toggleFlag = true;
            console.log("close sideBar");
        }
    }
    
    /**
     * 左侧侧滑列表点击事件
     * @param content   url
     */
    function slideBarOnClick(content){
        $("#main-iframe").attr("src",content);
    }
    
    function initAOnclick(){
        $("#user-a").click(function(){
            slideBarOnClick("userpage")
        });
    
        $("#role-a").click(function(){
            slideBarOnClick("rolepage")
        });
    
        $("#power-a").click(function(){
            slideBarOnClick("powerpage")
        });
    
        // $("#user-a").click(function(){
        //     slideBarOnClick("userpage")
        // });
    }
    
    //左侧栏划入
    function sidebarIn() {
        console.log("in");
    }
    
    function sidebarOut() {
        console.log("out");
        console.log("ooo");
    }
    

    相关文章

      网友评论

          本文标题:2019-11-02 首页

          本文链接:https://www.haomeiwen.com/subject/xbhhbctx.html