Customize SharePoint top navigation bar by working with Master page, CSS and JQuery
Worked on
SharePoint 2010 top navigation drop-down menu for a project lately. It was quite
straightforward to use SharePoint designer to edit master page.
However, don't overwrite the original v4.Master page without making a copy for roll-back. Enabling the drop-down menu turned out to be easier than I thought. All you need to do is to update SharePoint:AspMenu - ID =
"TopNavigationMenuV4" ' s attribute "MaximumDynamicDisplayLevels" from "1"
to "2". Done. You can then update CSS combined with JQuery to apply some visual
effects and themes. Make
sure to register your new CSS file in the master page and provide a correct order.
Usually you would order your custom CSS file running after the coreV4.CSS file.
The
class Dynamic is used for UL and LI to apply drop-down menu themes.
One thing got
me is that after I completed the master page, I didn't realize that I
needed to publish it as a major version at least once to the master page document
library for approval. Once it is approved, this new
master page then becomes available for site collection, sites
and sub-sites.
It's nice to
make a face lifting for your entire site by re-using the traditional .net master page technology. :)
when use JQuery to attach event, LIVE() works better than BIND() when combined with AJAX async post back. Because document.ready() event is fired when you DOM is ready. It does not fire on ajax async postback. If use BIND(), the bound event won't fire after the async post-back, however LIVE() would still fire the bound event.
ReplyDeleteA good blog to explain some other workarounds - http://jquerybyexample.blogspot.com/2010/07/jquery-does-not-work-properly-after.html
DELEGATE() works better than LIVE() since DELEGATE() can be chained, while LIVE() only applies to the current element(s).