qnx.css

很漂亮的javascript菜单

/* menu body */

.menu-body {
	background-color:	rgb(217,217,217);
	color:				Black;
	margin:				0;
	padding:			0;
	overflow:			hidden;
	border:				0;
	cursor:				default;
}

.menu-body .outer-border {
	border:			1px solid rgb(81,81,81);
}

.menu-body .inner-border {
	border:			0;
	padding:		1px;
	width:			100%;
	height:			100%;
}

/* end menu body */

/*****************************************************************************/

/* menu items */

.menu-body td {
	font:			menu;
	height:			19px;
}

.menu-body td.empty-icon-cell {
	padding:	0px 2px 0px 9px;
	border:		0;
}

.menu-body td.empty-icon-cell span {
	width:	16px;
}

.menu-body td.icon-cell {
	padding:	0px 2px 0px 9px;
	border:		0;
}


.menu-body td.icon-cell img {
	width:	16px;
	height:	16px;
	margin:	0;
	filter:	gray();
}

.menu-body .hover td.icon-cell img {
	filter:	none;
}

.menu-body .hover td.icon-cell,
.menu-body .hover td.empty-icon-cell,
.menu-body .disabled-hover td.icon-cell,
.menu-body .disabled-hover td.empty-icon-cell {
	background:	url("leftHighlight.gif") center left;
}


.menu-body td.label-cell {
	width:		100%;
	padding:	0px 5px 0px 5px;
}

.menu-body td.shortcut-cell {
	padding:	0px 5px 0px 5px;
}

.menu-body .hover td.label-cell,
.menu-body .hover td.shortcut-cell,
.menu-body .disabled-hover td.label-cell,
.menu-body .disabled-hover td.shortcut-cell {
	background:	url("middle.gif") 0 0 repeat-x;
}

.menu-body td.arrow-cell {
	width:			20px;
	padding:		0px 2px 0px 0px;
	font-family:	Webdings;
	font-size:		80%;
}

.menu-body .hover td.arrow-cell,
.menu-body .disabled-hover td.arrow-cell {
	background:	url("right.gif") center right;
}

/* end menu items */

/*****************************************************************************/

/* disabled items */

/* 
 * When the item becomes disbabled the innerHTML is enclosed by two spans
 * This is done so that the image will look disabled using filters
 */

.menu-body .disabled td.icon-cell img,
.menu-body .disabled-hover td.icon-cell img {
	filter:	alpha(opacity=40) gray();
}

.menu-body .disabled,
.menu-body .disabled-hover td {
	color:				rgb(150,150,150);
}

/* end disabled items */

/*****************************************************************************/

/* separator */

.menu-body td.separator {
	font-size:	0.001mm;
	padding:	4px 10px 4px 10px;
}

.menu-body .separator-line {
	overflow:		hidden;
	border-top:		1px solid ThreeDShadow;
	border-bottom:	1px solid ThreeDHighlight;
	height:			2px;
}

/* end separator */

/*****************************************************************************/

/* Scroll buttons */

.menu-body #scroll-up-item td,
.menu-body #scroll-down-item td {
	font-family:	Webdings !important;
	text-align:		center;
	padding:		10px;
}


.menu-body #scroll-up-item,
.menu-body #scroll-down-item {
	width:		100%;
}

.menu-body #scroll-up-item td,
.menu-body #scroll-down-item td {
	font-family:	Webdings;
	text-align:		center;
	padding:		0px 5px 0px 5px;
	font-size:		10px;
}

/* end scroll buttons */

/*****************************************************************************/

/* radio and check box items */

.menu-body .check-box,
.menu-body .radio-button {
	width:			16px;
	text-align:		center;
}

.menu-body .checked .check-box {
	font-family:	Marlett;
	font-size:	150%;
}

.menu-body .checked .radio-button {
	font-family:	Marlett;
	font-size:	66%;
}

/* radio and check box items */

/*****************************************************************************/

/* Menu Bar */

.menu-bar {
	background:		rgb(217,217,217);
	cursor:			default;
	padding:		1px;
}

.menu-bar .menu-button {
	height:			19px;
	color:			Black;
	font:			11px Verdana;
	padding:		0;
	border:			0;
	margin:			1px;
	display:		inline-block;
	white-space:	nowrap;
	cursor:			default;
}

.menu-bar .menu-button .left {
	display:	inline-block;
	width:		7px;
	height:		100%;
	background:	url("left.gif") center left;
}

.menu-bar .menu-button.hover .left {
	background-image:	url("leftHighlight.gif");
}

.menu-bar .menu-button.active .left {
	background-image:	url("leftActive.gif");
}

.menu-bar .menu-button .middle {
	padding:	2px 5px 1px 5px;
	display:	inline-block;
	background:	url("middle.gif") 0 0 repeat-x;
	/*	height:		17px; */
	/* IE bug box model workaround */
	height:		expression(document.compatMode == "CSS1Compat" ? "16px" : "19px");
	
}

.menu-bar .menu-button.active .middle {
	padding:	3px 4px 0px 6px;
	background-image:	url("middleActive.gif");
}

.menu-bar .menu-button .right {
	display:	inline-block;
	width:		7px;
	height:		100%;
	background:	url("right.gif") center right;
}

.menu-bar .menu-button.active .right {
	background-image:	url("rightActive.gif");
}

.menu-bar .menu-button.active {
	padding:		0;
	border:			0;
}

.menu-bar .menu-button.hover {
	padding:		0;
	border:			0;
}

/* End Menu Bar */