闻名企业网站系统/菜单文件与菜单CSS文件
来自站长百科
模板的菜单文件[ ]
下面介绍模板的菜单文件(categories.php)中每条语句的含义和用法：
提示： 按以下内容制作的菜单文件将可适用于以后的weenCompany5.0.0版，未提示的地方一般无需修改，另在修改时注意JS标点符号。
<?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>";
?>
模板的菜单CSS文件[ ]
下面介绍模板菜单的CSS样式文件(menu.css)，这个文件供菜单文件categories.php调用CSS菜单样式：
提示： 在weenCompany5.0.0及以后的版本中已实现菜单点击后保持它翻转时或其它的特定样式，即菜单选中后保持一个不同于其它菜单的样式。按以下代码制作的menu.css文件将适用于5.0.0及以后更新的版本。
.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; }
参考来源[ ]
闻名企业网站系统手册导航 | ||||||||
|---|---|---|---|---|---|---|---|---|
|