利用jQuery 实现一个简单的侧边菜单隐藏显示功能

直接步入正题,创建一个html文件, 复制以下代码部分就能看到效果

  • boot样式用的网络资源,可以直接使用
  • jQuery库自行添加

ps:没有拆分,有点略长,不过直接复制就能用了。
可以结合bootstrap,根据个人喜好,demo用了boot的样式可以不用,不引入即可。

效果图
利用jQuery 实现一个简单的侧边菜单隐藏显示功能_第1张图片
代码部分



<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>

<script type="text/javascript" src="./jquery-1.12.4.min.js">script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>
<style type="text/css">
body,html{height: 100%;}
.sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    background-color: #324057;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
    width: 300px;
    float: left;
    height: 100%;
    overflow: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    -webkit-box-shadow: #ccc 0 0 10px;
    box-shadow: #ccc 0 0 10px;
    box-sizing:border-box;
}
.main{
    margin-left:0;
    height: 100%;
}

/*菜单显示按钮*/
.sidebar > .closeMenu > span {
    opacity:0;
    position: absolute;
    right: 0px;
    top: 50%;
    font-size: 25px;
    color: #bfcbd9;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: -25px;
    padding-top: 3px;
    padding-left: 9px;
    transform-origin: 20px 20px;
    cursor: pointer;
    transition: all 1s;
}
.sidebar > .closeMenu > span:last-child{
    display: none;
}
/* Sidebar navigation */
.nav-sidebar {
    margin-right:30px; 
    padding: 20px 0;
    background-color:#f5f5f5;
    cursor: pointer;
}
.nav-sidebar > li > a {
    color: #337ab7;
}
.menuItem:hover>a{
    background-color:#eee;
}
.nav .active>a,.nav-sidebar .active:hover > a{
    background-color:#428bca;
    color:#fff;
}
.index{
    position: relative;
    top: 45%;
    text-align: center;
    font-size: 38px;
    color: #ccc;
}
style>
head>
<body>
<div class="sidebar" id="list_left">
    <ul class="nav nav-sidebar noSelect">
        <li class="menuItem" id="__task" url="1,2,3"><a>item1a>li>
        <li class="menuItem" id="__origin" url="4,5,6"><a>item2a>li>
        <li class="menuItem" id="__mysql" url="7,8,9"><a>item3a>li>
        <li class="menuItem" id="__user" url="10,11,12"><a>item4a>li>
    ul>
    <div class="closeMenu">
        <span class="glyphicon glyphicon-triangle-left">span>
        <span class="glyphicon glyphicon-triangle-right">span>

    div>
div>
<div class="main">
    <div class="index">
    div>
div>
<script type="text/javascript">
//控制item样式
    $(".menuItem").on("click",function(){
        $(this).addClass("active").siblings(".menuItem").removeClass("active");
        $(".index").html($(this).attr("url"))//main只是代表一个区块,可以用load 也可以用a+frame(基本不用,不代表不可以用,看需求吧,随意)
    });

    //fixed定位 高度满屏
    $(".sidebar").height($(window).height());

    //实现显示隐藏可以删除
    $(".sidebar").on("mouseover",function(){
        $(".closeMenu > span").css({
            opacity:1
        })
    });
    $(".sidebar").on("mouseleave blur",function(){
        $(".closeMenu > span").css({
            opacity:0
        })
    });

    var moveLeft = $("#list_left").width();

    //设置内容快初始位置
    $(".main").css({marginLeft:moveLeft});

    //判断隐藏显示核心代码
    var isShow = true;
    $(".closeMenu span").click(function(){
        $(this).hide().siblings().show();
        if(isShow){
            $("#list_left").animate({
                marginLeft : - (moveLeft-30)//30 刚好显示icon图标
            },200,"linear",function(){
                isShow = false;
                $(".closeMenu > span").css({
                    opacity:1
                });
            });
            $(".main").animate({margin:"0 auto",marginLeft:15},"linear");
        }else{
            $("#list_left").animate({
                marginLeft : 0
            },200,"linear",function(){
                isShow = true;
            });
            $(".main").animate({marginLeft:moveLeft+15},"linear");
        }
    });

    $(window).resize(function(){
        $("#list_left").height($(window).height());
    })
script>
body>
html>

希望对大家有帮助。大家都加油哦

你可能感兴趣的:(JQdemo)