console 命令行工具 X clear

console

$(function(){

$(window).resize(function() { 
height = $(window).height();//获取当前窗口高度
width = $(window).width();//获取当前窗口宽度
$(".pusher").width((width-154)+"px");//给标签设置宽度
});


    //加载后隐藏显示菜单按钮
    $(".MenuSwitchButtonOn").transition("hide");
    //折叠菜单的初始化
    $('.ui.accordion').accordion();
    //显示菜单按钮的鼠标响应透明度
    $(".MenuSwitchButtonOn").mouseover(function(){ $(".MenuSwitchButtonOn").css("opacity","1"); }); 
    $(".MenuSwitchButtonOn").mouseleave(function(){ $(".MenuSwitchButtonOn").css("opacity","0.6"); }); 
    //显示菜单按钮点击事件
    $(".MenuSwitchButtonOn").click(function(){
 //       $(".sidebar.vertical").sidebar({dimPage:false,closable:false}).sidebar('show');
 //       //$(".MenuSwitchButtonOn").hide();
        $('.MenuSwitchButtonOn')
        .transition('hide')
        ;
    });
    //隐藏菜单按钮点击事件
    $(".MenuSwitchButtonOff").click(function(){
//        $(".sidebar.vertical").sidebar({dimPage:false,closable:false}).sidebar('hide');
//       // $(".MenuSwitchButtonOn").show();
        $('.MenuSwitchButtonOn').transition('fly right',1500);

   });




$(".ui.vertical.sidebar")
.sidebar({
            context: $('.bottom.segment'),
            dimPage:false,
            closable:false,
            onHidden:function(){
                $(".pusher").width(($(window).width())+"px");
            },
            onShow:function(){
                $(".pusher").width(($(window).width()-154)+"px");
            }
        })
        .sidebar('attach events', '.menuSwith')
        .sidebar('attach events', '.MenuSwitchButtonOff')
        .sidebar('attach events', '.MenuSwitchButtonOn');
})

<body>

    <div class="ui inverted borderless attached labeled icon top menu" style="z-index:1000;">
        <div class="menu">
            <a class="item menuSwith">
                <i class="menu sidebar icon"></i>
                菜单
            </a>
        </div>
        <div class="PageTittle">
            <h1>订单管理</h1>
            </div>
        <div class="right menu">
                <image  class="logo" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3374856473,1136586028&fm=26&gp=0.jpg"></image>
        </div>
    </div>


    <div class="ui bottom attached segment pushable">
        <div class="ui visible left visual tiny demo vertical inverted sidebar labeled icon menu">
            <div class="ui segment accordion"> 
                <p class="title active item inverted"> <!--title item inverted--><!--title inverted -->
                <i class="inverted blue tasks icon"></i>
                订单管理
                </p>
                <div class="content active">
                <a href="#" class="transition item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                </div>

                <p class="title item inverted"">
                <i class="inverted blue tasks icon"></i>
                物料管理
                </p>
                <div class="content">
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                </div>  

                <p class="title item inverted">
                <i class="inverted blue tasks icon"></i>
                物料管理
                </p>
                <div class="content">
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                </div>  

                <p class="title item inverted">
                <i class="inverted blue tasks icon"></i>
                物料管理
                </p>
                <div class="content">
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                </div>  

                <p class="title item inverted">
                <i class="inverted blue tasks icon"></i>
                物料管理
                </p>
                <div class="content">
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                <a href="#" class="transition hidden item"><p><i class="inverted tasks icon"></i>物料添加</p></a>
                </div>
            </div>
            
            <a class="item inverted MenuSwitchButtonOff" style="position:fixed;bottom:50px;"> 
            <i class="inverted blue angle left icon"></i>
                隐藏菜单
            </a>
        </div>
        <div class="pusher" style="width:auto;">
            <div class="ui basic segment" style="background-color:#faf">
                <table style="width:100%">
                    <tr>
                    <td>
                        <div class="flu ui visible message">
                            <div class="fluItem"><label>订单:</label><select class="ui search dropdown"><option value="0">请选择订单</option></select></div>
                            <div class="fluItem"><label>订单:</label><div class="ui small input"> <input type="text"></div></div>
                            <div class="fluItem"><label>订单:</label><div class="ui small input"> <input type="text"></div></div>
                            <div class="fluItem"><label>订单:</label><div class="ui small input"> <input type="text"></div></div>
                            <div class="fluItem"><label>订单:</label><div class="ui small input"> <input type="text"></div></div>
                            <div class="fluItem"><label>订单:</label><div class="ui small input"> <input type="text"></div></div>
                            <div class="fluItem"><label>订单:</label><div class="ui small input"> <input type="text"></div></div>
                        </div>
                    </td>
                </tr>
                </table>
            </div>
        </div>
    </div>


    <div class="ui left labeled icon menu MenuSwitchButtonOn" style="position:fixed;bottom:50px;opacity:0.6;">
    <a class="item ui inverted button" style="background-color:black; opacity:0.6;color:#FFF"> 
            <i class="inverted blue angle right icon"></i>
            显示菜单
            </a>
    </div>


</body>

.ui.vertical.sidebar{
    background-color: #444;/*425677*/
    font-size: 12px;
}
.ui.accordion{
    background-color: #444;
    font-size: 12px;
    padding: 0px;
}
.ui.accordion p,div{
    margin-top: 0px;
    margin-bottom: 0px;
}
.ui.accordion div{
    margin-top: -6px;
    margin-bottom: -11px;
}

.ui.accordion .transition.item{
    background-color: #252525;
    font-size: 12px;    
}
.ui.inverted.borderless.attached.labeled.icon.top.menu
{
    background-color: #444;
    height: 60px;    
}


.ui.visible.left.sidebar~.fixed,.ui.visible.left.sidebar~.pusher{
    -webkit-transform:translate3d(154px,0,0);
    transform:translate3d(154px,0,0);
    }
.ui.visible.right.sidebar~.fixed,.ui.visible.right.sidebar~.pusher{
    -webkit-transform:translate3d(-154px,0,0);
    transform:translate3d(-154px,0,0);
    }


.ui.segment.pushable{
    position: fixed;
    top:60px;
    height: 100%;
}

.PageTittle{
    height: 100%;
    width: 100%;
    align-content:  center;
}
.PageTittle h1{
    color:#ccc;    
    margin-top: 20px;
}
.right.menu{
    width: 180px;
    align-content:  center;
}
.logo{
    width:120px;
    height: 35px;
    margin-top: 15px;
}

SOURCE

本项目引用的自定义外部资源