Thursday, October 11, 2007

Hover effect : WSS 3.0 menu customization

Dont understand why its so difficult customizing menus in Sharepoint; for basic things like hover effect or dynamic display. Well 3.0 dont make it any easier either. But well its better; a lot better; simple tweaks and you can give it a dynamic effect.
So here's what you need to do to get hover in left side menu:
1. Change the left side menu to Quick Launch. To do this; Site Actions --> Site Settings --> Tree View --> Check Enable Quick Launch and uncheck Enable Tree View.
2. Click on Quick Launch and generate a hierarchy.
3. Open the page in Microsoft Office Sharepoint Designer. Make sure you open a server copy.
4. Click on the left menu pulldown and look for this section of code
------------------------------------------------------------------------------------------
&lf;Sharepoint:SPNavigationManager id="QuickLaunchNavigationManager" runat="server" QuickLaunchControlId="QuickLaunchMenu" ContainedControl="QuickLaunch" EnableViewState="false"&rf; &lf;div&rf; &lf;SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource"&rf; &lf;Template_Controls&rf; &lf;asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" ShowStartingNode="False" id="QuickLaunchSiteMap" StartingNodeUrl="sid:1025" runat="server" /&rf; &lf;/Template_Controls&rf; &lf;/SharePoint:DelegateControl&rf; &lf;SharePoint:AspMenu id="QuickLaunchMenu" DataSourceId="QuickLaunchSiteMap" runat="server" Orientation="Vertical" StaticDisplayLevels="1" ItemWrap="true" MaximumDynamicDisplayLevels="1" StaticSubMenuIndent="0" SkipLinkText="" &rf; &lf;LevelMenuItemStyles&rf; &lf;asp:MenuItemStyle CssClass="ms-navheader"/&rf; &lf;asp:MenuItemStyle CssClass="ms-navitem"/&rf; &lf;/LevelMenuItemStyles&rf; &lf;LevelSubMenuStyles&rf; &lf;asp:SubMenuStyle CssClass="ms-navSubMenu1"/&rf; &lf;asp:SubMenuStyle CssClass="ms-navSubMenu2"/&rf; &lf;/LevelSubMenuStyles&rf; &lf;LevelSelectedStyles&rf; &lf;asp:MenuItemStyle CssClass="ms-selectednavheader"/&rf; &lf;asp:MenuItemStyle CssClass="ms-selectednav"/&rf; &lf;/LevelSelectedStyles&rf; &lf;/SharePoint:AspMenu&rf; &lf;/div&rf; &lf;/Sharepoint:SPNavigationManager&rf;---------------------------------------------
Change
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="1"

And you get a crappy left menu with hover. Now customization is upto you. You can either change the styles (CSS) on the right side corner of the designer tool or right click and again click "Go to Code" this would open core.css. Any customization done on the css would reflect on the UI of your page.


No comments: