Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Menu > Sub Menu positioned at beginning of menu

• Jim Aderhold

  Posted on Dec 5, 2007 (permalink)

  I am looking to create a menu system that will be used on a dynamic site. We would like to create a menu that when hovering over the root node, the sub menu would display horizontally, but the position of the menu would always start at the beginning of the menu not the current root node you are hovering over. The effect we are trying to achieve can be seen here: http://www.kentuckyderby.com.

• Paul Paul

  Posted on Dec 5, 2007 (permalink)

  Hello Jim,
  
  You'd better use RadTabStrip control in this case, instead of RadMenu. Here's a sample code snippet that demonstrates the needed approach.
  
  ASPX:
  

  <form id="form1" runat="server">

  <script type="text/javascript">

  function SelectMyTab(obj, args)

  {

  args.Tab.Select();

  }

  function UnSelectMyTab(e)

  {

  var tabStrip = <%= RadTabStrip1.ClientID%>;

  //Find the element which the mouse is over

  var destElement = e.relatedTarget || e.toElement;

  //Check if that element is part of the tabstrip

  while (destElement)

  {

  if (destElement.parentNode == tabStrip.DomElement)

  {

  return;

  }

  destElement = destElement.parentNode;

  }

  tabStrip.FindTabByText("<%=MyTab %>").SelectParents();

  }

  </script>

  <div>

  <radTS:RadTabStrip ID="RadTabStrip1" runat="server" OnClientMouseOver="SelectMyTab" ClickSelectedTab="True" AutoPostBack="True" onmouseout="UnSelectMyTab(event)" SelectedIndex="0" Skin="Outlook" MultiPageID="RadMultiPage1">

  <Tabs>

  <radTS:Tab ID="Tab1" runat="server" Text="Root Tab 1">

  <Tabs>

  <radTS:Tab ID="Tab2" runat="server" Text="Child Tab 1.1" PageViewID="PageView1">

  </radTS:Tab>

  <radTS:Tab ID="Tab3" runat="server" Text="Child Tab 1.2" PageViewID="PageView2">

  </radTS:Tab>

  </Tabs>

  </radTS:Tab>

  <radTS:Tab ID="Tab4" runat="server" Text="Root Tab 2">

  <Tabs>

  <radTS:Tab ID="Tab5" runat="server" Text="Child Tab 2.1" PageViewID="PageView3">

  </radTS:Tab>

  <radTS:Tab ID="Tab6" runat="server" Text="Child Tab 2.2" PageViewID="PageView4">

  </radTS:Tab>

  <radTS:Tab ID="Tab7" runat="server" Text="Child Tab 2.3" PageViewID="PageView5">

  </radTS:Tab>

  </Tabs>

  </radTS:Tab>

  <radTS:Tab ID="Tab8" runat="server" Text="Root Tab 3">

  <Tabs>

  <radTS:Tab ID="Tab9" runat="server" Text="Child Tab 3.1" PageViewID="PageView6">

  </radTS:Tab>

  </Tabs>

  </radTS:Tab>

  </Tabs>

  </radTS:RadTabStrip>

  <radTS:RadMultiPage ID="RadMultiPage1" runat="server" Height="454px" Width="737px">

  <radTS:PageView ID="PageView1" runat="server">

  Child Tab 1.1</radTS:PageView>

  <radTS:PageView ID="PageView2" runat="server" Width="100%">

  Child Tab 1.2</radTS:PageView>

  <radTS:PageView ID="PageView3" runat="server" Width="100%">

  Child Tab 2.1</radTS:PageView>

  <radTS:PageView ID="PageView4" runat="server" Width="100%">

  Child Tab 2.2</radTS:PageView>

  <radTS:PageView ID="PageView5" runat="server" Width="100%">

  Child Tab 2.3</radTS:PageView>

  <radTS:PageView ID="PageView6" runat="server" Width="100%">

  Child Tab 3.1</radTS:PageView>

  </radTS:RadMultiPage>

  </div>

  </form>

  
  Code-behind:
  

  using System;

  using System.Data;

  using System.Configuration;

  using System.Collections;

  using System.Web;

  using System.Web.Security;

  using System.Web.UI;

  using System.Web.UI.WebControls;

  using System.Web.UI.WebControls.WebParts;

  using System.Web.UI.HtmlControls;

  public partial class _Default : System.Web.UI.Page

  {

  protected string MyTab;

  protected void Page_Load(object sender, EventArgs e)

  {

  MyTab = RadTabStrip1.InnerMostSelectedTab.Text;

  }

  }

  
  
  Kind regards,
  Paul
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Menu > Sub Menu positioned at beginning of menu