How do you create the drop downs in the navigation bar like that on http://communityserver.org/community/? The community main item has four sub items; forums, blogs, downloads, photos.
David
To add the drop-downs to the navigation bar on cs.org, we created a SiteUrls_override.config file including the following text:
<?xml version="1.0" encoding="utf-8" ?><Overrides> <Override xpath="/SiteUrls/locations" mode="add"> <location name="cs-learnmore" path="/learnmore/" themeDir="learnmore"> <url name="cs-learnmore" path="" pattern="default.aspx" physicalPath="##themeDir##" vanity="{2}" page="overview.aspx" /> </location> <location name="cs-community" path="/community/" themeDir="community"> <url name="cs-community" path="" pattern="default.aspx" physicalPath="##themeDir##" vanity="{2}" page="home.aspx" /> </location> <location name="cs-contact" path="/contact/" themeDir="contact"> <url name="cs-contact" path="" pattern="default.aspx" physicalPath="##themeDir##" vanity="{2}" page="contactform.aspx" /> </location> </Override>
<Override xpath="/SiteUrls/navigation" mode="update"> <navigation> <link name="home" text="Home" resourceUrl="home" roles="Everyone" /> <link name="cs-learnmore" text="Learn More" resourceUrl="cs-learnmore" roles="Everyone" /> <link name="cs-community" text="Community" resourceUrl="cs-community" roles="Everyone" /> <link name="cs-showcase" text="Showcase" navigateUrl="/cs.org/blogs/showcase/default.aspx" roles="Everyone" /> <link name="cs-documentation" text="Documentation" navigateUrl="http://docs.communityserver.org/" roles="Everyone" /> <link name="cs-contact" text="Contact Us" resourceUrl="cs-contact" roles="Everyone" /> <link name="cs-getitnow" text="Get It Now" navigateUrl="http://get.communityserver.org/" roles="Everyone" /> </navigation> </Override></Overrides>
To define the updated top-level menu items (within the <navigation> node). Then, following markup was used to implement the navigation bar in the Master.master file,
<TWC:PopupMenu ID="CommunityPopup" runat="server" MenuGroupCssClass="CSContextMenuGroup" MenuItemCssClass="CSContextMenuItem" MenuItemSelectedCssClass="CSContextMenuItemHover" MenuItemExpandedCssClass="CSContextMenuItemExpanded" 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"><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>
Note the existence of the <TWC:PopupMenu id="CommunityPopup" /> which implements the pop-up menu and the separate handling of the link in the <navigation> region of our SiteUrls_override.config file with name "cs-community".
Finally, we added the following code to the master.Master file to popuplate the pop-up menu and register the javascript that attaches it to the "cs-community" tab item:
<script language="C#" runat="server">
protected override void OnInit(EventArgs e) { Telligent.Glow.PopupMenu communityMenu = CSControlUtility.Instance().FindControl(this, "CommunityPopup") as Telligent.Glow.PopupMenu; if (communityMenu != null) { communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Forums", SiteUrls.Instance().ForumsHome, null, null)); communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Blogs", SiteUrls.Instance().WeblogsHome, null, null)); communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Downloads", CommunityServer.Files.Components.FileGalleryUrls.Instance().Home, null, null)); communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Photos", SiteUrls.Instance().GalleriesHome, null, null));
if (CSContext.Current.User.IsAdministrator) communityMenu.MenuItems.Add(new Telligent.Glow.PopupMenuItem("Control Panel", SiteUrls.Instance().ControlPanel, 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>
Security can be checked to ensure that only the proper users will see each of the pop-up items (similar to the "Control Panel" menu item). Note, too, the javascript that is registered -- this is used to attach the pop-up menu to the "cs-community" tab item.
seems like gold suport only or something... permission denied...
// Tore - CS hobbyist
I have made an attempt at replicating this on my site and it's no where near working. I could really use some help. Here is what I have (I'll post each page in a separate post for ease of reading). Keep in mind that I am a self taught, beginning programmer. I am trying to make the "Advice Lounge, Music Scene, Movie Buzz, Fab Fashion" menu items within the popout menu from the main menu item "Shows". The Shows menu item should not be clickable:
SiteUrls_override.config
<
</
My Navigation Section in the SiteUrls.config
<!--
name: look up value
resourceUrl: maps to url name in SiteUrls/Urls
resourceName: text for link. Maps to the language resource files
roles: Which users can view this link.
You can also specify actual links here like the following:
<link name="mylink" navigateUrl="http://www.mysite.com/" text="My Link" />
If no roles attribute is given, it will assume it is for Everyone. You can
specify multiple roles by separating them with a comma (,).
My Shows Pages section in the SiteUrls.config
I wasn't sure if I was to replace the original nav section in the master.master, or just include the following along with. I replaced the original:
master.master <script> area:
{
lc.Controls.Add(rc);
rc.Controls.AddAt(0, lc);
rc.Controls.Add(
lc.Controls.Add(
}
showsMenu.MenuItems.Add(
<script type=""text/javascript"">
// <![CDATA[
var menu = document.getElementById('showsMenu');
if (menu)
// ]]>