Wednesday, August 1, 2007

Let's Talk about .. MOSS2007-Flyout Navigation Bar

Creating a flyout nevigation bar is easy in MOSS2007. Even I took about one week to do it >_<
First, you should enter the "Site Setting". Since the nevigation bar is already prepared by MOSS, you just create new or edit the exist one. Then, you got the left nevigation bar.

Second, if you are ok with the default navigation bar, that's it. Anyway, you can modify to change its style or make it be flyout by opening SharePoint Designer, the new version of Front Page.

Third, open the master page, then see the code of the navigation bar. To make it be flyout, you just set the following attributes in the tag:-


  • Orientation="Vertical"
  • StaticDisplayLevels="2"
  • ItemWrap="false"
  • MaximumDynamicDisplayLevels="6"

After that, the bar will be flyout navigation bar.

Forth, if you want to change the style, you can change the styles of

  • LevelMenuItemStyles tag
  • LevelSubMenuStyles tag
  • LevelSelectedStyles tag

to change your font, background, and more. However, if the styles that are prepared may not satisfy you, so you can add your own styles inside the masterpage, and use them.

If you got any problems, I recommend you this blog. It's very helpful for me when I first tried to make it since there is the simple step-by-step instruction to make it.

http://www.helloitsliam.com/archive/2006/08/29/moss2007-–-look-and-feel-part-3-–-navigation-bar-basics.aspx

Fifth, after you can change the style of the main bar of the navigation bar, if you want to change the style of the flyout of the bar, you can do it by adding the following tags:-

DynamicMenuStyle CssClass="YourStyle1"

DynamicMenuItemStyle CssClass="YourStyle2"

DynamicHoverStyle CssClass="YourStyle3"


These tags are located inside . YourStyle1, YourStyle2, YourStyle3 are the names of the style you use.
Enjoy your Navigation bar !!

No comments: