下拉菜單/切換（純CSS/HTML）

我有一個選項卡，位於全局導航的底部。我希望該選項卡展開和收縮點擊最好不使用jQuery。當標籤展開時，它將包含一個帶有垂直鏈接的列表，並且標籤應該粘貼到展開列表的底部。我已經在網上找了很多地方找到類似的東西，但一直沒有找到我想要達到的目標。移動友好將是很好的，需要切換時點擊區域外。下拉菜單/切換（純CSS/HTML）

這是該選項卡的css。

.findprod { 
    position: absolute; 
    top: 11.5vw; 
    background-color:rgba(0, 0, 0, 0.5); 
    text-decoration: none; 
    text-align:center; 
    right:7vw; 
    top-padding:-.7vw; 
    margin:-.7vw; 
    width:10.75vw; 
    font-family: Lato; 
    color: white; 
    font-size: .88vw; 
    font-weight: 400; 
    line-height: 3.1vw; 
    border: none; 
    -webkit-border-radius: 0 1px 22px 22px; 
    border-radius: 0 1px 22px 22px; 
    white-space: nowrap; 
    overflow: hidden; 
    z-index:1; 
    }

HTML：<div class="findprod"> Find a Product </div>

來源

2016-05-23 Jennifer Mitchell

這類型的功能通常是不可能僅使用'html'和'css'。像這樣的操作需要使用JavaScript處理。 –

@spencerlarry你有沒有關於如何使用jquery完成這個任何關閉的例子？ –

我有這個，但它不會追加頂部到底部https://codepen.io/Uberdork/pen/VaoXRB –

下面是如何使用jQuery做一個簡單的例子。

參見：https://jsfiddle.net/552xrcf3/

$('.findprod').click(showHide); 
 

 
function showHide(){ 
 
\t $('#list').slideToggle(); 
 
}

.findprod { 
 
    background-color:rgba(0, 0, 0, 0.5); 
 
    text-align:center; 
 
    color: white; 
 
    font-family: sans-serif; 
 
    display: inline-block; 
 
    padding: 20px 30px; 
 
    border-radius: 0 0 40px 40px; 
 
    cursor: pointer; 
 
} 
 

 
#list{ 
 
    display: none; 
 
    list-style-type: none; 
 
    font-family: sans-serif; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="list"> 
 
\t <li>Rocks</li> 
 
\t <li>Pipes</li> 
 
\t <li>Cookies</li> 
 
\t <li>Office Supplies</li> 
 
\t <li>Fireworks</li> 
 
</ul> 
 
<div class="findprod"> Find a Product</div>

來源

2016-05-23 20:26:31

下拉菜單/切換（純CSS/HTML）

回答

相關問題