SharePoint自定义菜单
《MOSS 2007 自定义界面》发布之后有人跟我说MOSS 自带菜单太难用了,你是怎么做到现在的效果的。
所以我整理里下代码发这这个文章
以前我也很讨厌 moss自带菜单的样子,真的秉承微软的一贯作风丑的可以了(MSDN网站。。。)
以前观察了下 moss 控件大多以 "<SharePoint:*>"为开头实际上属性用法跟.net控件差不都,
这也就是说,我可以用.net控件属性设置直接拷贝进MOSS中使用。只要控件标记前面替换成“SharePoint”就可以了。
为了方便设计我直接用vs2010建了一个空项目,再空页上插入一个“<asp:Menu ID="Menu1" runat="server">”控件进行样式设计
同样菜单所需样式文件及图片都可以在新建的项目中建立文件夹保存,以便于引用。
说实话微软的菜单控件使用还是比较简单的只需绑定就可以了,但想让它好看起来就困难了,我也是调整很多遍才能调出来。
以下是调整后代码部分:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-----------------菜单开始----------------->
2 <table border="0" cellpadding="0" cellspacing="0" width="100%">
3 <tr align="left">
4 <td align="right"><img src="http://www.cnblogs.com/JinNengIMG/newmenu_left.gif" border="0" /></td>
5 <td style="background-image: url(http://www.cnblogs.com/JinNengIMG/newmenu_bj.png); background-repeat: repeat-x;
6 height: 45px;"><asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
7 <SharePoint:AspMenu
8 ID="TopNavigationMenu"
9 Runat="server"
10 DataSourceID="topSiteMap"
11 EnableViewState="false"
12 AccessKey="<%$Resources:wss,navigation_accesskey%>"
13 Orientation="Horizontal"
14 StaticDisplayLevels="2"
15 MaximumDynamicDisplayLevels="1"
16 DynamicHorizontalOffset="0"
17 StaticPopoutImageUrl="/_layouts/images/menudark.gif"
18 StaticPopoutImageTextFormatString=""
19 DynamicHoverStyle-BackColor="#CBE3F0"
20 SkipLinkText=""
21 StaticSubMenuIndent="0"
22 CssClass="ms-topNavContainer"
23 Font-Names="宋体"
24 StaticTopSeparatorImageUrl="http://www.cnblogs.com/JinNengIMG/newitemImg_zi.png"
25 StaticEnableDefaultPopOutImage="False"
26 DynamicVerticalOffset="10"
27 Height="34px">
28 <StaticMenuStyle/>
29
30 <StaticMenuItemStyle CssClass="menu_item" VerticalPadding="0px" Width="" />
31 <StaticSelectedStyle CssClass="menu_item_xz" />
32 <StaticMenuItemStyle Font-Bold="true"
33 Font-Size="12px" BorderColor="#006699" Height="42px" ItemSpacing="0px"
34 VerticalPadding="0px" />
35 <StaticHoverStyle CssClass="menu_item_xz" Font-Italic="False" Font-Overline="False" Font-Underline="true" />
36 <DynamicMenuItemStyle ItemSpacing="3px" />
37 <DynamicMenuStyle BackColor="#efebef" Font-Size="12px" />
38 <StaticSelectedStyle BorderColor="#006699" Font-Underline="False" />
39 </SharePoint:AspMenu>
40 <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource">
41 <Template_Controls>
42 <asp:SiteMapDataSource
43 ShowStartingNode="False"
44 SiteMapProvider="SPNavigationProvider"
45 id="topSiteMap"
46 runat="server"
47 StartingNodeUrl="sid:1002"/>
48 </Template_Controls>
49 </SharePoint:DelegateControl>
50 </asp:ContentPlaceHolder>
51 </td>
52 <td>
53 <img alt="" src="http://www.cnblogs.com/JinNengIMG/newmenu_right.gif" /></td>
54 </tr>
55 </table>
56 <!-----------------菜单结束----------------->
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 /*--------菜单项通用样式----------*/
2 .menu_item
3 {
4 text-align: center;
5 font-weight:bold;
6 font-size:14px;
7 width:110px;
8 }
9 .menu_item a{
10 display:block;
11 padding:14px;
12 border:1px solid #000000;text-decoration: none;
13 }
14
15 .menu_item a:link {color:#474747;height:42px;
16 text-align:center;
17 }/* 未被访问的链接 灰色 */
18 .menu_item a:visited {color: #474747;height:42px;
19 text-align:center;
20 }/* 已被访问过的链接 灰色 */
21 .menu_item a:hover {color: #474747;
22 background-image:url('http://www.cnblogs.com/JinNengIMG/newmenu_xuanting_bj.png');
23
24 background-repeat:no-repeat;
25 background-position: bottom;
26 text-decoration: none;
27 text-align:center;
28
29 }/* 鼠标悬浮在上的链接 灰色 */
30 .menu_item a:active {color: #474747;height:42px;
31 text-align:center;
32 }/* 鼠标点中激活链接 灰色 */
33 .menu_item_xz{
34 background-image:url('http://www.cnblogs.com/JinNengIMG/newmenu_xuanting_bj.png');
35 background-repeat:no-repeat;
36 background-position: bottom;
37 text-decoration: none;
38 text-align:center;
39
40 }
最终效果
最后祝大家能做出属于自己的好看菜单。还有如果有人能提供MOSS菜单数据的使用方法能提供下感激不尽(jquery 做的菜单应该更漂亮我考虑使用但对于菜单数据的获取暂时没有好的方法)
发布后发现一个很恶心的问题以上样式和代码中“'http://www.cnblogs.com/JinNengIMG/newmenu_xuanting_bj.png'”这类引用需要大家使用时手动改成“。。/。。/JinNengIMG/newmenu_xuanting_bj.png'”