Joomla文档中文翻译 - 如何创建CSS下拉菜单(drop down) II - VII II X - Joomla控，Drupal粉 - 开源CMS建站新闻杂谈、文档教程、案例介绍、扩展相关、个人博客及收藏

Joomla文档中文翻译 - 如何创建CSS下拉菜单(drop down) II

Joomla文档中文翻译 - 方法教程 Monday, 12 October 2009 21:34

Joomla文档中文翻译如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Creating a CSS Drop down Menu

第二部分：使用Joomla!默认菜单模块来创建Suckerfish菜单

另外一种方式是使用Joomla 1.5自带的mod_mainmenu模块来构造纯CSS的“Suckerfish”菜单。它在IE和Netscape中同样会正常工作。

以下面的层级方式为例创建新菜单项：

菜单项1
- 子菜单项1
- 子菜单项2
- 子菜单项3
确保按如下方式设置菜单项的参数：
- “Menu Style”设置为“List”.
- “始终显示子菜单项”设置为“Yes”.
- 将“Menu Class Suffix”设置为“san” - 你也可以使用自己的命名，但要确保在CSS及JS文件中做相应的修改。

将如下JS代码添加到index.php文件的<head>中；也可以单独创建一个JS文件，然后在index.php中调用该文件。

/* ********* drop down menu Java script code - start **********/
<script type=”text/javascript”><!–//–><![CDATA[//><!– // don’t need this line if using .JS file
sfHover = function()
{
 var sfEls = document.menusan.getElementsByTagName(”LI”);
 
 for (var j=0; j<sfEls.length; j++)
 {
  sfEls[j].onmouseover=function()
  {
   this.className+=” sfhover”;
  }
  sfEls[j].onmouseout=function()
  {
   this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
  }
 } 
}
if (window.attachEvent) window.attachEvent(”onload”, sfHover);
//–><!]]></script> // don’t need this line if using .JS file
 
/* ********* drop down menu Java script code – end  **********/

下面是相应的CSS.同样，CSS代码可以直接放到模板默认的CSS文件中，也可以单独创建、命名并在index.php的<head></head>中将它包含进来；当然也可以通过<style type="text/css">...</style>的方式直接写到index.php文件的<head>中。不要将CSS,JS等直接写到文件的代码主体中，那样将无法通过验证。

/****************** Dropdown Menu styling starts here **************/
.menusan
{
 /* use these params to positions your menu */
 position: relative;
 left: 10px;
}
.menusan, .menusan li, .menusan li ul { /* all lists */
 padding: 0;
 margin: 0;
 list-style: none;
}
.menusan li a {
 display: block;
 width: 10em;
 color:#FFFFFF ;
 background-color:#BC031F;
 border:2px solid #BC031F;
 text-decoration:none;
}
.menusan li { /* all list items */
 float: left;
 width: 10em; /* width needed or else Opera goes nuts */
 border-bottom:1px solid #ccc;
}
.menusan li ul { /* second-level lists */
 position: absolute;
 width: 10em;
 left: -98%; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
}
.menusan li a:hover {
 border:2px solid #8C7AD6;
 background-color:#8C7AD6;
 color:#fff;
}
.menusan li:hover ul, .menusan li.sfhover ul  { /* lists nested under hovered list items */
 left: auto; /* change is to 10px, 20px, etc for indenting the sub menue */
}
/* **************** Dropdown Menu styling end here ***************/