创建下拉菜单在网页上最简单的方法？ [英] Simplest way to create drop down menu on a web page?

问题描述

我创建ASP.NET的一个小项目。我想要一个简单的下拉菜单。大多数的网站上使用jQuery的解决方案。有没有更简单的方法，或者我应该学习jQuery？

I am creating a small project on ASP.NET. I want a simple drop down menu. Most of the solutions on web use jquery. Is there any simpler way or should I learn jquery ?

一件事。菜单应该在IE浏览器。

One more thing. The menu should work on IE.

推荐答案

一些干净的下拉是基于语义的HTML我已经看到了实现（无序列表，导航元素（S）等）和CSS ：悬停伪类。语义结构很好地降解脚本时不可用，而且当像屏幕阅读器设备消耗间preTED很好。

Some of the cleanest drop down implementations I have seen are based on semantic HTML (unordered lists, nav element(s), etc.) and the CSS :hover pseudo class. Semantic structures degrade nicely when script is not available and are interpreted well when consumed by devices like screen readers.

不支持 IE浏览器的旧版本：悬停伪类可容纳与剧本的片段（不需要的jQuery）

Older versions of IE which do not support the :hover pseudo class can be accommodated with a snippet of script (no jQuery required).

口鱼的口鱼/儿子是这种技术的一个很好的例子。

Suckerfish/Son of Suckerfish is a good example of this technique.

code /说明结果

下面是我可以创建最简单的实现这在IE7 +，铬，FF等工作没有脚本需要。

Here is the simplest implementation I could create which works in IE7+, Chrome, FF, etc. No script required.

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

HTML 结果
的我要完成的文件中把这个包在导航标记的

HTML
I'd wrap this in a nav tag in a finished document

<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 */
}

这篇关于创建下拉菜单在网页上最简单的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！