我需要从链接创建一个简单的下拉列表。当用户单击超链接时,将显示下拉列表。
菜单部分将具有渐变。它不需要任何悬停效果。它将有几个可点击的项目。没有按钮或任何其他装饰。
有没有人有一个如何创建此类下拉列表的示例?
答案 0 :(得分:2)
如果你想要涉及jQuery的解决方案,这里有一个例子。
<强> HTML 强>
<a href="#">Click me!</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
<强> CSS 强>
ul {
list-style-type: none;
padding: 0;
width: 200px;
border: 1px solid red;
display: none;
}
ul li a {
display: block;
}
<强>的jQuery 强>
$(document).ready(function(){
$("a").click(function(){
$(this).next().toggle();
});
});
以下是演示http://jsfiddle.net/qrQR8/
如果你想要纯CSS解决方案(基于问题上的标签),这里是使用复选框的示例。
<强> HTML 强>
<label for="trigger">Click me!</label>
<input type="checkbox" id="trigger" name="trigger"/>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
<强> CSS 强>
ul {
list-style-type: none;
padding: 0;
width: 200px;
border: 1px solid red;
display: none;
}
input[name=trigger] {
display: none;
}
ul li a {
display: block;
}
label {
cursor: pointer;
}
input[name=trigger]:checked + ul {
display: block;
}
这是demo http://jsfiddle.net/qrQR8/1/
您可以使用:target
选择器的优点,但点击后无法再隐藏菜单。
答案 1 :(得分:1)
这是一个javascript解决方案:
使用Javascript:
$( "#link" ).mousedown( function( ){
$( this ).next( ).show( 100 );
});
HTML:
<div>
<div id="link">Click me</div>
<div syle="display:none">
<div>This item</div>
<div>That item</div>
<div>Other item</div>
</div>
</div>
答案 2 :(得分:1)
我建议您使用jQuery Superfish Menu。
它有一个很好的平滑效果,它甚至与IE6兼容(是的,不幸的是有一些丑陋的项目 - 是,UGLY - ,需要兼容)。
更改它的CSS非常容易。它是一个高度可定制的插件。