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

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

Joomla文档中文翻译 - JA模板定制FAQ Tuesday, 23 February 2010 09:31

在昨天的文档中，我们学习了有关dropline菜单样式的设置；今天为菜单样式这部分做个了断，来看看几个其他的菜单类型。

首先来看下CSS菜单；对于我们的模板，只有news.php布局需要用到这个菜单。打开templates/ja_purity_ii/css/menu/css.css，找到如下代码：

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
       background: url(../../images/grad1-mask.png) repeat-x top #006699;
       color: #fff;
}

根据我们的设计需求，将其中的#006699替换为#0E9500，很绿的绿。

和设置其他菜单样式时类似，我们要去掉菜单项的左右边框；在85行附近找到如下代码：

#ja-cssmenu li a {
       margin: 0;
       padding: 8px 15px;
       border-left: 1px solid #666; /* you can comment/delete this line */ 
       border-right: 1px solid #333; /* and also this one */ 
       display: block;
       color: #ccc;
       font-weight: bold;
       line-height: normal;
       text-decoration: none;
}

接下来，为菜单项移除鼠标悬停状态时的背景图片；在104行附近找到如下代码：

#ja-cssmenu li:hover,
#ja-cssmenu li.sfhover,
#ja-cssmenu li.havechildsfhover,
#ja-cssmenu li.havechild-activesfhover {
       background: url(../../images/grad1-mask.png) repeat-x top #666;
       color: #fff;
}

将其中的图片url删除或替换为自己的图片均可。

最后，改变处于激活状态的菜单项的背景图或背景色；找到如下代码：

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
       background: url(../../images/grad1-mask.png) repeat-x top #006699;
       color: #fff;
}