如何创建亚马逊上显示的下拉菜单?

时间:2012-12-14 05:00:46

标签: html css list drop-down-menu

我对网络开发有点新意。我正在尝试创建一个下拉菜单。这就像是:

<select>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
</select> 

但这不是我想要的。我想创建一个非常类似于Amazon.com上的下拉列表(“搜索”旁边的下拉列表),如下图所示。因此,每当用户点击按钮时,列表将作为文本显示在按钮中。

2 个答案:

答案 0 :(得分:1)

首先,请查看http://www.codecademy.com,了解对HTMLCSSJavaScript的简要介绍,以及(更重要的是jQuery)。在粗略了解jQueryCSS后,您可以轻松创建此效果。

http://jquery.com/

答案 1 :(得分:0)

如果您只需要在用户点击按钮时显示下拉菜单,那么最好在jquery中执行此操作。请执行下面的操作

<script type="text/javascript" >
$("#downarrow").click(function(){
$("#dropdown").show();
})
</script>

<div id="downarrow"></div>
<div id="dropdown" style="display:none;">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> 
</div>