Navigation 5.0

All NEW as of May 2009

Significant changes to the Citrix.com navigation system will be made in May 2009. If you are referencing the live Citrix.com navigation in your implementation, you must update your in-page code as noted below.

Creating your own CSS menu

The Citrix Online Standards Template Kit uses OpenCube's best-of-breed CSS menu generation software to deliver fast, manageable, multi-level, browser-compliant navigation menus. In Citrix.com these menus are written out to OpenCube's CSS-based navigation system from a database of dynamic content every fifteen minutes. This kit contains a static version of everything you need to easily implement the CSS version of the menus by changing only the ids, labels and URLs of the referenced pages. And we provide code-level instructions for using the live menus (below).

Each page in the template kit that uses the CSS menus, references the following in the <HEAD> of the page:
<script language="JavaScript" src="http://www.citrix.com/site/resources/v4_includes/css/5.0/quickmenu.js" type="text/javascript"></script>

Edit carefully...

Also, in each page of the template kit there is a static example of the OpenCube navigation located in the 'nav' div ( <div id="nav">). This is the only code that you will need to edit to create your menu.

Code Example :
<div id="nav">
      <div id="qm0" class="qmmc">
     <a href="linkHere">Navigation</a>
           <div>
           <a href="linkHere" >Nav label</a>
           <a href="linkHere" >Nav label</a>
                <div>
                 <a href="linkHere">Nav label</a>
                 <a href="linkHere">Nav label</a>
                 <a href="linkHere">Nav label</a>
                 <a href="linkHere">Nav label</a>
                 </div>
           <a href="linkHere" >Nav label</a>
           <a href="linkHere" >Nav label</a>
           </div>
     <a href="linkHere">Navigation</a>
           <div>
           <a href="linkHere" >Nav label</a>
           <a href="linkHere" >Nav label</a>
           <a href="linkHere" >Nav label</a>
           </div>
     <a href="linkHere">Navigation</a>
           <div>
           <a href="linkHere" >Nav label</a>
           <a href="linkHere" >Nav label</a>
           </div>
     <a href="linkHere">Navigation</a>
     </div>
</div>

Include the following just above the closing ( </body>) tag:
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false,false);</script>

NOTE: Do not edit/remove the id="qm0" class="qmmc" of the Open Cube div above or include additional attributes. Any change in its setup will result in inconsistent menu performance.

Neither Citrix nor OpenCube, will provide technical assistance if issues arise in your localization of the menus. Please follow the guidelines outlined above to minimize the chance that your implementation of the menus will require debugging or time-consuming and costly browser re-testing.

Using "live" Citrix.com menus

If you want your site to appear as a seamless part of Citrix.com, you need to use the live Citrix.com navigation menus. These menus are dynamically published by the system every 15 minutes. You can easily use these menus in your site (with absolute URLs.) by following the instructions below.

(Remember, the code below is encoded for proper display. If you try to copy it at the source level, you will have problems. You can copy it straight out of your browser without issue).

1. Reference the following file in the <HEAD> of your page:
<SCRIPT language="JavaScript" src="http://www.citrix.com/site/resources/v4_includes/css/5.0/quickmenu.js"></SCRIPT>

2. In the body of the page, replace the nav div ( <div id="nav">) and it's content with the following:
<SCRIPT language="JavaScript" src="http://www.citrix.com/lang/english/dnav/citrixnav_abs.5.0.js"></SCRIPT>

<div id="globalsearch">
     <form name="search" method="get" action="http://search.citrix.com/search"><input name="q" type="text" class="formlabel" id="qt" onfocus='this.value=""' value="Search">
     <input type="hidden" name="output" value="xml_no_dtd" /><input type="hidden" name="client" value="default_frontend" /><input type="hidden" name="proxystylesheet" value="default_frontend" />
     <input type="hidden" name="filter" value="p" /><input type="hidden" name="getfields" value="description" /></form>
</div>

3. In the body of the page, replace the 'siteheader_os' div ( <div id="siteheader_os">) and it's content with the following:
<SCRIPT language="JavaScript" src="http://www.citrix.com/english/resources/v4_includes/utility_nav_3p.js"></SCRIPT>

4. In the body of the page, replace the contents of the footer div ( <div id="footer">) with the following:
<SCRIPT language="JavaScript" src="http://www.citrix.com/english/resources/v4_includes/footer_3p.js"></SCRIPT>

  • Learn More

    • Which menu is right for you?

      There are two alternative methods for inserting navigation menus into the main-page templates of this kit. Your first option is to create your own version of the CSS menus (localized for your specific site). Your second option is to insert the actual, live Citrix.com CSS-driven menus (exactly as they appear on Citrix.com, in real-time).

      Creating your own
      The templates in the kit are setup for you to localize for your specific site. This is because, the majority of the time, this is the preferred method for inserting the menus. In most cases, you have your own navigation options with levels of content nested within those options. The customization (per the instructions at the left) of your menus for your site is easy, fast and reliable.

      Using the "live" menu
      Less frequently, a Citrix partner needs to create a site that appears to be part of Citrix.com. For those relatively rare cases, we have included instructions for leveraging the live, database driven CSS menus from Citrix.com (also outlined in the column at the left).

      Note that as of December 2007, the systems for the live Citrix.com and localized menus was upgraded to CSS from DHTML. Following the October 2007 re-launch of Citrix.com, the older DHTML menus were no longer supported. You must upgrade if you are using Citrix.com live menus.