css实现下拉菜单

先上图

这是看到星巴克网站的一个风格很喜欢，但这只是引用了一个logo和一些文字名称，这里实现的样式是一个普通的下拉菜单。

html

<div id="navbar">
        <a href="#"><img src="img/logo.svg" height="37px"></a>
        <h4><a href="https://www.baidu.com/">门店</a></h4>
        <h4><a href="#">我的账户</a></h4>
        <h4><a href="#">菜单</a></h4>



        <img id="nav_down_button" src="img/icon_navbar_button.svg">




        <div  class="navbar_down">
            <a class="text-left"><h4>门店</h4></a>
            <a class="text-left"><h4>星享俱乐部</h4></a>
            <a class="text-left"><h4>菜单</h4></a>
            <a class="text-left"></a>
            <a class="text-left"><h4>星巴克移动应用</h4></a>
            <a class="text-left"><h4>星礼卡</h4></a>
            <a class="text-left"><h4>关于星巴克</h4></a>
            <a class="text-left"><h4>帮助中心</h4></a>
        </div>
    </div>

三部分，第一部分就是导航栏左侧内容，第二部分就是下拉菜单的触发按钮，第三部分就是下拉菜单内容。

CSS

/*导航栏*/
#navbar{
    position: relative;
    width: 100%;
    height: 70px;
    background-color: white;
    padding-left: 10px;
    padding-top: 25px;
    padding-right: 10px;
    display: inline-block;
}
/*导航栏字体*/
#navbar a{
    outline-style: hidden;
    text-decoration:none;
    color: black;
    float: left;
    margin-left: 10px;
}
/*导航栏下拉菜单入口按钮*/
#nav_down_button{
    position: absolute;
    float: right;
    top: 30px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: white;
    outline: none;
    transition: all 300ms ease-out;
}
/*按钮放大*/
#nav_down_button:hover{
     transform: scale(1.2);
}
/*下拉菜单内容*/
.navbar_down{
    display: none;
    position: absolute;
    background-color: white;
    width: 100%;
    overflow: hidden;
    padding-left: 50px;
    box-shadow: -5px 10px 10px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-top: 35px;
    margin-left:-10px;
}
/*字体变粗*/
.navbar_down h4:hover{
    font-weight: bold;
}
/*下拉菜单元素大小*/
.navbar_down a{
    width: 100%;
    height: 50px;
}

JS

需要一点点js处理点击事件

var downdiv=$(".navbar_down");//获取下拉菜单的对象
var downheight=downdiv.outerHeight();//记录下拉菜单高度，因为下面要改变高度，这个参数用于恢复
initmenu();//加载时先初始化
$("#nav_down_button").click(function () {
    //设置个自定义属性，记录下拉菜单是否打开，0或null表示未打开，1表示已经打开
    if(this.getAttribute("isopen")==1){
        this.setAttribute("isopen",0)
        up_anim();
    }else{
        this.setAttribute("isopen",1);
        down_anim()
    }
});
//初始化下拉菜单，默认菜单不显示，此时下拉菜单先将高度为0，然后才设置显示，完成初始化。
function initmenu(){
    downdiv.css("height","0px");
    downdiv.css("display","block");
}
//下拉，即显示时的过渡动画
function down_anim() {
    downdiv.css({"height":downheight+"px", "transition": "all 300ms ease-out"});
}
//上收，即隐藏时的过渡动画
function up_anim() {
    downdiv.css({"height": "0px", "transition": "all 300ms ease-out"});
}

 最后，以上涉及的图片等内容来源网络，仅做学习使用，如有侵权请联系作者删除。