ドロップ/トグル（純粋なCSS/HTML）のタブメニュー

Question

私はグローバルナビゲーションの下部にあるタブを持っています。 jqueryを使用しないでください。 タブを展開すると、リンクが垂直方向にあるリストが表示され、タブは展開されたリストの一番下に固定されます。 私は類似のものを見つけるために多くの場所をオンラインで見ましたが、私が達成しようとしているものを見つけることができませんでした。 モバイルフレンドリーでいいですし、地域外でクリックするとトグルする必要があります。

ここはタブの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>

Answer 1

ここでは、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>