下拉菜单/切换（纯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）

回答

相关问题