侧边导航栏

一、效果图

二、html

<!--左侧菜单栏-->
    <div id="sidebar">
        <!--网站名称-->
        <div id="webtitle">
            <a href="./index.html"><img src="./images/房屋.png" />微圈企业平台</a>
        </div>
        <!--内容管理-->
        <div class="menu">
            <div class="menutitle">
                <a href="javascript:;"><img src="./images/contentManup.png" />内容管理</a>
            </div>
            <div class="menuitems">
                <ul>
                    <li><a href="javascript:;">活动管理</a></li>
                    <li><a href="javascript:;">话题管理</a></li>
                    <li><a href="javascript:;">直播管理</a></li>
                </ul>
            </div>
        </div>
        <!--会员管理-->
        <div class="menu">
            <div class="menutitle">
                <a href="javascript:;"><img src="./images/memberManup.png" />会员管理</a>
            </div>
            <div class="menuitems">
                <ul>
                    <li><a href="javascript:;">一级会员</a></li>
                    <li><a href="javascript:;">二级会员</a></li>
                </ul>
            </div>
        </div>
        <!--积分管理-->
        <div class="menu">
            <div class="menutitle">
                <a href="javascript:;"><img src="./images/scoreManup.png" />积分管理</a>
            </div>
            <div class="menuitems">
                <ul>
                    <li><a href="javascript:;">积分跟踪</a></li>
                    <li><a href="javascript:;">积分处理</a></li>
                    <li><a href="javascript:;">积分历史</a></li>
                    <li><a href="javascript:;">积分项</a></li>
                </ul>
            </div>
        </div>
        <!--数据统计-->
        <div class="menu">
            <div class="menutitle">
                <a href="javascript:;"><img src="./images/dataStaup.png" />数据统计</a>
            </div>
            <div class="menuitems">
                <!-- <ul>
                   无子菜单
                </ul> -->
            </div>
        </div>
        <!--应用管理-->
        <div class="menu">
            <div class="menutitle">
                <a href="javascript:;"><img src="./images/applicationup.png" />应用管理</a>
            </div>
            <div class="menuitems">
                <ul>
                    <li><a href="javascript:;">应用列表</a></li>
                    <li><a href="javascript:;">模板列表</a></li>
                </ul>
            </div>
        </div>
    </div>

三、css

body,ul,li{
    padding:0px;
    margin:0px;
    overflow-y: hidden;
}
/* 左侧菜单兰样式 */
ul>li{
    list-style: none;
}
#sidebar{
    background-color: #091b27;
    width:200px;
    height:100%;
    position: absolute;
}
#webtitle{
    width:200px;
    height:30px;
    margin:15px 0px 15px;
    text-align: center;
}
#webtitle>a{
    color: #01d5c6;
    font-size: 20px;
    text-decoration: none;
}
#webtitle>a>img{
    width:20px;
    height:20px;
    position: relative;
    top:3px;
    right: 4px;
}
.menutitle>a{
    text-decoration: none;
    color:#78909c;
    font-weight: 400;
}
.menutitle>a>img{
    width: 23px;
    height: 23px;
    position:relative;
    top:5px;
    right:5px;
}
li>a{
    text-decoration: none;
    color: #78909c;
    font-weight: 200;
}
.menuitems{
    display: none;
    background-color: #112735;
}
.menutitle,.menuitems>ul>li{
    width:200px;
    height:50px;
}
.menutitle>a{
    padding-left:30px;
}
.menuitems>ul>li>a{
    padding-left:50px;
}
.menutitle>a,.menuitems>ul>li>a{
    display: block;
    line-height: 40px;
}

四、js（先引入jquery文件，用到了jquery的下滑和上滑）

$(document).ready(function(){
    const menutitles=document.querySelectorAll(".menutitle");
    const Tlinks=document.querySelectorAll(".menuitems a");
       
    Tlinks.forEach((value,index,arr)=>{
        Tlinks[index].addEventListener('click',(e)=>{
            for(let i=0;i<Tlinks.length;i++){
                Tlinks[i].style.color="#78909c";
            }
            Tlinks[index].style.color="#ffffff";
        })
    });

    const myself=document.querySelector(".accountbox").children[0];
    const friends=document.querySelector(".friends");
    myself.addEventListener('mouseover',()=>{
        $('.friends').css('display','block');
    });
    myself.addEventListener('mouseleave',()=>{
        $('.friends').css('display','none');
    })
    friends.addEventListener('mouseover',()=>{
        $('.friends').css('display','block');
    });
    friends.addEventListener('mouseleave',()=>{
        $('.friends').css('display','none');
    });

    $(".menutitle").click(function(){// 设置滑动
        if($(this).next().children().length==0){
            $('.menutitle').next().slideUp(toogleOthers());
            $(this).css("background-color","#112735");
            $(this).find("a").css("color","#ffffff");
        }else{
            $('.menutitle').next().slideUp(toogleOthers());
            if($(this).next().css("display")=="none"){  // 下滑
                $(this).next().find("a")[0].click();  // 选中第一个菜单
                // 替换图片
                let oldadd=this.getElementsByTagName("img")[0].getAttribute("src");
                let newadd=oldadd.replace('up','down');
                $(this).find("a").find("img").attr("src",newadd);
                $(this).next().slideDown();
                $(this).css("background-color","#112735");
                $(this).find("a").css("color","#01d5c6");
            }else{
                $(this).next().slideUp(()=>{  // 上滑
                    let oldadd=this.getElementsByTagName("img")[0].getAttribute("src");
                    let newadd=oldadd.replace('down','up');
                    $(this).find("a").find("img").attr("src",newadd);
                    $(this).css("background-color","#091b27");
                    $(this).find("a").css("color","#78909c");
                })
            }
          //$(".menuitems").toggle();
        }
    });

    const toogleOthers=()=>{
        for(let i=0;i<menutitles.length;i++){
            if($(menutitles[i]).next().children().length!=0){
                let oldadd=menutitles[i].getElementsByTagName("img")[0].getAttribute("src");
                let newadd=oldadd.replace('down','up');
                // menutitles[i].getElementsByTagName("img")[0].src=newadd;
                // menutitles[i].style.backgroundColor='#091b27';
                // menutitles[i].children[0].style.color="#78909c";
                $(menutitles[i]).find("a").find("img").attr("src",newadd);
                $(menutitles[i]).css("background-color","#091b27");
                $(menutitles[i]).find("a").css("color","#78909c");
            }else{
                $(menutitles[i]).css("background-color","#091b27");
                $(menutitles[i]).find("a").css("color","#78909c");
            }
        }
    };
    
});