纯CSS菜单

分享于 

23分钟阅读

Web开发

  繁體 雙語

介绍

你有没有听说过,为 IE 创建纯CSS动态菜单是不可能的? 我相信你会的你相信? 最好不要。

本文的目

项目的目的- 只使用在 IE 上工作的CSS构建下拉菜单。 从这个开始我扩展了代码,允许它在其他已知的浏览器上工作。

本文的目的- 更多或者 LESS 教育,并给出一些"隐藏"和rearly的主要概述,浏览器功能。 以及给那些好奇的人展示一些技巧。 这里外,( un ) 技术开发人员还可以为他们的项目获得一些想法( 代码)。

读者需求的技巧

实际上我在想是否把这个标记为"高级"。 但我相信即使是低技能的人也应该理解它。 因此,你需要基本的CSS和HTML知识来阅读它。 在 codeproject.com 中有一些文章可以解释这一点。

其他菜单的CSS有什么不同?

我已经搜索了很长时间的CSS菜单,没有找到纯CSS解决方案,用于 IE。 当然,我在不同的网站上发现了一些有趣的想法。 他们找到了我。 这不完美,代码不清楚,但是我没有足够的时间来让所有的人都认为正确的( 甚至检查语法)。 在( 使用一些 JavaScript ) 元素中添加hover伪类,我发现了最有趣的替代方案。 从不认为这是可以能的。"。"。不过,我从没有想过 IE 上的脚本下拉菜单是可以能的。

我的CSS菜单和其他的主要区别是我在 IE 上的工作。 我发现的所有解决方案都使用李作为 :hover 伪类的主要元素,但微软决定仅将它附加到元素。 大多数网站都注意到他们的菜单只能在 Opera 7.x 或者Mozilla上工作。 但是这些浏览器被 LESS 使用了超过 5%人 ! 纯CSS菜单的美丽在最流行的浏览器中无法看到? 此景不再.

让我们开始。

什么是CSS菜单

好的,把你的鼠标移到这两个字上。

