Community Support & Help Center for Hosting, Dedicated Services, Colocation, Design & Development
Hosting, Dedicated Services, Colocation, Design & Development
Community Server Drop Down Menu and Quick Navigation

You'll notice this site has a drop down menu / Quick Navigation and is using Community Server.

After reading some about it I thought it best to write down the basics as it's currently not very easy to understand in the sources that I had found.

Here is all that has been done to make it look this way. 

In SiteUrls.config within the "navigation" tag

<!-- in quick nav <link name="home" resourceUrl="home" resourceName="home" roles="Everyone" /> -->
  <link name="cs-community" navigateUrl="#" text="Navagation" />
  <!-- in quick nav <link name="blog" resourceUrl="webloghome" resourceName="weblogs" roles="Everyone" applicationType = "Weblog" /> -->
  <!-- in quick nav <link name="gallery" resourceUrl="galleryhome" resourceName="photos" roles="Everyone" applicationType = "Gallery" /> -->
  <!-- in quick nav <link name="files" resourceUrl="fileshome" resourceName="files" roles="Everyone" applicationType = "FileGallery" /> -->
  <link name="controlpanel" resourceUrl="controlpanel" resourceName="controlpanel" roles="SystemAdministrator,BlogAdministrator,ForumsAdministrator,Moderator,GalleryAdministrator,FileAdministrator,ReaderAdministrator,MembershipAdministrator" />
  <!-- in quick nav <link name="forums" resourceUrl="forumshome" resourceName="forums" roles="Everyone" applicationType = "Forum" /> -->
  <link name="purchase" navigateUrl="/purchase" text="Purchase" />
  <link name="emaillogin" navigateUrl="/mail/" text="SSL Email" />
  <link name="calendar" resourceUrl="calendarhome"  text="Calendar" />

In Master.Master

<script language="C#" runat="server">

 protected override void OnInit(EventArgs e)
 {
  switch (CSContext.Current.SiteThemeData.GetIntValue("columns", 2))
  {
   case -1:
    // one column, left (right content is rendered below left content)
    lc.Controls.AddAt(0, new LiteralControl("<div id=\"CommonSidebarLeft\">"));
    lc.Controls.Add(rc);
    lc.Controls.Add(new LiteralControl("</div>"));
    break;
   
   case 1:
    // one column, right (left content is rendered above right content)
    rc.Controls.AddAt(0, lc);
    rc.Controls.AddAt(0, new LiteralControl("<div id=\"CommonSidebarRight\">"));
    rc.Controls.Add(new LiteralControl("</div>"));
    break;

   default:
    // two columns
    lc.Controls.AddAt(0, new LiteralControl("<div id=\"CommonSidebarLeft\">"));
    lc.Controls.Add(new LiteralControl("</div>"));
    rc.Controls.AddAt(0, new LiteralControl("<div id=\"CommonSidebarRight\">"));
    rc.Controls.Add(new LiteralControl("</div>"));
    break;
  }

   Telligent.Glow.PopupMenu communityMenu = CSControlUtility.Instance().FindControl(this, "CommunityPopup") as Telligent.Glow.PopupMenu;
   if (communityMenu != null)
  {
   communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem(" Introduction", SiteUrls.Instance().Home, null, null));
   communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem(" Help Center", SiteUrls.Instance().ForumsHome, null, null));
   communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem(" Downloads Area", CommunityServer.Files.Components.FileGalleryUrls.Instance().Home, null, null));
            communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem(" The Gallery", SiteUrls.Instance().GalleriesHome, null, null));
   communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem(" News Articles", SiteUrls.Instance().WeblogsHome, null, null));
   //communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Events", CommunityServer.Files.Components.FileGalleryUrls.Instance().Home, null, null));
   //communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Fighters", CommunityServer.Files.Components.FileGalleryUrls.Instance().Home, null, null));
   Page.ClientScript.RegisterStartupScript(this.GetType(), "menus", @"
   <script type=""text/javascript"">
   // <![CDATA[
   var menu = document.getElementById('communityMenu');
   if (menu)
   menu.onmouseover= new Function('navigation_showPopup(" + communityMenu.ClientID + @", this);');
   // ]]>
   </" + "script>", false);
  }
 base.OnInit(e);
}

</script>

 and

  <TWC:PopupMenu ID="CommunityPopup" runat="server" MenuGroupCssClass="CommonContextMenuGroup" MenuItemCssClass="CommonContextMenuItem" MenuItemSelectedCssClass="CommonContextMenuItemHover" MenuItemExpandedCssClass="CommonContextMenuItemExpanded" MenuItemIconWidth="0" MenuItemIconHeight="0" MenuDirection="UpDown" />
  <script type="text/javascript">
  // <![CDATA[
  var navigation_popup = null;
  function navigation_showPopup(popup, element) { if (popup && !popup.IsOpen()) { navigation_hidePopup(); popup.OpenAtElement(element); navigation_popup = popup; } }
  function navigation_hidePopup() { if (navigation_popup) { navigation_popup.Close(); navigation_popup = null; } }
  // ]]>
  </script>
   <div id="CommonNavigation">
    <div class="Common">
     <CSControl:NavigationList runat="server">
     <HeaderTemplate><ul></HeaderTemplate>
     <ItemTemplate>
    <CSControl:CSLinkData runat="server" Tag="Li" LinkCssClass="Selected" LinkTo="Link" Property="Text" onmouseover="navigation_hidePopup();">
        <DisplayConditions>
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            <CSControl:Conditions Operator="Not" runat="server">
                <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="cs-community" />
            </CSControl:Conditions>
        </DisplayConditions>
    </CSControl:CSLinkData>
    <CSControl:CSLinkData runat="server" Tag="Li" LinkTo="Link" Property="Text" onmouseover="navigation_hidePopup();">
        <DisplayConditions Operator="Not">
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="cs-community" />
        </DisplayConditions>
    </CSControl:CSLinkData>
                                       
    <CSControl:CSLinkData runat="server" Tag="Li" LinkCssClass="Selected" LinkTo="Link" ContainerId="communityMenu" Property="Text">
        <DisplayConditions>
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="cs-community" />
        </DisplayConditions>
    </CSControl:CSLinkData>
    <CSControl:CSLinkData runat="server" Tag="Li" LinkTo="Link" Property="Text" ContainerId="communityMenu">
        <DisplayConditions Operator="And">
            <CSControl:Conditions Operator="Not" runat="server">
                <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" />
            </CSControl:Conditions>
            <CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="Name" Operator="EqualTo" ComparisonValue="cs-community" />
        </DisplayConditions>
    </CSControl:CSLinkData>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</CSControl:NavigationList>
</div>
</div>

Thats it, you can of course change the css and modify how the menu looks. 

Information for this guide was derived mostly from Ben Tiedt on the http://communityserver.org/ forums.


Posted 06-19-2007 11:31 PM by Shawn Hyde
©1998-2009 · Area51 Computers/Services, all rights reserved.