JA文档中文翻译 - JA模板定制FAQ - 定义菜单样式 - VII II X - Joomla控，Drupal粉 - 开源CMS建站新闻杂谈、文档教程、案例介绍、扩展相关、个人博客及收藏

JA文档中文翻译 - JA模板定制FAQ - 定义菜单样式

Joomla文档中文翻译 - JA模板定制FAQ Sunday, 21 February 2010 12:46

昨天的文档教程中，我们学习了怎样为页面的头部及页脚设置圆角样式；今天来看看菜单样式方面的话题。

为了使当前页面中的菜单风格与目标页面中的样式尽量贴近，首先，我们需要将导航菜单中的渐变背景去掉；在template.css文件中的984行附近找到#ja-mainnav的样式代码，并修改为：

#ja-mainnav {
       background:  #444; /* you can change/delete the transparent gradient image or the background color */
       border-top: 1px solid #666; /* you can change the color of the border */
       line-height: 1;
       position: relative;
       z-index: 9;
}

即去掉了背景图片的设置，只保留#444纯色作为背景；现在导航菜单的样式应该如下图所示：

Mega菜单

对于我们的模板来说，只有news.php布局使用到了mega菜单；首先，我们需要将每个菜单项的左右边框去掉。打开templates/ja_purity_ii/css/menu/mega.css文件，在36行附近找到如下代码：

ul.level0 li.mega a.mega {
       border-left: 1px solid #666666; /* you should comment/delete this line */ 
       border-right: 1px solid #333333; /* and this line */ 
       color: #cccccc;
       display: block;
       font-weight: bold;
       line-height: normal;
       margin: 0;
       padding: 8px 15px;
       text-decoration: none;
}

将border-left及border-right这两行去掉。另外在21行附近找到：

ul.level0 {
       border-right:1px solid #666666; /* you can remove/comment this line or move the border to the left*/ 
       float:left;
       margin:0;
       padding:0;
}

同样，将border-right这行去掉。

我们还需要去掉菜单项在鼠标悬停及激活状态时的背景图片，只保留纯色；在69行附近找到ul.level0 li.over,ul.level0 li.haschild-over的样式代码，并修改为：

ul.level0 li.over, ul.level0 li.haschild-over {
       background: #666666; /* you can change/remove the transparent gradient or the color */
}

在84行附近找到ul.level0 li.active的代码，修改为：

ul.level0 li.active {
        background: #0095db;
}

另外不要忘记每个菜单项的子菜单项，对于它们，同样要去掉鼠标悬停状态时的背景图片；在174行附近找到ul.level1 li.over, ul.level1 li.haschild-over的样式代码，修改为：

ul.level1 li.over, ul.level1 li.haschild-over { background: #444444; }

最后，我们还可以修改菜单项弹出层的样式；在180行附近找到如下代码：

.childcontent {
       background: #333333;  /*change here the color to match the new color you have set for mainnav */ 
       border: 1px solid #666666; /* change here the border color to match the new border color you have set for mainnav */ 
       color: #ccc; /* after changing code above, you might want to change this color to make the text color readable  */ 
       z-index: 999;
}