JS或CSS中的菜单 - 专业人士？利弊？ [英] menus in JS or CSS - pros? cons?
问题描述
怎么办？菜单系统应该用JavaScript还是CSS构建？
一个典型的问题：
使用PHP / MySQL或其他服务器端数据库/脚本，一个生成一个
网站内容的类别和子类别数组，必须在浏览器的菜单系统中显示
。当然，菜单应该在所有现代浏览器中都能正常显示，但最重要的是，它必须在IE6 +和Firefox中清晰呈现
。
这最好用JavaScript，CSS还是组合来处理？
这个新闻组过去几个月的几篇帖子已尝试
到解决了实现JS解决方案的各种细节，但是在完全搜索后，我发现没有任何内容可以解决哪些方法（JS或CSS）更好。人们有他们的意见 -
但为什么呢？
最后，菜单系统网络上最好的资源是什么？
有许多网站和许多脚本。请问CLJ
的专家你能推荐可靠，健壮的代码吗？
What to do? Should a menu system be constructed in JavaScript or CSS?
A typical problem:
Using PHP/MySQL or other server side db/scripting, one generates an
array of categories and subcategories for site content that must be
displayed in a menu system on the browser. Of course, the menu should
show up properly in all modern browsers, but most importantly, it must
render legibly in IE6+ and Firefox.
Is this best handled by JavaScript, CSS or a combination?
Several posts for the last few months on this newsgroup have attempted
to address various details of implementing a JS solution, but there is
nothing that I have found, after thorough searching, that addresses
which approach (JS or CSS) is better. People have their opinions -
but why?
Finally, what are the best resources on the Net for menu systems?
There are many sites and many scripts. Do the experts here at CLJ
have reliable, robust code you can recommend?
推荐答案
firewood写道：
firewood wrote:
怎么办？菜单系统应该用JavaScript还是CSS构建？
一个典型的问题：
使用PHP / MySQL或其他服务器端数据库/脚本，一个生成一个
网站内容的类别和子类别数组，必须在浏览器的菜单系统中显示
。当然，菜单应该在所有现代浏览器中都能正常显示，但最重要的是，它必须在IE6 +和Firefox中清晰呈现
。
这最好用JavaScript，CSS还是组合来处理？
这个新闻组过去几个月的几篇帖子已尝试
到解决了实现JS解决方案的各种细节，但是在完全搜索后，我发现没有任何内容可以解决哪些方法（JS或CSS）更好。人们有他们的意见 -
但为什么呢？
最后，菜单系统网络上最好的资源是什么？
有许多网站和许多脚本。 CLJ
的专家是否可以推荐可靠，强大的代码？
What to do? Should a menu system be constructed in JavaScript or CSS?
A typical problem:
Using PHP/MySQL or other server side db/scripting, one generates an
array of categories and subcategories for site content that must be
displayed in a menu system on the browser. Of course, the menu should
show up properly in all modern browsers, but most importantly, it must
render legibly in IE6+ and Firefox.
Is this best handled by JavaScript, CSS or a combination?
Several posts for the last few months on this newsgroup have attempted
to address various details of implementing a JS solution, but there is
nothing that I have found, after thorough searching, that addresses
which approach (JS or CSS) is better. People have their opinions -
but why?
Finally, what are the best resources on the Net for menu systems?
There are many sites and many scripts. Do the experts here at CLJ
have reliable, robust code you can recommend?
虽然CSS菜单在现代浏览器中运行良好，但由于悬停支持不佳，IE需要相当多的JavaScript
hackery。
所以你也可以在JavaScript中使用菜单。 JS还为你提供了如何激活菜单的
选择，在某些情况下点击显示比悬停更合适。
-
Ian Collins。
While CSS menus work well in modern browsers, considerable JavaScript
hackery is required for IE due to poor hover support.
So you may as well do the menu in JavaScript. JS also gives you the
choice on how to activate a menu, in some cases click to display is more
appropriate than hover.
--
Ian Collins.
firewood写道：
[snip]
firewood wrote:
[snip]
怎么办？菜单系统应该用JavaScript还是CSS构建？
What to do? Should a menu system be constructed in JavaScript or CSS?
[/ snip]
有关构建跨浏览器验证的许多示例
multi纯CSS中的级别下拉列表，你可以做的比看上去更糟糕了：
< URL：http：//www.cssplay.co .uk>
在该网站上有一些惊人的工作。
JS确实为您提供了添加其他功能的选项/>
菜单，但还必须考虑网站的外观如何没有
JavaScript开启。
问候
Julian Turner
[/snip]
For many examples of constructing cross-browser validating
multi-leveled dropdown lists in pure CSS, you could do worse than look
at:-
<URL: http://www.cssplay.co.uk>
There is some amazing work on that site.
JS does give you the option of adding additional features to your
menus, but one must also think of how the site will look without
JavaScript turned on.
Regards
Julian Turner
firewoodaécrit：
firewood a écrit :
什么到做？菜单系统应该用JavaScript还是CSS构建？
What to do? Should a menu system be constructed in JavaScript or CSS?
毫无疑问：CSS
为IE提供一点JS帮助
或着名* .htc（仅限IE浏览器）
基本CSS：
ul＃menu li ul {display：none}
ul #menu li：hover ul，ul＃menu li.ie ul {display：block}
JS IE-helper：
var IE = false; / * @ cc_on IE = true; @ * /
onload = function（）{
if（IE）{
function roll（what）{
what.className = what.className ==''''？ ''ie''：'''';
}
var L = document.getElementById（''menu''）。getElementsByTag名称（''LI'' ）;
for（var i = 0; i< L.length; i ++）{
L [i] .onmouseover = function（）{roll（this）; };
L [i] .onmouseout = function（）{roll（this）; };
}
}
}
典型的html：
< ul id =" menu>
< li>< a href =" m1.htm"> menu 1< / a>
< ul>
< li>< a href =" m11.htm">子菜单1.1< / a>< / li>
< li>< a href =" m12.htm">子菜单1.2< / a>< / li>
< / ul>
< / li>
< li>< a href =" m2.htm"> menu 2< / a>
< ul>
< li>< a href =" m21.htm">子菜单2.1< / a>< / li>
< li>< a href =" m22.htm">子菜单2.2< / a>< / li>
< / ul>
< / li>
< / ul>
No doubt : CSS
with a little JS help for IE
or the famous *.htc (only IE Windows)
Basic CSS :
ul#menu li ul { display: none }
ul#menu li:hover ul, ul#menu li.ie ul { display: block }
JS IE-helper :
var IE = false; /*@cc_on IE=true; @*/
onload = function() {
if(IE) {
function roll(what) {
what.className = what.className==''''? ''ie'' : '''';
}
var L=document.getElementById(''menu'').getElementsByTag Name(''LI'');
for(var i=0; i<L.length; i++) {
L[i].onmouseover = function() { roll(this); };
L[i].onmouseout = function() { roll(this); };
}
}
}
typical html :
<ul id="menu>
<li><a href="m1.htm">menu 1</a>
<ul>
<li><a href="m11.htm">sub-menu 1.1</a></li>
<li><a href="m12.htm">sub-menu 1.2</a></li>
</ul>
</li>
<li><a href="m2.htm">menu 2</a>
<ul>
<li><a href="m21.htm">sub-menu 2.1</a></li>
<li><a href="m22.htm">sub-menu 2.2</a></li>
</ul>
</li>
</ul>
这篇关于JS或CSS中的菜单 - 专业人士？利弊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