:::::::::::::::::::::::::: collapse ;/*removes。cell-borders*/cursor: 指针;/*because IE 如果链接为 inactive*/},则显示文本 cursor。禁用的{ 颜色: 红色重要,background: 无重要,} div#menu { background: ! #F5F5DC; 字体:10px 宋体,无衬线,高度: 15像素;white-space: nowrap ;宽度: 100% ;} div#menu. a { background: #F5F5DC; 边框:1px 个纯色 #F5F5DC; 颜色: #000000; text-decoration: 无,} div#menu. a table { 显示: block ;字体:10px 宋体,无衬线,white-space: nowrap ;} div#menu table,div#menu table { 显示: 无;} div#menu。a: 悬停 { background: #7DA6EE; 边框:1px 个纯色 #000080; 颜色: #0000FF; 页边距:-1px,/*resolves有 Opera 未显示正确的border*/} div#menu的问题。 a:hover 表,div#menu div。menuitem: 悬停table{背景: #FFFFFF; 边框:1px 个固态 #708090; 显示: block ;位置:绝对;white-space: } div#menu。a: 悬停 table a。div#menu div: 悬悬 table a { border-left: 10px 实心 #708090; border-right: 1px 实心白色;/*resolves一个跳转 problem*/颜色: #000000; 显示:block ;padding: 1px 12像素;text-decoration: 无;white-space: ;z 索引:1000 ;} div#menu。 a:hover 表 a:hover,div#menu div。menuitem: hover表 a:hover { 背景: #7DA6EE; 边框:1px 个实心 #000000; border-left: 10px 纯色 #000000; 颜色:#000000; 显示: block ;padding: 0px 12像素;text-decoration: 无;z-index: 1000 ;} td { border-width: 0像素;填充:0px 0 px 0px x ;}. menuitem { 浮点: 左;margin: 1px 1 px 1px 1 x ;padding: 1px 1 x 1px 1像素;} * { padding: 0px 0 px 0px 0像素,} #other { 高度: 自动;可见性:可见,} #moz{ 高度: 1像素;可见性:} #moz::-moz-cell-content{ 高度: 自动;可见性:可见,} #other::-moz-cell-content{ 高度: 1像素;可见性:} #holder { 宽度: 100% ;:::::::::::::::::::::::::::::: collapse ;/*removes。cell-borders*/cursor: 指针;/*because IE 如果链接为 inactive*/},则显示文本 cursor。禁用的{ 颜色: 红色重要,background: 无重要,} div#menu { background: ! #F5F5DC; 字体:10px 宋体,无衬线,高度: 15像素;white-space: nowrap ;宽度: 100% ;} div#menu. a { background: #F5F5DC; 边框:1px 个纯色 #F5F5DC; 颜色: #000000; text-decoration: 无,} div#menu. a table { 显示: block ;字体:10px 宋体,无衬线,white-space: nowrap ;} div#menu table,div#menu table { 显示: none } div#menu。a: hover。div#menu div。menuitem: hover { background: #7DA6EE; 边框:1px 个纯色 #000080; 颜色: #0000FF; 页边距:-1px,/*resolves有 Opera 未显示正确的border*/} div#menu的问题。 a:hover 表,div#menu div。menuitem: 悬停table{背景: #7DA6EE; 边框:1px 个固态 #000080; 显示: block ;位置:绝对;white-space: } div#menu。a: 悬停 table a。div#menu div: 悬悬 table a { border-right: 1px 实心 #7DA6EE;/*resolves跳转 problem*/颜色: #000000; 显示:block ;padding: 1px 12 px 1px ;text-decoration: 无;空白空间:nowrap ;z 索引:1000 ;} div#menu。 a:hover 表 a:hover,div#menu div。menuitem: hover表 a:hover { 背景: #F5F5DC; 边框:1px 个纯色 #000080; 颜色: #000000; 显示:block ;padding: 0px 12 px 0px ;text-decoration: 无;z-index: 1000 ;} td { border-width: 0像素;填充:0px 0 px 0px x ;}. menuitem { 浮点: 左;margin: 1px 1 px 1px 1 x ;padding: 1px 1 x 1px 1像素;} * { padding: 0px 0 px 0px 0像素,} #other { 高度: 自动;可见性:可见,} #moz{ 高度: 1像素;可见性:} #moz::-moz-cell-content{ 高度: 自动;可见性:可见,} #other::-moz-cell-content{ 高度: 1像素;可见性:} #holder { 宽度: 100% ;}
文件
打开 ili op dulgo
保存
关闭
帮助
索引
关于
Mozilla特定菜单 Filezilla
打开
保存
关闭
Helpzilla
索引
关于

什么是纯CSS菜单?

这是一个不使用脚本的动态菜单( 比如。 JavaScript ),但只使用CSS样式和一些 html。

令人难以置信?

让我们看看代码:

<STYLE type=text/css id="default" title="default" name="default">



*::-moz-any-link br,*:-moz-any-link br { 


/*a workarround for mozilla*/


display:none;


}


div#menu * {


 cursor: pointer; /*because IE displays the text cursor 


if the link is inactive*/


}


.disabled {


 color: red !important;


 background: none !important;


}


div#menu {


 background: #F5F5DC;


 font: 10px Verdana, sans-serif;


 height: 15px;


 white-space: nowrap;


 width: 100%;


}



div#menu. a {


 background: #F5F5DC;


 border: 1px solid #F5F5DC;


 color: #000000;


 text-decoration: none;


}



div#menu. a table {


 display: block;


 font: 10px Verdana, sans-serif;


 white-space: nowrap;


}



div#menu table, div#menu table a {


 display: none;


}



div#menu. a:hover, div#menu div.menuitem:hover {


 background: #7DA6EE;


 border: 1px solid #000080;


 color: #0000FF;


 margin-right:-1px; /*resolves a problem with Opera 


not displaying the right border*/


}



div#menu. a:hover table, div#menu div.menuitem:hover table{


 background: #FFFFFF;


 border: 1px solid #708090;


 display: block;


 position: absolute;


 white-space: nowrap;


}



div#menu. a:hover table a, div#menu div.menuitem:hover table a {


 border-left: 10px solid #708090;


 border-right: 1px solid white; /*resolves a jump problem*/


 color: #000000;


 display: block;


 padding: 1px 12px;


 text-decoration: none;


 white-space: nowrap;


 z-index: 1000;



}



div#menu. a:hover table a:hover, div#menu div.menuitem:hover table a:hover {


 background: #7DA6EE;


 border: 1px solid #000000;


 border-left: 10px solid #000000;


 color: #000000;


 display: block;


 padding: 0px 12px;


 text-decoration: none;


 z-index: 1000;


}



td {


 border-width: 0px;


 padding: 0px 0px 0px 0px;


}


.menuitem {


 float: left;


 margin: 1px 1px 1px 1px;


 padding: 1px 1px 1px 1px;


}



.menuitem * {


 padding: 0px 0px 0px 0px;


}


#other {


 height: auto;visibility: visible;


}


#moz{


 height: 1px;visibility: hidden;


}


#moz::-moz-cell-content{


 height: auto; visibility: visible;


}


#other::-moz-cell-content{


 height: 1px; visibility: hidden;


}


#holder {


 width: 100%;


}



</STYLE>



<TABLE id=holder>


 <TR>


 <TD id="other">


 <DIV id="menu">


 <DIV class="menuitem">


 <a class="a" href='#'>File<BR>


 <TABLE>


 <TR>


 <TD><a href=#2>Open ili op dulgo</A></TD>


 </TR>


 <TR>


 <TD><a href=#3>Save</A></TD>


 </TR>


 <TR>


 <TD><a href=#4>Close</A></TD>


 </TR>


 </TABLE>


 </DIV>


 <DIV class="menuitem">


 <A class="a" href="#11">Help<BR>


 <TABLE>


 <TR>


 <TD><a class="disabled">..</A></TD>


 </TR>


 <TR>


 <TD><a href=#13>Index</A></TD>


 </TR>


 <TR>


 <TD><a href="#14">About</A></TD>


 </TR>


 </TABLE>


 </DIV>


 </DIV>


 </TD>


 </TR>


 <TR>


 <TD id="moz"> Mozilla specific menu!


 <DIV id="menu">


 <DIV class="menuitem">


 <a class="a" href='#'>Filezilla</A>


 <TABLE>


 <TR>


 <TD><a href=#2>Open</A></TD>


 </TR>


 <TR>


 <TD><a href=#3>Save</A></TD>


 </TR>


 <TR>


 <TD><a href=#4>Close</A></TD>


 </TR>


 </TABLE>


 </a>


 </DIV>


 <DIV class="menuitem">


 <A class="a" href="#11">Helpzilla</A>


 <TABLE>


 <TR>


 <TD><a class="disabled">..</A></TD>


 </TR>


 <TR>


 <TD><a href=#13>Index</A></TD>


 </TR>


 <TR>


 <TD><a href="#14">About</A></TD>


 </TR>


 </TABLE>


 </A>


 </DIV>


 </DIV>


 </TD>


 </TR>


</TABLE><BR>



这里发生了什么

我不会教你如何使用 CSS,这不是我文章的重点。 因此我将从这个样式表的核心开始-':hover'伪类。 是的,这是一个类 ! 它表示:选择器可以 inherit 包含':hover'的另一个选择器。 在我们的例子中'a:hover table'选择'<中的<table> 由鼠标悬停在>'。 技巧是,我们有一个 table,它的显示属性设置为无( 含义不可见)。 这里 table 位于锚定标记( <一个>,</a> ) 之间。 微软表示,这可能导致 IE的奇怪行为,但我没有注意到任何。

为什么我们使用 table? 这样,因为它将成功地分离我们希望从主锚中使用的嵌套锚。 实际上它不在 Mozilla 0.7上,我还没有找到任何JavaScript解决方案。 Microsoft不允许锚定的直接嵌套,因此 table 是 IE的解决方法( 或者 hack )。 我只知道 table 做的工作。

所以我们在这里有什么? 2个带有锚定的表 inside。


<A class="a" href="#11" >Help<BR>


<TABLE cellpadding="0" cellspacing="0" border="0">


 <TR>


 <TD><a href="#12">Howto</A></TD>


 </TR>


 <TR>


 <TD><a href="#13">Index</A></TD>


 </TR>


 <TR>


 <TD><a href="#14">About</A></TD>


 </TR>


</TABLE></A>




隐藏起来。


div#menu. a table {


 display: none;


 z-index:-1;


}



浏览器在鼠标悬停时显示锚点的内容并应用该样式:

  • 对于链接的文本:

div#menu. a:hover {


 background: #7DA6EE;


 border: 1px solid black;


 color: black;z-index:0;


}



  • 对于我们用于子菜单的下拉 table: 全部的密钥- 显示下拉列表。

div#menu. a:hover table{


 background: White;


 display: block;


 position: absolute;


 width: 125px;z-index: 0;


 border: 1px solid #708090;



}



  • 对于链接 inside的子菜单:

div#menu. a:hover table a {


 display: block;


 color: Black;


 text-decoration: none;


 padding: 1px 12px;z-index:1000;


}



如果将其中一个链接悬停在子菜单中,浏览器将应用:

  • 对于链接 inside的子菜单:

div#menu. a:hover table a:hover {


 display: block;


 background: #7DA6EE;


 color: black;


 text-decoration: none;


 padding: 0px 11px;


 border: 1px solid black;z-index:1000;


 visibility: visible;


}



  • 下拉菜单中链接的样式。

div#menu. a:hover table a {


 display: block;


 color: Black;


 text-decoration: none;


 padding: 1px 12px;z-index:1000;


}



可能你注意到一些'z-index'属性。 它们是我在测试菜单时发现的一些问题的解决方法。

改进

你可以把整个东西扩展到下拉菜单中的子层次。 只需插入另一个 div'。menuitem'( 它的内容和结构相同),而不是链接到父目录。 现在你的菜单中已经有。 你必须删除 <的> 标签,让菜单显示在旁边。 这里外,你必须创建类的副本数,for和. a 具有相同的属性,但每个分段都有不同的NAME。 似乎有很多工作,但是你可以简单地将它们的选择器添加到样式表中的适当部分

一个完整的描述如何做,我将添加另一个时间。 当然,这是纯 CSS,你可以定制所有。 可能性是无限的- 你的想象力不是。

样式切换( 外观)

你要为用户使用的相同菜单添加不同的外观,必须将它们添加为不同的样式表,并使用 id='some_name'( 用于 IE ) 和 name='some_name'( 针对其他菜单) 添加它们。 对于不应用两种样式,除了将"已经禁用"添加到定义标记( 无论你是链接它还是使用 inline 语法)的样式中之外,你必须将所有。 Mozilla和 Opera 允许从 inside 切换到浏览器的命名样式。 通常这些浏览器并不应用 name="。"定义的所有样式,并且忽略 id="。"。 同时它们也威胁 name='默认值'作为默认样式表和 name='备用'作为替代样式表。 你可以定义用户将通过 title="。"属性看到的样式的NAME。 例如本页的现场演示包括以下定义:


<STYLE type=text/css id="alternate" title="Blue" name="alternate" disabled>


...<STYLE>



<STYLE type=text/css id="default" title="Default" name="default">


