编辑“CMS Made Simple/菜单管理器”

{{CMS Made Simple top}}
菜单管理器允许您使用模板为页面轻易创建自定义的菜单。 请尝试一下菜单管理器: 使用{menu}标签的选项 在您的CMSMS设计中实现具有自定义css的菜单 在您的模板中加入div或table，用来定位菜单。

==在您的CMSMS设计中实现具有自定义css的菜单==
在您的模板中加入div或table，用来定位菜单如:
 <div id="main_menu"></div>

您的css样式应该类似于：

  #main_menu {
  margin-left: 29%; 
  margin-right: 2%; }

添加菜单标签(输出菜单)：

   <nowiki><div id="main_menu">{menu}</div></nowiki>
然而简单加上菜单标签,对于生成漂亮的菜单时不够的,需要为它选择一个模版. cmsms默认情况下会安装三个菜单模版.其中一个比较灵活且被css美化过的是"cssmenu.tpl",接下来,您需要为标签添加模版了, 标签就变成: 

   <nowiki><div id="main_menu">{menu template='cssmenu.tpl'}</div></nowiki>
接下来,就需要您用css来美化cssmenu.tpl模版了. 首先创建一个名为main_menu_stylesheet的菜单样式表, 添加样式表内容


  #main_menu ul {
  list-style:none; 
  margin:0; 
  padding:0; 
  } 
  #main_menu li { 
  display: inline; 
  margin: 0 2px 0 0; 
  padding: 0; 
  text-transform:uppercase; 
  } 
  #main_menu a { 
  float: left; 
  display: block; 
  font: bold 12px Arial; 
  color: black; 
  text-decoration: none; 
  margin: 0 1px 0 0; 
  padding: 5px 10px 5px 10px; 
  background-color: white; 
 }
 

然后保存样式表,并将样式表附加到您的模版上. 至此您的主模版就可能有两个样式表了,其中一个就是为菜单准备的.

==利用css美化菜单的== 

利用CSS可以创造任何您喜欢的设计。可以参考一些典型的例子：
 

http://www.dynamicdrive.com/style/csslibrary
 

http://www.webshapes.org/template/category/CSS_Menus
 

http://webdeveloper.econsultant.com/css-menus-navigation-tabs/
 

关于css，有一些必须是您需要知道的：

请保证您在模板中使用的div/table的id与菜单样式表中的id是匹配的。

如果您给包围菜单的div/table的id命名为main_menu， 菜单样式表中也必须要用这个名字.

如果您想让当前页面对应的菜单链接和其他链接有不同的显示效果，请在您的菜单css中添加样式，如果当前页对应的链接的css为.menuactive那么在样式表中添加的内容为：

  #main_menu li .menuactive { /** currently selected menu item **/
   background-color: 
   padding-top: 9px; 
   padding-bottom: 5px; 
   color: white; 
  }


如果您的菜单含有父级菜单或子菜单的话，为了格式父菜单，可以使用 .menuparent样式定义.
 

如果您使用下拉菜单或弹出菜单的话，为了能在IE6中正常工作，您需要在模板的head标签内添加下面的代码：
 

  <!--[if lte IE 6]> <script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script> <![endif]-->
 

如果想去掉菜单项前面的数字的话，请将名为Accessibility的样式表附加到您的主模板中。

'''菜单节点参数列表: 请查看"菜单标签"的相关说明'''

如何使用内置的菜单模板

使用横向下拉菜单

将下列内容添加到模版的head标签内

  <!--[if IE]> <script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script> <![endif]--> 
将下列代码放到模板中，您希望菜单它出现的位置
  {cms_module module='menumanager' template='cssmenu-accessible.tpl' 
将名为"Default CSSMenu Horizontal"的样式表附加到您的模版上
  
==利用$node->hierarchy来获得菜单项对应的第一个数字==
  {foreach from=$nodelist item=node} {if $node->current == true}{$node->hierarchy|truncate:1:""}{/if} {/foreach}
上面代码将获得$node->hierarchy的第一个数字，如果您的菜单层次为
 1. Home 
 2. Services 
 2.1. First 
 2.2. Second 
 3. Contact 
 3.1. Address 
 3.2. Form 
如果当前页是Services, 或者first,或者second,那么将输出2. 如果当前页是Contact, Address或Form则会输出3.

'''注意：'''上述代码之能工作在单个数字的层次，如果您的页面超过9个顶级页面的话，她是不能够正常工作。

 

 

在官方网站上有很多用户自己提交的菜单，可供您去选择：请参见[http://wiki.cmsmadesimple.org/index.php/User_Handbook/Admin_Panel/Layout/Menu_Manager#Get_first_digit_of_.24node-.3Ehierarchy User Submitted Menu]

 Advanced CSS Menu Styling 
 menu_with_icons 
 list_children (Now working with multiple groups of child pages) 
 list_children_recursive 
 show_home_siblings 
 Generic sub-menu 
 improved_sitemap 
 count_children 
 menu_icon_expand 
 section_expand 
 show_children_of 
 header_link_to_child 
 header_link_to_child_red_active 
 header_link_to_child_dont_show_children 
 page_description 
 stop_at_element 
 simple_menu 
 inverse_menu 
 suckerfish based vertical flyout nav 
 A jumping nav with a select box

==参考来源==
*[http://www.cmspc.com/html/CMS-Made-Simple-Art/2010/0218-cms-made-simple-art-393.htm 参考来源]

{{CMS Made Simple}}

[[category:CMS Made Simple|A]]