Joomla文档中文翻译 - 如何创建CSS下拉菜单(drop down) I
如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Creating a CSS Drop down Menu
Flash和Javascript这两种技术在多数情况下不利于使页面简洁精炼并通过W3C验证，但现今很多下拉菜单(drop down)的创建方式都会采用这两种技术中的一种。实际上有很多其他的方式可以用来创建在视觉上更有吸引力的下拉菜单，甚至可以通过只使用CSS的方式来做到。
下拉菜单多数采用无序列表(ul)来创建。“Suckerfish”是一种常见的下拉菜单创建模式。它只使用CSS，非常简洁精炼，无需hack，并且只用到12行Javascript代码来解决一些IE6(及更低版本)下的小问题。这个demo向你展示了Suckerfish模式可以创建怎样的菜单。关于Suckerfish模式的更多信息，可以参考这里或A List Apart中的“Suckerfish Dropdowns”。
Suckerfish模式可以非常完美的在Joomla!中创建使用。
第一部分：使用扩展菜单模块来创建Suckerfish菜单
为了创建Suckerfish菜单，我们需要使菜单本身的输出格式简洁且优秀。有一个现成的模块可以帮我们做到这一点，它叫做“extended_menu”，你可以在这里或Joomla!扩展中找到并下载它。
下载这个模块并安装。现在让我们看看它。进入模块管理(Module Manager)中的Extended Menu(别忘了激活它)。我们最好为它设置menu class suffix和module class suffix，我使用“mainnav”作为这个class(会在下面的代码中用到)。在Menu Style中选择Tree List，将Expand Menu设置为Yes。
然后将这个菜单放到你希望它出现的模板位置中；下面让我们看看CSS。接下来的代码可以直接放到模板默认的CSS文件中，也可以单独创建、命名并在index.php的<head></head>中将它包含进来。
#twocols{ /*the columns that gets dropped down over yours might be different*/
z-index:20;
}
#leftcol{ /*the columns that gets dropped down over yours might be different*/
z-index:10;
}
.moduletablemainnav { /* I have absolutely positioned the module, you might have a different scheme*/
position:absolute;
top:187px;
left:20px;
z-index:100;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#mainlevelmainnav,#mainlevelmainnav ul {
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}
#mainlevelmainnav a {
display:block;
color:#f90;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevelmainnav li {
float:left;
padding:0;
}
#mainlevelmainnav li ul {
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#36f;
border:#00C 1px solid;
margin:0;
}
#mainlevelmainnav li li {
width:11em;
}
#mainlevelmainnav li ul a {
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
font-weight:400;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
left:auto;
z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover {
background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}
现在，只需要正确设置好z-index的值；另外记得要使某元素拥有z-index属性，它必须有定位属性：绝对定位(absolute)或相对定位(relative)。
最后需要在index.php的头部或单独的js文件中添加一些Javascript代码，来解决IE下的一些问题(IE中无法为元素设定:hover的问题)。
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
现在，你就拥有了一个简洁且可通过验证的下拉菜单了。
待续——第二部分：使用Joomla!默认菜单模块来创建Suckerfish菜单
译者：viiiix.com
| < Prev | Next > |
|---|
RSS Feed
