Todd Bleeker's 12 Hive

Hide the Quick Launch Bar

Continuing with the Content Editor Web Part (CEWP) series (http://mindsharpblogs.com/Todd/articles/793.aspx).

When people ask me how to alter various elements of a Web Part Page; one common request is to hide the Quick Launch bar in a Windows SharePoint Services (WSS) Team Site. Fortunately, the code to do this can be readily understood by those with limited CSS and JavaScript experience (Step By Step instructions will be given near the end of this post) so it is a great place to begin discussion about the capabilities of the CEWP.

Import the StyleUnderCursor.dwp CEWP from my previous post onto the Home page of a Team Site and place your mouse over the top of the Quick Launch and you will see that there are three CSS classes consistently used ms-main, ms-nav, and ms-navframe to define the style of the Quick Launch:

This post will show you how to override one of the CSS classes using a CEWP. So, begin by draging and droping an empty CEWP from the Team Site Gallery onto a Web Part Zone on the Home page of a Team Site. Although you could append this new code to an existing CEWP, I commonly keep discrete functionality in separate Web Parts so that they can be exported and consumed individually. It isn't crutial what Web Part Zone or what position within the Web Part Zone you place the CEWP; however, because the finished CEWPs take up a small amount of vertical white space, I typically put them at the bottom of a Web Part Zone so they display at the bottom of the page below all other Web Parts.

There is very little difference between the scope of the ms-nav CSS class and the ms-navframe CSS class so either one will do, I'll begin by overriding the latter (if you want every aspect of the Quick Launch gone, use ms-nav instead). Syntactically define a specific CSS class by prefixing the class name with a dot or a period (.); syntactically define a style for an element's ID by prefixing the id with a pound symbol (#). Also, CSS must always be defined within <style></style> tags. To hide the Quick Launch you need to set a characteristic that lets you control the display of an element; in CSS this is called display. Setting display to none will prevent it from being rendered by the browser. The Quick Launch HTML will still be sent down to the browser, it just will not displayed. So, this is not the solution to pursue if you are trying to reduce bandwidth consumed by a WSS page. If you are unfamiliar with the CSS characteristics that you can alter, use FrontPage's CSS Intellisense or your favorite CSS syntax Web site.

To hide the Quick Launch, download and import my HideQuickLaunch.dwp or paste the following code into the property builder that pops up when the Source Editor... button of your new CEWP is clicked; then click the Save button.

Notice that your change takes effect immediately when you click the Save button:

In the figure above, note that the Quick Launch Bar is no longer showing (except for a tiny vertical bar on the left). Second, note that I gave the CEWP a nice Title: Hide Quick Launch Bar and set the Frame Style to None. This way when people are designing the page they will know what the CEWP is intended to do but nothing will show when the page is not in design mode.

Step By Step instructions to hide the Quick Launch Bar:

1. Browse to the home page of a WSS Team Site as a Web Designer or Administrator
2. From the Modify Shared Page smart-menu, choose Add Web Parts and then Browse.
3. Put a Content Editor Web Part on the bottom of the Right Web Part Zone.
4. From the new Web Part's smart-menu, choose Modify Shared Web Part.
5. Choose the Source Editor... button on the resulting tool pane.
6. Paste in the six lines of style code above the previous figure.
7. Choose the Save button.
8. In the tool pane, expand the Appearance category and alter the title to read "Hide Quick Launch Bar".
9. Still in the tool pane, scroll down and choose None from the Frame Style dropdown.
10. At the bottom of the tool pane, choose the OK button.

Step By Step instructions to export/import the Quick Launch Bar:

1. Browse to the home page of a WSS Team Site as a Web Designer or Administrator
2. From the Modify Shared Page smart-menu, choose Design This Page.
3. From the Hide Quick Launch Bar Web Part's smart-menu, choose Export....
4. On the resulting File Download dialog, choose the Save button.
5. Specify a location and a file name. I like to remove all spaces from the name: HideQuickLaunchBar.dwp and temporarily save them to a DWP subdirectory right off my C:\ drive.
6. Import this new Web Part directly onto a page, into the Team Site Web Part Gallery, or into the Virtual Server Web Part Gallery.

Imagine, your end user being able to dray and drop a no-server touch Web Part called Hide Quick Launch Bar from a Web Part Gallery on any Team Site (or custom Site Definition with a Quick Launch Bar equivalent) and the Quick Launch Bar simply disappears. They think you are a genius, but a half-dozen lines of code exported into a CEWP DWP is all it took.

You might ask, "What if I want to do this more globally rather than page by page?" Good question! Maybe you want to hide the Quick Launch bar on all Webs created with a given Site Definition. You actually have a number of excellent options at various levels. I'll describe these options in another post.

<Todd />

posted on Tuesday, October 25, 2005 2:07 PM