如何在可以最小化的网站导航栏上创建优惠券？

Question

我在正在导航栏上方显示的网站上看到了此优惠。

它看起来像这样一旦点击右上角的箭头。

我该如何让它响应？

任何人都可以分享如何实现这样的解决方案？有没有现有的解决方案可以重复使用？

Answer 1

自己制作一个很简单。
的主要步骤包括：

1. 创建一个div元件，固定于所述顶部，高度零
2. 把一个按钮以右上角
3. 绑定事件到按钮，当按下时，肘节div的高度。

下面是一个例子：http://codepen.io/SLRXXX/pen/YWVdJZ

$('.button').on('click', function() { 
 
    $('.top').toggleClass('active'); 
 
});

.top { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 0; 
 
    width: 100%; 
 
} 
 
.strip { 
 
    height: 0; 
 
    background-color: yellow; 
 
    transition: height 0.5s; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 
.top.active .strip{ 
 
    height: 40px; 
 
} 
 
.button { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 5px; 
 
    width: 40px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    background-color: yellow; 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 
.arrow-down { 
 
    transition: transform 0.5s; 
 
} 
 
.top.active .arrow-down{ 
 
    transform: rotate(180deg) 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 

 
<div class="top"> 
 
    <div class="strip"> 
 
    some content 
 
    </div> 
 
    <div class="button"> 
 
    <i class="glyphicon glyphicon-chevron-down arrow-down"></i> 
 
    </div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>