如何在可以最小化的網站導航欄上創建優惠券？

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>