Spry

CSS code for the Menu Bar widget

The SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files contain the rules that style the Menu Bar widget. You can edit these rules to style the menu bar’s look and feel. The names of the rules in the CSS file correspond directly to the names of the classes specified in the Menu Bar widget’s HTML code.

Note: You can replace style-related class names in the SpryMenuBarHorizontal.css and SpryMenuBarVertical.css files and HTML code with class names of your own. Doing so does not affect the functionality of the widget, as CSS code is not required for widget functionality.

The default functionality for the behaviors classes at the end of the style sheet are defined in the SpryMenuBar.js JavaScript library file. You can change the default functionality by adding properties and values to the behavior rules in the style sheet.

The following is the CSS code for the SpryMenuBarHorizontal.css file:

/*Menu Bar styling classes*/
ul.MenuBarHorizontal{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
ul.MenuBarActive{
	z-index: 1000;
}
ul.MenuBarHorizontal li{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 8em;
	float: left;
}
ul.MenuBarHorizontal ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
	left: auto;
}
ul.MenuBarHorizontal ul li{
	width: 8.2em;
}
ul.MenuBarHorizontal ul ul{
	position: absolute;
	margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
	left: auto;
	top: 0;
}
ul.MenuBarHorizontal ul{
	border: 1px solid #CCC;
}
ul.MenuBarHorizontal a{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
	background-color: #33C;
	color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
	background-color: #33C;
	color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe{
	position: absolute;
	z-index: 1010;
}
@media screen, projection{
	ul.MenuBarHorizontal li.MenuBarItemIE{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}

The SpryMenuBar.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file.