编辑“闻名企业网站系统/菜单文件与菜单CSS文件”

{{WeenCompany top}}

==[[模板]]的菜单文件==
下面介绍模板的菜单文件(categories.php)中每条语句的含义和用法：

<span style="color:coral;">提示：</span>
按以下内容制作的菜单文件将可适用于以后的weenCompany5.0.0版，未提示的地方一般无需修改，另在修改时注意[[JS]]标点符号。
<PRE>
<?php
// +---------------------------------------------+
// |     Copyright  2006 - 2009 weenCompany      |
// |     http://www.weentech.com                 |
// |     This file may not be redistributed.     |
// +---------------------------------------------+

if(!defined('IN_WEENCOMPANY'))
{
  die("File not found!");
}


echo "<script language=\"JavaScript\">
      <!--
      function wrap_root (text, id)
      {
        /*这个JS函数确定了顶级菜单的内容和CSS样式, 其中CSS样式分别在模板的menu.css文件中定义*/
        return ['<span class=categorydefault id=' + id +'>' + text + '</span>',  
		/*这句指定顶级菜单默认样式为: categorydefault, 注意id=' + id +'不能省略, 否则不支持5.0.0菜单新功能*/
                '<span class=categoryhover>' + text + '</span>',      /*这句指定顶级菜单鼠标停留时的翻转样式为: categoryhover*/
                '<span class=categoryclick>' + text + '</span>'       /*这句指定顶级菜单鼠标点击时的瞬间样式为: categoryclick*/
               ];
      }            /*注意：menu.css文件中定义的categoryclick样式，在5.0.0及以后的版本中用于顶级菜单点击后保持的样式*/

      function wrap_parent (text, icon, hovericon)
      {
        /*这个JS函数确定了二级菜单的内容和CSS样式, 同样以下的CSS样式分别在模板的menu.css文件中定义*/
        return [['<span class=a0>' + text + '</span>'].join(''),       /*这句指定二级菜单默认样式为: a0*/
                ['<span class=a1>' + text + '</span>'].join(''),         /*这句指定二级菜单翻转样式为: a1*/
                ['<span class=a0>' + text + '</span>'].join('')          /*这句指定二级菜单点击样式为: a0*/
               ];
      }

      function wrap_child (text, icon, hovericon)
      {
        /*这个JS函数确定了三级菜单的内容和CSS样式, 同样以下的CSS样式分别在模板的menu.css文件中定义*/
        return [['<span class=a0>' + text + '</span>'].join(''),        /*同上*/
                ['<span class=a1>' + text + '</span>'].join(''),          /*同上*/
                ['<span class=a0>' + text + '</span>'].join('')           /*同上*/
               ];
      }


      var MENU_POS =[
      // Level 0 block configuration
      {
        // Item's height in pixels
        'height'     : 34,     /*这个值为顶级菜单响应鼠标的高度，并不是实际的显示高度，显示高度由上面的categorydefault样式确实*/
                     /*响应鼠标的高度是指在多高的范围内响应鼠标的点击或停留时翻转，下面的响应宽度同理*/
        // Item's width in pixels
        'width'      : 100,   /*这个值为顶级菜单响应鼠标的宽度，并不是实际的显示宽度，显示宽度由后台管理中设置菜单时设置的菜单宽度确定*/

        // if Block Orientation is vertical
        'vertical'   : false,   /*如果希望顶级菜单为竖式(纵向)排列，需要改为：true */

        // Time Delay in milliseconds before subling block expands
        // after mouse pointer overs an item
        'expd_delay' : 0,

        // Style class names for the level
        'css':
        {
          // Block outing table class
          'table' : '',

          // Item outer tag style class for all item states or
          // classes for [<default state>, <hovered state>, <clicked state>]
          'outer' : '',

          // Item inner tag style class for all item states or
          // classes for [<default state>, <hovered state>, <clicked state>]
          'inner' : ''
        }
      },
      // Level 1 block configuration
      {
        'width'      : 120,       /*二级菜单的实际显示宽度(像素)*/
        'height'     : 28,         /*二级菜单的实际显示高度(像素)*/

        // Vertical Offset between adjacent levels in pixels
        'block_top'  : 34,        /*从二级菜单顶部到顶级菜单顶部的高度(像素)*/

        // Horizontal Offset between adjacent levels in pixels
        'block_left' : 0,        /*从二级菜单左侧到顶级菜单左侧的宽度(像素)*/

        // block behaviour if single frame:
        // 1 - shift to the edge, 2 - flip relatively to left upper corner
        'wise_pos'   : 1,
        'vertical'   : true,     /*true表明二级菜单为竖式(纵向)排列*/

        // transition effects for the block
        // [index on expand, duration on expand, index on collapse, duration on collapse]
        'transition' : [0, 0.3, 0, 0.3],

        // Time Delay in milliseconds before menu collapses after mouse
        // pointer lefts all items
        'hide_delay' : 300,
        'css' :
        {
          'table' : '',
          'outer' : '',
          'inner' : ''
        }
      },
      // Level 2 block configuration
      {
        'block_top'  : 0,           /*从三级菜单顶部到二级菜单顶部的高度(像素)*/
        'block_left' : 120          /*从三级菜单左侧到二级菜单左侧的宽度(像素)*/
      }
      //Subling level configurations are inherited from level 2
      ]

      var MENU_ITEMS = [";

CreateHoverMenu();

echo "];

      new menu (MENU_ITEMS, MENU_POS);

      //-->
      </script>";

?>
</PRE>


==模板的菜单[[CSS]]文件==
下面介绍模板菜单的CSS样式文件(menu.css)，这个文件供菜单文件categories.php调用CSS菜单样式：

<span style="color:coral;">提示：</span>
在weenCompany5.0.0及以后的版本中已实现菜单点击后保持它翻转时或其它的特定样式，即菜单选中后保持一个不同于其它菜单的样式。按以下代码制作的menu.css文件将适用于5.0.0及以后更新的版本。

<PRE>
.categorydefault                // 这个样式是顶级菜单的默认样式.
{
font-size: 12px;
color: #D8D8D8;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
white-space: nowrap;
line-height: 28px;
padding: 4px 8px 2px 8px;
display:block;
}


.categoryhover                // 这个样式是当鼠样经过时的菜单翻转样式.
{
font-size: 12px;
color: #fa9d20;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
white-space: nowrap;
line-height: 28px;
background:url(images/ln_navigation_4.jpg) no-repeat bottom; 
padding: 4px 8px 2px 8px;
display:block;
}

.categoryclick            // 这个样式是顶级菜单点击后保持的样式, 同上面的翻转样式相同, 仅在5.0.0及以后的版本中有效.
{
font-size: 12px;
color: #fa9d20;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
white-space: nowrap;
line-height: 28px;
background:url(images/ln_navigation_4.jpg) no-repeat bottom; 
padding: 4px 8px 2px 8px;
display:block;
}


.a0                           // 这个样式是二级和三级菜单的默认样式.
{
display:block;
color: #333333;
white-space: nowrap;
font-size: 12px;
padding: 0px 5px 0px 8px;
line-height: 28px;
background: #CCCCCC url(images/adv_navigation_6.gif) no-repeat top right; 
white-space: nowrap;
}

.a1                           // 这个样式是当鼠样经过二级或三级菜单时它们的翻转样式.
{
display:block;
color: #fa9d20;
white-space: nowrap;
font-size: 12px;
padding: 0px 5px 0px 8px;
line-height: 28px;
background: #2F3235 url(images/adv_navigation_7.gif) no-repeat top right; 
white-space: nowrap;
}

.outer                           // 这个样式不去管它，一般没有什么用，可以删除.
{ border: 1px solid #202224; border-top: 0px; background-color: #F5F2ED; }

</PRE>
==参考来源==
*http://www.weentech.com/weencompany/

{{WeenCompany}}

[[category:WeenCompany使用手册|M]]