DNN菜单样式研究

最新推荐文章于 2019-07-12 09:54:00 发布

转载最新推荐文章于 2019-07-12 09:54:00 发布 · 140 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/Truly/archive/2006/07/11/448251.html

DNN使用了开源控件solpartMenu，可以从下面网址下载
http://www.solpart.com/techcorner/SolpartMenuHistory.aspx

制作皮肤时，菜单的处理还是比较头痛的，因为它的属性和样式非常之多。
鉴于中文资料比较少，我把自己搜集到的东西稍加整理一下，希望以后各位可以用到：

属性名	Own Settings	Default Settings
RightArrow	ArrwRght.gif	breadcrumb.gif
DownArrow	ArrwDown.gif	menu_down.gif
rootbreadcrumbarrow	RtMnItBrArrw.gif	No default value
submenubreadcrumbarrow	SuMnItBrArrw.gif	No default value
leftseparator	<![CDATA[<img title="" alt="" src="RtMnItLeSeNo.gif" />]]>
leftseparatoractive	<![CDATA[<img title="" alt="" src="RtMnItLeSeAc.gif" />]]>
leftseparatorbreadcrumb	<![CDATA[<img title="" alt="" src="RtMnItLeSeBr.gif" />]]>
rightseparator	<![CDATA[<img title="" alt="" src="RtMnItRiSeNo.gif" />]]>
rightseparatoractive	<![CDATA[<img title="" alt="" src="RtMnItRiSeAc.gif" />]]>
rightseparatorbreadcrumb	<![CDATA[<img title="" alt="" src="RtMnItRiSeBr.gif" />]]>
rootmenuitemlefthtml	<![CDATA[<img title="" alt="" class="RtMnItLeHtml" src="/--path--/RtMnItLeHtml.gif">]]>
rootmenuitemrighthtml	<![CDATA[<img title="" alt="" class="RtMnItRiHtml" src="/--path--/RtMnItRiHtml.gif">]]>
separator	<![CDATA[<img title="" alt="" src="RtMnItMiSprt.gif" />]]>
submenuitemlefthtml	<![CDATA[<img title="" alt="" src="/--path--/SuMnItLeHtml.gif">]]>
submenuitemrighthtml	<![CDATA[<img title="" alt="" src="/--path--//SuMnItRiHtml.gif">]]>

separatecss	true	true
userootbreadcrumbarrow	true	true
useskinpatharrowimages	true	false
usesubmenubreadcrumbarrow	true	false
usearrows	true	true

menubarcssclass	MnBar	MainMenu_MenuBar
menucontainercssclass	MnCntr	MainMenu_MenuContainer
menubreakcssclass	MnBreak	MainMenu_MenuBreak
menuiconcssclass	MnIcon	MainMenu_MenuIcon
menuitemcssclass	RtAndSuMnItNo	MainMenu_MenuItem
menuitemselcssclass	RtAndSuMnItHo	MainMenu_MenuItemSel
rootmenuitemcssclass	RtMnItNo	No default css class
rootmenuitemselectedcssclass	RtMnItHo	No default css class
rootmenuitemactivecssclass	RtMnItAc	No default css class
rootmenuitembreadcrumbcssclass	RtMnItBr	No default css class
submenucssclass	SuMnCntr	MainMenuSubMenu
submenuitemactivecssclass	SuMnItAc	No default css class
submenuitemselectedcssclass	SuMnItHo	No default css class
submenuitembreadcrumbcssclass	SuMnItBr	No default css class
menurootarrowcssclass	RtMnItArrw	MainMenu_MenuRootArrow
menuarrowcssclass	SuMnItArrw	MainMenu_MenuArrow

leftseparatorcssclass	RtMnItLeSeNo	No default css class
leftseparatoractivecssclass	RtMnItLeSeAc	No default css class
leftseparatorbreadcrumbcssclass	RtMnItLeSeBr	No default css class
separatorcssclass	RtMnItMiSprt	No default css class
rightseparatorcssclass	RtMnItRiSeNo	No default css class
rightseparatoractivecssclass	RtMnItRiSeAc	No default css class
rightseparatorbreadcrumbcssclass	RtMnItRiSeBr	No default css class

上面属性的用法可以见下面

<dnn:menu id=dnnMENU runat="server" userootbreadcrumbarrow="false" usearrows="true" submenucssclass="submenu" submenuitemselectedcssclass="submenuitemselected" rootmenuitemcssclass="rootmenuitem" rootmenuitemactivecssclass="rootmenuitemactive" rootmenuitemselectedcssclass="rootmenuitemselected" separator="</span><img src='http://www.spearheadstaffing.com/sites/spacer.gif' width=1px height=1px><span>"></dnn:menu>

css对应styles：
.rootmenuitemactive，.rootmenuitem等
注意在firefox环境中这些还不够，你要注意增加
.rootmenuitemactive TD
.submenu TD等样式，否则显示效果会有一些差别
上面的表格有空我做些翻译。

转载于:https://www.cnblogs.com/Truly/archive/2006/07/11/448251.html