Question

我正在ASP.NET上创建一个小项目。我想要一个简单的下拉菜单。 Web上的大多数解决方案都使用jquery。有没有更简单的方法，还是我应该学习jquery？

还有一件事。菜单应该适用于IE。

Answer 1

我见过的一些最干净的下拉实现基于语义HTML（无序列表，nav元素等）和CSS :hover伪类。当脚本不可用时，语义结构会很好地降级，并且在被屏幕阅读器等设备使用时会被很好地解释。

不支持:hover伪类的旧版IE可以通过一段脚本（不需要jQuery）来填充。

Suckerfish / Suckerfish的儿子就是这种技术的一个很好的例子。

Code/Description
Examples

实施例

这是我可以创建的最简单的实现，适用于IE7 +，Chrome，FF等。无需脚本。

完整示例：http://jsfiddle.net/BejB9/4/

<强> HTML
我将其包装在已完成文档中的nav标记中

<ul class="nav">
    <li>This item has a dropdown
        <ul>
            <li>Sub item 1</li>
            <li>Sub item 2</li>
        </ul>
    </li>    
    <li>Item</li>
    <li>So does this item
            <ul>
            <li>Sub item 1</li>
            <li>Sub item 2</li>
        </ul>
    </li>
</ul>

<强> CSS

UL.nav > LI {
    list-style: none;
    float: left;
    border: 1px solid red;
    position: relative;
    height: 24px; /* height included for IE 7 */
}

UL.nav UL{
    left: -10000px;
    position: absolute;            
}

UL.nav > LI:hover UL{
    left: 0;
    top: 24px; /* IE7 has problems without this */
}

Answer 2

就像谷歌“CSS菜单”一样，只要找到你喜欢的菜单，就可以通过复制/粘贴找到所需的一切。学习一点CSS，然后你可以根据自己的喜好进行修改。

请参阅：100 Great CSS Menu Tutorials

请参阅：CSS Menu Maker

Answer 3

没有必要学习jQuery才能使用它或它的插件。你可以谷歌搜索“jquery下拉菜单”，你会发现数百个网站都有现成的代码和/或教程。

示例：http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

稍后你要做的就是通常使用<ul><li>结构构建菜单，然后调用正确的选择器。

您将拥有的其他选项是使用CSS下拉菜单 - 就像我为jQuery写的那样谷歌。

在网页上创建下拉菜单的最简单方法是什么？

3 个答案:

实施例