我需要从链接创建一个简单的下拉列表。 当用户单击超链接时,将显示下拉列表。

菜单部分将具有渐变。 它不需要任何悬停效果。 它将有几个可点击的项目。 没有涉及任何按钮或其他装饰。

有没有人有如何创建这种类型的下拉菜单的示例?

===============>>#1 票数: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;
}

这是演示http://jsfiddle.net/qrQR8/1/


您可以使用:target选择器的优点,但是单击后无法再次隐藏菜单。

http://jsfiddle.net/qrQR8/2/

===============>>#2 票数: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>

===============>>#3 票数:1

我建议您使用jQuery Superfish Menu

它具有良好的平滑效果,甚至与IE6兼容(是的,不幸的是,有些丑陋的项目-是,丑陋的-需要与之兼容)。

更改它的CSS非常容易。 这是一个高度可定制的插件。

  ask by 4thSpace translate from so

未解决问题?本站智能推荐:

关注微信公众号