简单的菜单三

2021-01-06 09:34:31 阅读：164 来源： 互联网

标签：body 菜单 hbtn west width background 简单 panel

完整版前端菜单代码

截图

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="${basepath}">
    <meta charset="utf-8"/>
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="static/lib/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="static/css/index.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <script type="text/javascript" src="static/lib/jquery.min.js"></script>
    <script type="text/javascript" src="static/lib/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
</head>
<body>
<body class="easyui-layout">   
    <#-- 顶部 -->
    <div data-options="region:'north',border:false,noheader:true,split:false,bodyCls:'north_body'" style="height:50px;">
        <!-- 左对齐 -->
        <div id="hbtn_menu">
            <i class="fa fa-navicon"></i>
        </div>
        <div id="htxt_title">
            <div class="img"></div>
            <div class="txt">集中运营处理中心</div>
        </div>
        <!-- 右对齐 -->
        <div id="hbtn_logout" title="注销" class="easyui-tooltip"><i class="fa fa-power-off"></i></div>
        <!-- 切换皮肤 -->
        <div id="hbtn_settheme" title="切换皮肤" class="easyui-tooltip"><i class="fa fa-exchange" aria-hidden="true"></i></div>
        <!-- 下载 -->
        <div id="hbtn_download" title="文档与下载" class="easyui-tooltip"><i class="fa fa-download"></i></div>
        <!-- 修改密码 -->
        <div id="hbtn_password" title="修改密码" class="easyui-tooltip"><i class="fa fa-lock"></i></div>

        <!-- 用户信息 -->
        <div id="htxt_userinfo"><img src="static\img\index\user_default_pic.png" /><span id="user_name">系统管理员</span>  </div>
    </div>   
    <#-- 侧边栏 -->
    <div data-options="region:'west',border:false,noheader:true,split:false,bodyCls:'west_body'" style="width:60px;">
        <ul>
            <li>
                <u>
                    <i class="fa fa-folder-open-o"></i>
                    <a>业务</a>
                </u>
                <ul>
                    <li><u><i class="fa fa-camera"></i><a>视频录制</a></u></li>
                    <li><u><i class="fa fa-film"></i><a>视频回放</a></u></li>
                </ul>
            </li>
            <li>
                <u>
                    <i class="fa fa-folder-open-o"></i>
                    <a>管理</a>
                </u>
                <ul>
                    <li><u><i class="fa fa-code-fork"></i><a>节点管理</a></u></li>
                    <li><u><i class="fa fa-qrcode"></i><a>产品管理</a></u></li>
                </ul>
            </li>
        </ul>
    </div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>
</body>
</html>

CSS部分

.north_body{
    background-image:url(../img/index/north_bg.png); 
    background-repeat:no-repeat;
    background-size: 100% 100%;
    float:left;
}

#hbtn_menu{
    float:left;
    width: 50px;
    height:36px;
    text-align: center;
    padding-top: 14px;
    cursor: pointer;
    overflow: hidden;
}
#hbtn_menu i{
    font-size:24px;
    color:#fff;
}
#htxt_title{
    float:left;
    width: 400px;
    height:50px;
    margin: 0px 20px 0px 20px;
}
#htxt_title:hover{
    cursor: default;
}
#htxt_title .img{
    float:left;
    background-image:url(../img/index/logo.png); 
    background-repeat:no-repeat;
    background-size:133px 35px;
    background-position:center center;
    height: 50px;
    line-height: 50px;
    width: 133px;
}
#htxt_title .txt{
    float:left;
    color: white;
    font-size: 21px;
    font-family:"Microsoft YaHei","SimHei";
    letter-spacing:2px;
    padding: 8px 0px 0px 15px;
}
#hbtn_logout{
    float:right;
    width: 50px;
    height:36px;
    text-align: center;
    padding-top: 14px;
}
#hbtn_logout i{
    font-size:24px;
    color:#6AC5AF;
}
#hbtn_download,
#hbtn_password,
#hbtn_settheme{
    float:right;
    width: 50px;
    height:50px;
    text-align: center;
    padding-top:0px;
}



#hbtn_download i,
#hbtn_password i,
#hbtn_settheme i{
    font-size:18px;
    color:#fff;
    margin-top: 18px;
}

#htxt_userinfo{
    height:34px;
    float: right;
    white-space: nowrap; 
    display: inline-block;  
    padding-top: 10px;
}
#htxt_userinfo:hover{
    cursor: default;
}
#htxt_userinfo img{
    width: 34px;
    height: 34px;
    vertical-align:middle;
}
#user_name{
    font-size:16px;
    color:#fff;
    margin: 15px 20px 0px 10px;
}

#hbtn_download:hover,
#hbtn_password:hover,
#hbtn_settheme:hover,
#hbtn_logout:hover{
    background-color: rgba(238, 238, 238, 0.6);
    cursor: pointer;
}

/*树形菜单*/
.west_body{
    background-image:url(../img/index/west_bg.png); 
    background-repeat:no-repeat;
    background-size: 100% 100%;
}
.west_body ul, 
.west_body li {
    list-style: none;
    width: 100%;
    padding:0px;
}

.west_body a{
    font-size: 10px;
    height: 40px;
    line-height: 40px;
    padding: 0px 0px 0px 5px;
    display: none;
}
.west_body i{
    font-size: 18px;
    padding-left: 9px;
}
.west_body ul ul i{
    padding-left: 18px;
}
.west_body u{
    width: 100%;
    display:block ;
    height: 40px;
    line-height: 40px;
    text-decoration:none;
}
.west_body u:hover{
    background-color: rgba(238, 238, 238, 0.6);
    cursor: pointer;
}

.mopen#hbtn_menu{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); 
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
}
.mopen.west_body a{
    display:inline-block;
}

JS部分

$(function(){
    var west_panel = $(document.body).layout('panel','west');
    var center_panel = $(document.body).layout('panel','center');
    
    //菜单折叠按钮点击事件
    $('#hbtn_menu').bind('click',function(){
        var w = 100 ;
        var wo = west_panel.panel('options');
        var co = center_panel.panel('options');
        if(!$(this).is('.mopen')){
            $(this).addClass('mopen');
            $('.west_body').addClass('mopen');
            west_panel.panel('resize',{width:wo.width + w});
            center_panel.panel('resize',{width:co.width - w,left:co.left + w});
        }else{
            $(this).removeClass('mopen');
            $('.west_body').removeClass('mopen');
            west_panel.panel('resize',{width:wo.width - w});
            center_panel.panel('resize',{width:co.width + w,left:co.left - w});
        }
    });
    
    //树节点点击事件
    west_panel.panel('body').find('li u').bind('click',function(){
        var that = this;
        var children = $(this).next('ul');
        if(children.length > 0){//含有子节点
            if(children.is(':hidden')){
                children.slideDown('fast',function(){
                    $(that).children('i').addClass('fa-folder-open-o').removeClass('fa-folder-o');
                });
            }else{
                children.slideUp('fast',function(){
                    $(that).children('i').addClass('fa-folder-o').removeClass('fa-folder-open-o');
                    
                });
            }
        }else{
            //点击的是叶节点
            alert($(this).find('a').text());
        }
    });
});

标签：body,菜单,hbtn,west,width,background,简单,panel
来源： https://www.cnblogs.com/hi-gdl/p/14239236.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简单的菜单三