JA文档中文翻译 - JA模板定制FAQ - dropline菜单样式
在昨天的文档中，我们对news.php布局中导航菜单(mega菜单)的样式进行了设置；今天来看看怎样设置dropline菜单的样式。
对于我们的模板来说，只有shop.php布局使用到了dropline菜单。和之前的mega菜单类似，首先我们要去掉每个菜单项的左右边框。打开templates/ja_purity_ii/css/menu/dropline.css，在38行附近找到：
#jasdl-mainnav a {
border-left: 1px solid #666; /* you can comment/delete this line */
border-right: 1px solid #333; /* and this line */
color: #ccc;
display: block;
float: left;
font-weight: bold;
line-height: normal;
margin: 0;
padding: 8px 15px;
text-decoration: none;
}
将border-left及border-right这两行去掉。另外在23行附近找到：
#jasdl-mainnav {
position: relative;
border-right: 1px solid #666; /* you can remove/comment this line or move the border to the left*/
float: left;
margin:0 0 0 20%;
}
同样，将border-right这行去掉。接下来是改变菜单项在鼠标悬停状态时的背景图片，在我们的模板中，将其修改为纯色或替换为自己的新图片都OK。在51行附近找到如下代码并删除或修改图片url：
#jasdl-mainnav a:hover, #jasdl-mainnav ul li.hover a {
background: url(../../images/grad1-mask.png) repeat-x top #666; /* you can change/remove the transparent gradient or the color */
color: #fff;
}
最后还需要改变菜单项在激活状态下的背景图片；在57行附近找到：
#jasdl-mainnav li.active a,
#jasdl-mainnav li.active a:hover,
#jasdl-mainnav li.active a:active,
#jasdl-mainnav li.active a:focus {
background: url(../../images/grad1-mask.png) repeat-x top #006699;
color: #fff;
}
对于其中的url属性，删除或替换为自己的图片都OK；对于我们的范例，可以将#006699替换为#ff0000，也就是很红很红那样子的红。另外呢，对于每个菜单项的子菜单，目前还没有针对我们的设计需求来定义它们的样式；可以在template.css的1056至1116行附近找到对应的代码。
另外一个可以尝试的自定义设置，就是将子菜单与主菜单对齐；回到dropline.css文件，将67行附近的#jasdl-subnav代码修改为：
#jasdl-subnav { display: none; margin-left:20%;}
将65行附近的#jasdl-subnav .first-item代码修改为：
#jasdl-subnav .first-item { /*border-left: 0;*/ }
然后打开template.css文件，同样将1035行附近的#ja-subnav li.first-item的左边框注释掉：
#ja-subnav li.first-item { /*border-left: 0;*/ }
现在我们的dropline菜单看上去应该是这个样子了：
译者：Viiiix7210
如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: JA Template Framework/FAQs
| < Prev | Next > |
|---|
RSS Feed