...<STYLE>



请注意命名约定和顺序,我强烈建议你遵循。

IE 没有建立css样式切换,因此我们必须实现一个( 我们不可能用一些 JavaScript ):

单击一个选项,然后单击 以查看更改:


它具有以下简单代码:

<ul>


 <li onclick="document.styleSheets('default').disabled=false; 


 document.styleSheets('alternate').disabled=true;">


 <a>Default</a>


 </li>


 <li onclick="document.styleSheets('alternate').disabled=false; 


 document.styleSheets('default').disabled=true;">


 <a>Blue</a>


 </li>


 <li onclick="document.styleSheets('alternate').disabled=true; 


 document.styleSheets('default').disabled=true;">


 <a>No Stylesheet</a>


 </li>


</ul>



警告这只是简单的概述 ! 重新加载页面将重新加载样式表的默认状态 ! 因此,出于实际目的,你必须使用 Cookies 或者服务器端脚本来保留用户的选择,这不是本文的重点。 在adittion中,上面 代码只能在 IE 上工作。

结束语

我绝对建议在你的网站( 网络应用程序) 中使用CSS菜单,因为JavaScript菜单中的大多数问题和 Bug 都是转义的。 这些问题通常是由 IE 引发的鼠标事件奇怪的触发( 或者不射击) 引起的。 另外一些浏览器能够关闭它的脚本支持,而且肯定不支持JavaScript的JavaScript !

如果浏览器不支持 CSS,它仍然会显示(。你可以尝试 上面 样式切换器来关闭样式)的所有链接。 它也会显示Mozilla菜单。

'mozilla问题'- 子菜单不工作的链接 inside。 不可能打开相同的页面( 但使用 shift+click )。 查看'Bug'。

我希望所有这些都有帮助。 罗勃, 祝 你 诸事 顺利.

更新

  • 通过将这里代码添加到样式表中,可以解决Mozilla上 <br>的问题:

a br,a:hover br {/*workarround for mozilla*/


 float:left;width:0px;padding:0px 0px 0px 0px;}




主代码也被修正了
  • 主链接被分离,像素跳跃 Bug 被修正。
  • 添加了对禁用项目的支持。
  • 添加了 specific(alternate) 菜单,点 1. 不再是必需的。请参见'Bug'。
  • 21st: 添加皮肤部分( 添加了可见代码中不包含的备用样式)
  • 21st 月:几乎完成了 mozilla ( 有一些样式 Bug,但工作)的部分
  • 21st: 添加/重写文章的某些部分
  • 21st: 添加了作为. zip 文件下载的现场演示的源代码。

已知 Bug

默认情况下,子菜单上的链接无法在Mozilla上工作。 但我确实找到了一种解决方法。 它基于插入这里浏览器的特定菜单而无需任何脚本。 检查上面提到的代码部分 Mozilla ( 或者或或者'')。 你将看到HTML部分没有标记( 最后一个 </a> 被移动到通常应该保留的地方)的嵌套。 在CSS部分,我使用一些未记录的选择器- 纯Mozilla特定,并添加了 :hover 选择器,这是Mozilla支持的。 它仍然有一些次要的风格 misbehavior。

我有一个注释( 由 Nick Young ),它不能在Netscape上工作。 我相信这个问题与Mozilla一样。 必须再搜索一些关于它的信息。 最终的修复将需要较小的更改,因为替代代码在Netscape上应该可以正常工作。

注释:

  • 代码提取可能与主代码稍有不同。 也没有需要更新它们的重大更改。
  • 我在 IE 5,5.5,6,Opera7.23 和 Mozilla 0.71上测试该页面。 我认为它将在这些浏览器以前的版本上工作。
    • P.S。请不要把我的链接发给我,我已经看到了谷歌发现的所有( )。 它们都不涉及 IE的JavaScript菜单 !
    • P.P.S。请不要忘记投票:)

相关文章