问题描述
我创建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.
结果
下面是我可以创建最简单的实现这在IE7 +,铬,FF等工作没有脚本需要。
Here is the simplest implementation I could create which works in IE7+, Chrome, FF, etc. No script required.
完整的示例:
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 */
}
这篇关于创建下拉菜单在网页上最简单的方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!