Create a SharePoint Dropdown Menu with Popup Link
The goal is to create a customize dropdown menu as the the "My Links" global link at the top of the page. I use the SharePoint SiteActions control to archieve this.
1. Customize the "SiteActions" SharePoint Control
This is an example of the standard "Site Action" dropdown menu.
<SharePoint:SiteActions runat="server" AccessKey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain" PrefixHtml="<div><div>" SuffixHtml="</div></div>" MenuNotVisibleHtml="&nbsp;" >
<CustomTemplate></SharePoint:SiteActions>
<SharePoint:FeatureMenuTemplate runat="server"</CustomTemplate>
FeatureScope="Site"Location="Microsoft.SharePoint.StandardMenu"GroupId="SiteActions"UseShortId="true">
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create"</SharePoint:FeatureMenuTemplate>
Text="<%$Resources:wss,viewlsts_pagetitle_create%>"
Description="<%$Resources:wss,siteactions_createdescription%>"ImageUrl="/_layouts/images/Actionscreate.gif"MenuGroupId="100"Sequence="100"UseShortId="true"ClientOnClickNavigateUrl="~site/_layouts/create.aspx"PermissionsString="ManageLists, ManageSubwebs"PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage"
Text="<%$Resources:wss,siteactions_editpage%>"<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings"
Description="<%$Resources:wss,siteactions_editpagedescription%>"ImageUrl="/_layouts/images/ActionsEditPage.gif"MenuGroupId="100"Sequence="200"ClientOnClickNavigateUrl="javascript:MSOLayout_ChangeLayoutMode(false);"/>
Text="<%$Resources:wss,settings_pagetitle%>"
Description="<%$Resources:wss,siteactions_sitesettingsdescription%>"ImageUrl="/_layouts/images/ActionsSettings.gif"MenuGroupId="100"Sequence="300"UseShortId="true"ClientOnClickNavigateUrl="~site/_layouts/settings.aspx"PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"PermissionMode="Any" />
Paste this code into the proper location in the default.master page openned SharePoint Designer. For example, for global links, the code is inserted between next code and "ms-globallinks" style is applied.
<td style="padding-left:1px;padding-right:3px;" class="ms-globallinks">|</td><td class="ms-globallinks">...
</td>
Change the "SiteActions" control id to a new id.
2. Customize the MenuItemTemplate
<SharePoint:MenuItemTemplate runat="server" id="LinkToGoogle"
Text="Google"To create a popup window for the link, replace "ClientOnClickNavigateUrl="http://www.google.com"" with
Description="Google Search"MenuGroupId="100"Sequence="100"UseShortId="true"ClientOnClickNavigateUrl="http://www.google.com"PermissionMode="All" />
ClientOnClickScript="javascript:window.open('http://www.google.com,'window','width=800,height=600,scrollbars=1,status=0');"
3. Customize the Site Action Menu Text
With all these changes, the Site Action dropdown menu will appear as global links at the top of the page, but the text is still "Site Actions". We need to replace it with "Quick Links". There is no easy way to do so, the Text property of "Site Actions" control is readonly. We need to hack this with PrefixHtml property.
There are html and javascript code generated by SharePoint between PrefixHtml and SuffixHtml. This code contains the "Site Action" title.
<SharePoint:SiteActions runat="server" AccessKey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain" PrefixHtml="<div><div>" SuffixHtml="</div></div>" MenuNotVisibleHtml="&nbsp;" >
The PrefixHtml is HTML encoded text "<div><div>", the SuffixHtml is "</div></div>", the site action html code is generated in between as
<div><div> site action html code </div></div>,
we are going to hide the system generated code and replace it with our own html code by making
PrefixHtml as "<div> customize html code </div><div style="display:none">"
This will end up as next in browser and will hide the SharePoint generated code
<div><div> customize html code </div><div style="display:none"> site action html code </div></div>
"Site action html code" is retrieved from the IE browser
Replace the "Site Actions" with "Quick Links" and append</div><div style="display:none"> and HTML Encode the above code and set PrefixHtml as
PrefixHtml="<div><div><span title="Open Menu"><div id="zz11_SiteActionsMenu_t" class="" onmouseover="MMU_PopMenuIfShowing(this);MMU_EcbTableMouseOverOut(this, true)" hoverActive="ms-siteactionsmenuhover" hoverInactive="" onclick=" MMU_Open(byid('zz9_CoreQuickLinks'), MMU_GetMenuFromClientId('zz11_SiteActionsMenu'),event,false, null, 0);" foa="MMU_GetMenuFromClientId('zz11_SiteActionsMenu')" oncontextmenu="this.click(); return false;" nowrap="nowrap"><a id="zz11_SiteActionsMenu" accesskey="/" href="#" onclick="javascript:return false;" style="cursor:hand;white-space:nowrap;" onfocus="MMU_EcbLinkOnFocusBlur(byid('zz9_CoreQuickLinks'), this, true);" onkeydown="MMU_EcbLinkOnKeyDown(byid('zz9_CoreQuickLinks'), MMU_GetMenuFromClientId('zz11_SiteActionsMenu'), event);" onclick=" MMU_Open(byid('zz9_CoreQuickLinks'), MMU_GetMenuFromClientId('zz11_SiteActionsMenu'),event,false, null, 0);" oncontextmenu="this.click(); return false;" menuTokenValues="MENUCLIENTID=zz11_SiteActionsMenu,TEMPLATECLIENTID=zz9_CoreQuickLinks" serverclientid="zz11_SiteActionsMenu">Quick Links<img src="/_layouts/images/blank.gif" border="0" alt="Use SHIFT+ENTER to open the menu (new window)."/></a><img align="absbottom" src="/_layouts/images/whitearrow.gif" alt="" /></div></span></div><div style="display:none">"
No comments:
Post a Comment