Customization with CSS
The SharePoint Navigation Web Part is fully customizable with CSS. See below all standard CSS and the HTML structure of the Web Part. Customization with CSS can be applied in the following ways:
  • Reuse/Overwrite CSS in the configuration page of the Web Part. This is recommended if you want to make some minor changes dedicated to one instance of a Web Part.
  • Disable default styles in the configuration page of the Web Part and create/link your own CSS files. This is recommended if you want to make global changes applied to all Web Part on a page or site collection.
Sample Flyout Menu Styles
.modulerixNavF > ul {
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.modulerixNavF ul {
	border: 0;
	padding: 15px;
	padding-left: 18px;
	background-color: #f0f2f4;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 3px 3px 5px rgba(0,0,0,.3);
	-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.3);
	box-shadow: 3px 3px 5px rgba(0,0,0,.3);
	background: #f0f2f4 !important;
	background: -moz-linear-gradient(top, #f0f2f4 0%, #e0e2e4 100%) !important; /* FF3.6+ */;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f2f4), color-stop(100%,#e0e2e4)) !important; /* Chrome,Safari4+ */;
	background: -webkit-linear-gradient(top, #f0f2f4 0%,#e0e2e4 100%) !important; /* Chrome10+,Safari5.1+ */;
	background: -o-linear-gradient(top, #f0f2f4 0%,#e0e2e4 100%) !important; /* Opera 11.10+ */;
	background: -ms-linear-gradient(top, #f0f2f4 0%,#e0e2e4 100%) !important; /* IE10+ */;
	background: linear-gradient(top, #f0f2f4 0%,#e0e2e4 100%) !important; /* W3C */
	border-left: solid 10px #4090d0;
}
.modulerixNavF li div {
	background-image: none;
}
.modulerixNavF li > ul {
	border-top: 0px !important;
	margin-left: 23px !important;
	top: -15px !important;
}
.modulerixNavF li > ul:after {
	content: "";
	left: -18px;
	top: 20px;
	position: absolute;
	z-index: 1001;
	border-top: 8px solid transparent;
	border-left: 0;
	border-right: 8px solid #4090d0;
	border-bottom: 8px solid transparent;
}
.modulerixNavF li:after {
	content: "";
	bottom: 0px;
	position: absolute;
	z-index: 1000;
	border-top: 1px solid #d0d0d0;
	border-bottom: 1px solid #fff;
	width: 100%;
}
.modulerixNavF li.mxnav-last:after {
	content: "";
	bottom: 0px;
	position: absolute;
	z-index: 1000;
	border-top: 0px solid #d0d0d0 !important;
	border-bottom: 0px solid #fff !important;
	width: 100%;
}
.modulerixNavF li > ins {
	border-left: dotted 0px #b0b0b0 !important;
}
.modulerixNavF a {
	text-shadow: 0px 1px 1px #fff;
	padding-bottom: 9px !important;
	padding-top: 3px !important;
	color: #3f5a7b !important;
	font-size: 13px;
	font-weight: normal;
	font-family: Arial;
	margin-right: 21px !important;
	height: auto !important;
}
.modulerixNavF .mxnav-open > ins {
	background-position: -75px -0px !important;
}
.modulerixNavF .mxnav-closed > ins {
	background-position: 1px -0px !important;
}
.modulerixNavF li > .mxnav-loading {
	background-position: 2px 7px !important;
}
HTML Structure
<div id="TVMaing_<Web Part ID>">
	<div class="modulerixNavTVLoading">
	</div>
	<div class="modulerixNavTVTB">
	</div>
	<div class="ms-treeviewouter modulerixNavTV">
		<ul class="mxnav-no-dots modulerixNodes">
			<li id="<Node-ID>" class="mxnav-open">
				<ins class="mxnav-icon">&nbsp;</ins>
				<div class="ms-navitem">
					<a class="ms-navitem" href="<Item URL>">
						<ins class="mxnav-icon <Icon-Class>" style="background-image: url(<Icon-URL>);">&nbsp;</ins><span>Title</span>
					</a>
				</div>
				<ul class="modulerixNodes">
					<li id="<Node-ID>" class="mxnav-leaf">
						<ins class="mxnav-icon">&nbsp;</ins>
						<div class="ms-navitem">
							<a class="ms-navitem" href="<Item URL>">
								<ins class="mxnav-icon <Icon-Class>" style="background-image: url(<Icon-URL>);">&nbsp;</ins><span>Title</span>
							</a>
						</div>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
Toolbar CSS
.modulerixNavTVTB { background-image: url(gradient3.png); background-position: 0px -80px; background-repeat: repeat-x; background-color:transparent; white-space: nowrap; position: relative; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; height: 40px; }
.modulerixNavTVTB.hidden { display: none; }
.modulerixNavTVTB-left { background-image: url(gradient3.png); background-position: 0px 0px; background-repeat:no-repeat; background-color:transparent; display: block; position: absolute; top: 0; left: -10px; width: 10px; height: 100%; }
.modulerixNavTVTB-right { background-image: url(gradient3.png); background-position: 0px -40px; background-repeat:no-repeat; background-color:transparent; display: block; position: absolute; top: 0; right: -10px; width: 10px; height: 100%; }
.modulerixNavTVTBBtn { display: inline-block; zoom: 1; *display: inline; margin: 0px; margin-top: 9px; margin-right: 0px; padding: 2px; vertical-align: top; }
.modulerixNavTVTBBtn div { height: 16px; width: 16px; background-image: url("formatmap16x16.png"); background-repeat:no-repeat; background-color:transparent; }
.modulerixNavTVTBBtn-updatepanel div { background-image: url(/_layouts/images/modulerixNav/refresh.png); background-repeat:no-repeat; background-color:transparent; }
.modulerixNavTVTBBtn-favorites div { background-image: url(/_layouts/images/modulerixNav/star.png); background-repeat:no-repeat; background-color:transparent; }
.modulerixNavTVTBBtn-clearsort div { background-image: url("clearsort.png"); background-repeat:no-repeat; background-color:transparent; }
.modulerixNavTVTBBtn-filter div { background-image: url("ps16x16.png"); background-repeat:no-repeat; background-color:transparent; background-position: -32px -35px; background-position: -84px -16px; }
.modulerixNavTVTBBtn-clearfilter div { background-image: url("ps16x16.png"); background-repeat:no-repeat; background-color:transparent; background-position: -48px -48px; }
.modulerixNavTVTBBtn-save div { background-position: 0px -112px; }
.modulerixNavTVTBBtn-settings div { background-position: -160px -112px; }
.modulerixNavTVTBBtnChecked { background-color: #f0f0f0; border: solid 1px #d0d0d0; }
.modulerixNavTVTBBtnSeparator { padding-top: 1px; cursor: default; }
.modulerixNavTVTBBtnSeparator div { border-right: solid 1px #dadada; height: 20px; width: 2px; margin-right: 2px; background-image: none; }
.modulerixNavTVLoading { display: none; }
.modulerixNavTVLoadingPanel { opacity: .6; filter: alpha(opacity=60); padding: 0px; margin: 0px; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; z-index: 1000; background-color: #fff; }
.modulerixNavTVLoadingImage { text-align: center; padding: 0px; margin: 0px; top: 20px; left: 0px; width: 100%; position: absolute; z-index: 1001; }
#s4-leftpanel .ui-resizable-handle { background-image: url("resizev.png"); background-repeat: no-repeat; background-position: left center; width: 7px; right: -7px; z-index: 3; }
#s4-leftpanel .ui-resizable-handle:hover, #s4-leftpanel .ui-resizable-handle.drag { background-color: #f2f2f2; }
Tree View CSS
.modulerixNavTV { min-height: 100px; }

.modulerixNavTV .modulerixNodes, .modulerixNavTV .modulerixNodes > li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
.modulerixNavTV .modulerixNodes > li { margin-left:25px; white-space:nowrap; }
.modulerixNavTV .modulerixNodes > li > div { display:inline; }
.modulerixNavTV li img { border:0; }
.modulerixNavTV > .modulerixNodes > li { margin-left:0px; }
.modulerixNavTV ins { display:inline-block; zoom: 1; *display: inline; vertical-align: top; text-decoration:none; width:16px; height:23px; }
.modulerixNavTV .modulerixNodes > li > div > a { display:inline-block; zoom: 1; *display: inline; white-space:nowrap; margin-left: 0px !important; padding-top: 3px !important; padding-bottom: 3px !important; }
.modulerixNavTV .modulerixNodes > li > div > a:focus { outline: none; }
.modulerixNavTV .modulerixNodes > li > div > a:hover { text-decoration: none !important; }
.modulerixNavTV .modulerixNodes > li > div > a > ins { height:16px; width:16px; cursor: pointer; }
.modulerixNavTV .modulerixNodes > li > div > a > .mxnav-icon { margin-right: 8px; }
.modulerixNavTV .modulerixNodes > li > div > a > span { display:inline-block; zoom: 1; *display: inline; vertical-align:top; padding-top: 1px; cursor: pointer; }
.modulerixNavTV li.mxnav-open > ul { display:block; }
.modulerixNavTV li.mxnav-closed > ul { display:none; }

.modulerixNavTV .modulerixNodes > li, .modulerixNavTV ins { background-image:url("NodeIcons1.png"); background-repeat:no-repeat; background-color:transparent; }
.modulerixNavTV .modulerixNodes > li { background-position:-190px 0px; background-repeat:repeat-y; }
.modulerixNavTV li.mxnav-last { background:transparent; }
.modulerixNavTV .mxnav-open > ins { background-position:-152px 0px; cursor: pointer; }
.modulerixNavTV .mxnav-closed > ins { background-position:-114px 0px; cursor: pointer; }
.modulerixNavTV .mxnav-leaf > ins { background-position:-76px 0px; }

.modulerixNavTV .mxnav-hovered { /*background:#e7f4f9 !important;*/ }
.modulerixNavTV .mxnav-clicked { /*background:#beebff;*/ }
.modulerixNavTV a .mxnav-icon {  }
.modulerixNavTV div .mxnav-loading { background: url("loader12.gif") top left no-repeat !important; }
.modulerixNavTV li.mxnav-clicked > div .mxnav-loading { background: url("loader12.gif") top left no-repeat !important; }
.modulerixNavTV a .mxnav-icon.noicon { display: none; }

.modulerixNavTV .mxnav.mxnav-focused { }

.modulerixNavTV .mxnav-no-dots.modulerixNodes > li, .mxnav-no-dots .modulerixNodes > li,
.modulerixNavTV .mxnav-no-dots .mxnav-leaf > ins { background:transparent; }
.modulerixNavTV .mxnav-no-dots .mxnav-open > ins { background-position:-38px 0px; cursor: pointer; }
.modulerixNavTV .mxnav-no-dots .mxnav-closed > ins { background-position:0 0px; cursor: pointer; }

.modulerixNavTV .mxnav-no-icons a .mxnav-icon { display:none; }

.modulerixNavTV .mxnav-search { font-style:italic; }

.modulerixNavTV .mxnav-checkbox { margin-right: 4px; }
.modulerixNavTV .mxnav-no-icons .mxnav-checkbox { display:inline-block; }
.modulerixNavTV .mxnav-no-checkboxes .mxnav-checkbox { display:none !important; }
.modulerixNavTV .mxnav-checked > div > a > .mxnav-checkbox { background-position:-78px -43px; }
.modulerixNavTV .mxnav-unchecked > div > a > .mxnav-checkbox { background-position:-2px -43px; }
.modulerixNavTV .mxnav-undetermined > div > a > .mxnav-checkbox { background-position:-40px -43px; }
.modulerixNavTV .mxnav-checked > div > a > .mxnav-checkbox:hover { background-position:-78px -82px; }
.modulerixNavTV .mxnav-unchecked > div > a > .mxnav-checkbox:hover { background-position:-2px -82px; }
.modulerixNavTV .mxnav-undetermined > div > a > .mxnav-checkbox:hover { background-position:-40px -82px; }
Dropdown Menu CSS
.modulerixNavM { position: absolute; z-index: 4; margin: 0; margin-bottom: 0px; min-height: 0px; }
.modulerixNavM .modulerixIntegrated { position: static; float: left; margin: 0; margin-bottom: 0px; min-height: 0px; }

.modulerixNavM .modulerixNodes, .modulerixNavM .modulerixNodes > li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
.modulerixNavM .modulerixNodes { position: absolute; display: none; z-index: 4; left: 100%; top: 0px; border-right: solid 1px #ffffff; margin-left: 1px; }
.modulerixNavM .modulerixNodes > li { position: relative; }

.modulerixNavM .modulerixNodes > li > div { width: 100%; display:block; zoom: 1; *display: inline; background-image: url(gradient3.png); background-position: 0px -80px; background-repeat: repeat-x; }
.modulerixNavM li img { border:0; }
.modulerixNavM > .modulerixNodes { position: relative; display: block; white-space:nowrap; left: auto; top: auto; border: 0; margin-left: 0px; }
.modulerixNavM > .modulerixNodes > li { float: left; display: inline-block; zoom: 1; *display: inline; }
.modulerixNavM > .modulerixNodes > li > .modulerixNodes { left: 0px; top: 100%; border-top: solid 1px #ffffff; margin-left: 0px; }
.modulerixNavM ins { display:inline-block; zoom: 1; *display: inline; vertical-align: top; text-decoration:none; width:16px; height:23px; }
.modulerixNavM li > ins { position: absolute; right: 0px; top: 0px; display:block; zoom: 1; *display: inline; vertical-align: top; text-decoration:none; width:21px; height: 100%; border-left: solid 1px #ffffff !important; }
.modulerixNavM .modulerixNodes > li > div > a { display:block !important; white-space:nowrap; margin-left: 0px !important; margin-right: 22px !important; overflow: visible; padding-top: 3px !important; padding-bottom: 3px !important; height: 23px; border: 0px !important; }
.modulerixNavM > .modulerixNodes > li > div > a { overflow: hidden; }

.modulerixNavM .modulerixNodes > li > div > a:focus { outline: none; }
.modulerixNavM .modulerixNodes > li > div > a:hover { text-decoration: none !important; }
.modulerixNavM .modulerixNodes > li > div > a > ins { height:16px; width:16px; margin-top: 2px; margin-left: 2px; cursor: pointer; }
.modulerixNavM .modulerixNodes > li > div > a > .mxnav-icon { margin-right: 4px; margin-left: 4px; margin-top: 3px; }
.modulerixNavM .modulerixNodes > li > div > a > span { padding-left: 4px; padding-right: 3px; display:inline-block; zoom: 1; *display: inline; vertical-align:top; padding-top: 4px; cursor: pointer; }
.modulerixNavM li.mxnav-open > ul { display:none; }
.modulerixNavM li.mxnav-closed > ul { display:none; }

.modulerixNavM ins { background-image:url("MenuIcons1.png"); background-repeat:no-repeat; background-color:transparent; }
.modulerixNavM .mxnav-open > ins { background-position:-75px 1px; cursor: pointer; }
.modulerixNavM .mxnav-closed > ins { background-position:1px 1px; cursor: pointer; }
.modulerixNavM .mxnav-leaf > ins { background-position:-150px 0px; cursor: default; }
.modulerixNavM > .modulerixNodes > li.mxnav-open > ins { background-position:-113px 1px; cursor: pointer; }
.modulerixNavM > .modulerixNodes > li.mxnav-closed > ins { background-position:-37px 1px; cursor: pointer; }

.modulerixNavM .mxnav-hovered { /*background:#e7f4f9;*/ }
.modulerixNavM .mxnav-clicked { /*background:#beebff;*/ }
.modulerixNavM a .mxnav-icon {  }
.modulerixNavM li > .mxnav-loading { background: url("loader12.gif") top left no-repeat !important; background-position: 2px 7px !important; }
.modulerixNavM li.mxnav-clicked > .mxnav-loading { background: url("loader12.gif") top left no-repeat !important; background-position: 2px 7px !important; }
.modulerixNavM a .mxnav-icon.noicon { display: none; }

.modulerixNavM .mxnav.mxnav-focused { }
.modulerixNavM .mxnav-no-icons a .mxnav-icon { display:none; }
.modulerixNavM .mxnav-search { font-style:italic; }

.modulerixNavM .mxnav-checkbox { margin-right: 4px; }
.modulerixNavM .mxnav-no-icons .mxnav-checkbox { display:inline-block; }
.modulerixNavM .mxnav-no-checkboxes .mxnav-checkbox { display:none !important; }
.modulerixNavM .mxnav-checked > div > a > .mxnav-checkbox { background-position:-78px -43px; }
.modulerixNavM .mxnav-unchecked > div > a > .mxnav-checkbox { background-position:-2px -43px; }
.modulerixNavM .mxnav-undetermined > div > a > .mxnav-checkbox { background-position:-40px -43px; }
.modulerixNavM .mxnav-checked > div > a > .mxnav-checkbox:hover { background-position:-78px -82px; }
.modulerixNavM .mxnav-unchecked > div > a > .mxnav-checkbox:hover { background-position:-2px -82px; }
.modulerixNavM .mxnav-undetermined > div > a > .mxnav-checkbox:hover { background-position:-40px -82px; }
Flyout Menu CSS
.modulerixNavF { position: absolute; z-index: 4; margin: 0; margin-bottom: 20px; min-height: 0px; }
.modulerixNavF .modulerixIntegrated { position: static; float: left; margin: 0; margin-bottom: 20px; min-height: 0px; }

.modulerixNavF .modulerixNodes, .modulerixNavF .modulerixNodes > li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
.modulerixNavF .modulerixNodes { position: absolute; display: none; z-index: 4; left: 100%; top: 0px; border-right: solid 1px #ffffff; margin-left: 1px; }
.modulerixNavF .modulerixNodes > li { position: relative; }

.modulerixNavF .modulerixNodes > li > div { width: 100%; display:block; zoom: 1; *display: inline; background-image: url(gradient3.png); background-position: 0px -80px; background-repeat: repeat-x; }
.modulerixNavF li img { border:0; }
.modulerixNavF > .modulerixNodes { position: relative; display: block; white-space:nowrap; left: auto; top: auto; border: 0; margin-left: 0px; }
.modulerixNavF > .modulerixNodes > li { display: block; }
.modulerixNavF > .modulerixNodes > li > .modulerixNodes { left: 100%; top: 0px; border-top: solid 1px #ffffff; margin-left: 0px; }
.modulerixNavF ins { display:inline-block; zoom: 1; *display: inline; vertical-align: top; text-decoration:none; width:16px; height:23px; }
.modulerixNavF li > ins { position: absolute; right: 0px; top: 0px; display:block; zoom: 1; *display: inline; vertical-align: top; text-decoration:none; width:21px; height: 100%; border-left: solid 1px #ffffff !important; }
.modulerixNavF .modulerixNodes > li > div > a { display:block !important; white-space:nowrap; margin-left: 0px !important; margin-right: 22px !important; overflow: visible; padding-top: 3px !important; padding-bottom: 3px !important; height: 23px; border: 0px !important; }
.modulerixNavF > .modulerixNodes > li > div > a { overflow: hidden; }

.modulerixNavF .modulerixNodes > li > div > a:focus { outline: none; }
.modulerixNavF .modulerixNodes > li > div > a:hover { text-decoration: none !important; }
.modulerixNavF .modulerixNodes > li > div > a > ins { height:16px; width:16px; margin-top: 2px; margin-left: 2px; cursor: pointer; }
.modulerixNavF .modulerixNodes > li > div > a > .mxnav-icon { margin-right: 4px; margin-left: 4px; margin-top: 3px; }
.modulerixNavF .modulerixNodes > li > div > a > span { padding-left: 4px; padding-right: 3px; display:inline-block; zoom: 1; *display: inline; vertical-align:top; padding-top: 4px; cursor: pointer; }
.modulerixNavF li.mxnav-open > ul { display:none; }
.modulerixNavF li.mxnav-closed > ul { display:none; }

.modulerixNavF ins { background-image:url("MenuIcons1.png"); background-repeat:no-repeat; background-color:transparent; }
.modulerixNavF .mxnav-open > ins { background-position:-75px 1px; cursor: pointer; }
.modulerixNavF .mxnav-closed > ins { background-position:1px 1px; cursor: pointer; }
.modulerixNavF .mxnav-leaf > ins { background-position:-150px 0px; cursor: default; }
.modulerixNavF > .modulerixNodes > li.mxnav-open > ins { background-position:-75px 1px; cursor: pointer; }
.modulerixNavF > .modulerixNodes > li.mxnav-closed > ins { background-position:1px 1px; cursor: pointer; }

.modulerixNavF .mxnav-hovered { /*background:#e7f4f9;*/ }
.modulerixNavF .mxnav-clicked { /*background:#beebff;*/ }
.modulerixNavF a .mxnav-icon {  }
.modulerixNavF li > .mxnav-loading { background: url("loader12.gif") top left no-repeat !important; background-position: 2px 7px !important; }
.modulerixNavF li.mxnav-clicked > .mxnav-loading { background: url("loader12.gif") top left no-repeat !important; background-position: 2px 7px !important; }
.modulerixNavF a .mxnav-icon.noicon { display: none; }

.modulerixNavF .mxnav.mxnav-focused { }
.modulerixNavF .mxnav-no-icons a .mxnav-icon { display:none; }
.modulerixNavF .mxnav-search { font-style:italic; }

.modulerixNavF .mxnav-checkbox { margin-right: 4px; }
.modulerixNavF .mxnav-no-icons .mxnav-checkbox { display:inline-block; }
.modulerixNavF .mxnav-no-checkboxes .mxnav-checkbox { display:none !important; }
.modulerixNavF .mxnav-checked > div > a > .mxnav-checkbox { background-position:-78px -43px; }
.modulerixNavF .mxnav-unchecked > div > a > .mxnav-checkbox { background-position:-2px -43px; }
.modulerixNavF .mxnav-undetermined > div > a > .mxnav-checkbox { background-position:-40px -43px; }
.modulerixNavF .mxnav-checked > div > a > .mxnav-checkbox:hover { background-position:-78px -82px; }
.modulerixNavF .mxnav-unchecked > div > a > .mxnav-checkbox:hover { background-position:-2px -82px; }
.modulerixNavF .mxnav-undetermined > div > a > .mxnav-checkbox:hover { background-position:-40px -82px; }
Write a Comment
comments powered by Disqus