先上图
这是看到星巴克网站的一个风格很喜欢,但这只是引用了一个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"});
}
最后,以上涉及的图片等内容来源网络,仅做学习使用,如有侵权请联系作者删除。