模块被发布后,我们可以在系统后台这个菜单模块的设置里面控制其输出样式. 当你建立了一个模块,系统会给你下面的提示告诉你将有一个相同名称的模块被建立.
New Menu Created
在这个菜单相关的模块里, 这个菜单会有几个样式选择如下图:
Menu Options
* Vertical
菜单以垂直列表显示
* Horizontal
菜单以水平列表显示
* Flat List
菜单以 <ul> CSS 列表显示
表格模式的代码是这样的:
<div class=”moduletable”>
<h3>Main Menu</h3>
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr align=”left”>
<td> <a xhref=”http://dev.joomla.org/component/option,com_frontpage/amp;Itemid,1/” class=”mainlevel” id=”active_menu”>Home</a>
</td>
</tr>
<tr align=”left”>
<td> <a xhref=”http://dev.joomla.org/content/” class=”mainlevel” >Joomla! License</a> </td></tr> <tr align=”left”><td><a xhref=”http://dev.joomla.org/content/” class=”mainlevel” >News</a>
</td>
</tr>
<tr align=”left”>
<td> <a xhref=”http://dev.joomla.org/content/” class=”mainlevel” >Blog</a>
</td>
</tr>
<tr align=”left”>
<td> <a xhref=”http://dev.joomla.org/component/option,com_weblinks/amp;Itemid,23/” class=”mainlevel” >Links</a> </td></tr> <tr align=”left”><td> <a xhref=”http://dev.joomla.org/component/option,com_contact/amp;Itemid,3/” class=”mainlevel” >Contact Us</a>
</td>
</tr>
<tr align=”left”>
<td> <a xhref=”http://dev.joomla.org/component/option,com_search/amp;Itemid,5/” class=”mainlevel” >Search</a>
</td>
</tr>
<tr align=”left”>
<td>
<a xhref=”http://dev.joomla.org/component/option,com_newsfeeds/amp;Itemid,7/” class=”mainlevel” >News Feeds</a>
</td>
</tr>
<tr align=”left”>
<td> <a xhref=”http://dev.joomla.org/content/” class=”mainlevel” >FAQs</a>
</td>
</tr>
<tr align=”left”><td> <a xhref=”http://dev.joomla.org/component/option,com_wrapper/amp;Itemid,8/” class=”mainlevel” >Wrapper</a>
</td>
</tr>
</table>
</div>
flat list 模式的代码在同一菜单确是这样:
<div class=”moduletable”>
<h3>Main Menu</h3>
<ul id=”mainlevel”>
<li><a xhref=”http://dev.joomla.org/component/option,com_frontpage/amp;Itemid,1/” class=”mainlevel” id=”active_menu”>Home</a></li>
<li><a xhref=”http://dev.joomla.org/content/” class=”mainlevel” >Joomla! License</a></li>
<li><a xhref=”http://dev.joomla.org/content/” class=”mainlevel” >News</a></li>
<li><a xhref=”http://dev.joomla.org/content/” class=”mainlevel” >Blog</a></li>
<li><a xhref=”http://dev.joomla.org/component/option,com_weblinks/amp;Itemid,23/” class=”mainlevel” >Links</a></li>
<li><a xhref=”http://dev.joomla.org/component/option,com_contact/amp;Itemid,3/” class=”mainlevel” >Contact Us</a></li>
<li><a xhref=”http://dev.joomla.org/component/option,com_search/amp;Itemid,5/” class=”mainlevel” >Search</a></li>
<li><a xhref=”http://dev.joomla.org/component/option,com_newsfeeds/amp;Itemid,7/” class=”mainlevel” >News Feeds</a></li>
<li><a xhref=”http://dev.joomla.org/content/” class=”mainlevel” >FAQs</a></li>
<li><a xhref=”http://dev.joomla.org/component/option,com_wrapper/amp;Itemid,8/” class=”mainlevel” > Wrapper</a></li>
</ul>
</div>
同 样的, 使用CSS要比表格更容易精简代码和重组代码. 如果把菜单全部设置成 flat lists 我们会有12个表(有些table如果不通过hacking是没办法去掉的). Lists 比 tables更好是因为一些基于文本的浏览器,屏幕阅读器, 没有CSS支持的浏览器, 支持CSS的浏览器和引擎机器程序能够更容易的访问你网站的内容.
使用CSS菜单的另外优点就是我们可以在很多CSS开发站点看到很多有用的代码,下面就是其中的例子.
这个站点web page at maxdesign.com 有30个左右的菜单全部用下面的CSS代码实现. 这种方式被称为 Listamatic.我们为了适应JOOMLA会有一点点不同的地方.
这些lists使用下面的代码:
<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” id=”current”>Item one</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#”>Item two</a></li> <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#”>Item three</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#”>Item four</a></li> <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#”>Item five</a></li>
</ul>
</div>
上面描述有个 <div> 块叫做 navcontainer ,<ul> 是一个 navlist 的ID号. 我们如果把它应用与JOOMLA,我们必须要加入模块, 我们在 left 模块之前加入 user1 模块.
<div id=”sidebar”>
<div class=”inside”>
<div id=”navcontainer”>
<?php mosLoadModules(’user1′,-2);?>
</div>
<?php mosLoadModules(’left’,-2);?>
</div></div>
请注意我们现在把 mosLoadModules 放入 <div> 块中调用.这里可以是任何名字, 但是这本指导的目的, 是更容易的让所有的菜单应用此模式!
下面,会有关于 navlist 的参考, 对于JOOMLA是用 mainlevel来输出:
<ul id=”mainlevel”>
最后, 我们需要在管理后台给 user1 模块定义一个CSS module suffix 从而让这个模块获得唯一的样式.
Module Suffix
Module Class Suffix 可以被应用于所有的模块. 输出的时候, 模块对应的 <div> 块将得到这里设置的参数.
在这个例子中:
* 如果使用 -2 style 参数就是 .moduletable-leftnav.
* 如果使用 -3 style 参数就是 .module-leftnav.
这种关于 module class suffix 的设定十分有用. 我们将在 Tips and Tricks section 章节中看到使用 module class suffix的小的变动实现不同封装模块的方法.
我们的站点我们将使用 List 10 by Mark Newhouse. 我们的CSS代码如下:
.moduletable-leftnav{
margin-bottom:1em;
padding:0; /*the padding is removed so the menu fills the whole module box*/
border:1px #CCC solid;
}
.moduletable-leftnav h3{
background:#666;
width:100%;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0;
/*now we have no padding in the module, we don’t need the negative margins*/ border-bottom: 1px solid #CCC;
}
#navcontainer{
padding:0;
color: #333;
}
#navcontainer ul{
list-style: none;
margin: 0;
padding: 0;
}
#navcontainer li{
border-bottom: 1px solid #ccc;
margin: 0;
}
#navcontainer li a{
display: block;
padding: 3px 5px 3px 0.5em;
border-left: 10px solid #333;
border-right: 10px solid #9D9D9D;
background-color:#666;
color: #fff;
text-decoration: none;
}
html>body #navcontainer li a {
width: auto;
}
#navcontainer li a:hover,a#active_menu:link,a#active_menu:visited{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
设计提示:
当 我们尝试用一个定制的菜单去工作, 这里有一个提示. 使用JOOMLA默认安装,我们观察关于mainmenu的代码, Copy 这段代码并把它粘贴到HTML 编辑器里面(比如Dreamweaver). 使用”#” 更改所有的link,然后加入CSS代码. 菜单的代码建立的样式是这样的:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!– .thisisyourCSS {
/* put a rule here*/
} –>
</style>
</head>
<body>
<div class=”moduletable”>
<h3>Main Menu</h3>
<ul id=”mainlevel”>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” id=”active_menu”>Home</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” >Joomla! License</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” >News</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” >Blog</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” >Links</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” >Contact Us</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” >Search</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” >News Feeds</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” >FAQs</a></li>
<li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/#” class=”mainlevel” >Wrapper</a></li>
</ul>
</div>
</body>
</html>
注意,为了更易于编辑,嵌入式的CSS代码要优于链接式的CSS代码.