locked
Parent menu (horizontal) and child menu (vertical) How to have parent show selcted when a child option is being displayed. RRS feed

  • Question

  • User910519897 posted

    Hello folks,

    I'm just getting to grips with the  csscontrol adapters. So far they look great.

    I was just wondering if someone could point me in the right direction with what I'm trying to achieve.

    I'm going for the classic look and feel where I would have a group of tabs along the top of the page... Section Tabs I'd refer to them as..

    Selecting a Section Tab would cause that Tab to be highlighted, and show a page with a vertical child menu on the LHS... showing menu uoptions appropriate for that Section.

    Selecting any child item on the vertical child menu would then show that page and leave both the child menu option highlighted and the parent Section Tab hightlighted.

    I'd be hoping to achieve this using menu's bound to sitemapdatasources (and all in a site.master page)

    So I have the parent menu bound to a sitemapdatasource and have its MaximumDynamicDisplayLevels set to 0, and its orientation set to Horizontal.

    Now (whatever about getting the graphics and styling set up to make it look like Tabs) , that gets me a horizontal menu on top of the page containing the top level items (parents) of my sitemap.

    Then  the child menu is bound to another sitemapdatasource with startfromcurrentnode = true so it just displays the sitemap nodes under the current one. Also great.. now I have two menus , a horizontal Section menu and a child menu.

    But what I don't have now is the child menu item showing that its the selected child.. and the parent menu item showing that one of its children is selected.

    I am just using the StyleSheetTheme="Basic" in the pages using the masterpage. (code for masterpage is below...) And using the CssSelectorClass ="PrettyMenu" for the menus.

    Have to admit I'm a bit confused about the ordering of the css files.. and even which ones are actually brought into play when I select the basic theme...

    But anyway, doing a view source, reveals that the parentmenu (the horizontal one) does not get any AspNet-Menu-Selected tag.. only the item as clicked in the child menu gets this... and even then the child is not showing any change in appearance...

    So I think I need to add something to the css for the child first.. but not sure how to do this...

     

    Then I suppose I'll need to write some code in, databound even?, to make the parent selected?

    Any help to push in the right direction greatly appreciated...

    Vida 

     

     My masterpage code looks like this:

      

    1    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage3.master.cs"
    2        Inherits="MasterPage2" %>
    3    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4    <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
    5    <head id="Head1" runat="server">
    6        <title>Master Page</title>
    7        <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
    8        <!--[if lt IE 7]>
    9        <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css">
    10   <![endif]-->
    11   </head>
    12   <body>
    13       <form id="form1" runat="server">
    14           <table border="0" style="width: 755px">
    15               <colgroup>
    16                   <col width="90%" />
    17               </colgroup>
    18               <tr valign="top" class="TopCell">
    19                   <td class="TopCell" align="left">
    20                        
    21                       <asp:SiteMapDataSource ID="smdsMaster" runat="server" ShowStartingNode="false" />
    22                       <asp:SiteMapDataSource ID="smdsChild" runat="server" StartFromCurrentNode="True"
    23                           ShowStartingNode="False" />
    24                   </td>
    25               </tr>
    26           </table>
    27           <table border="0">
    28               <colgroup>
    29                   <col width="10%" />
    30                   <col width="90%" />
    31               </colgroup>
    32               <tr valign="top" align="left">
    33                   <td height="20">
    34                       <asp:LoginStatus ID="loginstatus1" runat="server" LogoutPageUrl="Default.aspx" LogoutAction="Redirect" />
    35                   </td>
    36                   <td>
    37                       <div id="MainMenu">
    38                           <asp:Menu ID="MainMenu" runat="server" DataSourceID="smdsMaster" Orientation="Horizontal"
    39                               StaticDisplayLevels="1" MaximumDynamicDisplayLevels="0" SkinID="SampleMenuHorizontal"
    40                               CssSelectorClass="PrettyMenu">
    41                           </asp:Menu>
    42                       </div>
    43                   </td>
    44               </tr>
    45               <tr>
    46                   <td valign="top" style="background-color: #7795BD">
    47                       <div id="Div1">
    48                           <asp:Menu ID="mnuChild" runat="server" DataSourceID="smdsChild" Orientation="Vertical"
    49                               SkinID="SampleMenuVertical" CssSelectorClass="PrettyMenu">
    50                           </asp:Menu>
    51                       </div>
    52                   </td>
    53                   <td valign="top">
    54                       <asp:ContentPlaceHolder ID="MainContent" runat="server">
    55                       </asp:ContentPlaceHolder>
    56                   </td>
    57               </tr>
    58               <tr>
    59                   <td colspan="2" style="background-color: #7795BD">
    60                       footer</td>
    61               </tr>
    62           </table>
    63       </form>
    64   </body>
    65   </html>
    66   
    
      

     

     


     

    Wednesday, February 28, 2007 7:50 AM

All replies

  • User-534056067 posted

    Well done! You are nearly there!

    As it happens, I'm working on this EXACT same problem today and I just solved it. So, I'll be happy to share what I came up with.

    Your markup looks fine. That you figured out that you need 2 Menu tags and 2 SiteMapDataSource tags and how to use MaximumDynamicDisplayLevels, ShowStartingNode and StartFromCurrentNode is great. It took me a while to get that sorted out in my head so I'm incredibly grateful I don't have to try to explain it (since you already got it).

    You are correct in your assumption that you will need to write some code to accomplish what you want. The problem actually has little or nothing to do with the adapters. It has to do with the fact that you are effectively trying to get a menu item to be considered "selected" when its URL isn't actually the URL of the current page. Remember, you are saying that you want the top menu to show its nodes as being selected when a CHILD page in the hierarchy happens to be selected... that that child isn't really in the menu itself. Clear as mud?

    OK, no worries. What you want to do makes total sense in the real world and that's all we care about.

    Here is the markup I ended up with:

    <asp:SiteMapDataSource ID="PrimaryNavDS" runat="server" ShowStartingNode="false" />
    <asp:SiteMapDataSource ID="SecondaryNavDS" runat="server" ShowStartingNode="false" StartFromCurrentNode="true" />
    <asp:Menu ID="PrimaryNav" runat="server" DataSourceID="PrimaryNavDS" MaximumDynamicDisplayLevels="0" Orientation="Horizontal" CssSelectorClass="PrimaryNav" OnMenuItemDataBound="PrimaryNavItemDataBound" />
    <asp:Menu ID="SecondaryNav" runat="server" DataSourceID="SecondaryNavDS" Orientation="Horizontal" CssSelectorClass="SecondaryNav" OnMenuItemDataBound="SecondaryNavItemDataBound" OnDataBound="SecondaryNavFinishedDataBinding" />

    And here is the corresponding code that I stuck in the code-behind file:

    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 Main : System.Web.UI.MasterPage
    {
        private MenuItem _secondaryNavMenuItemToSelect = null;

        protected void Page_Load(object sender, EventArgs e)
        {
            SiteMapNode node = SiteMap.CurrentNode;
            if ((node != null) && (SiteMap.RootNode != null))
            {
                int offset = 0;
                while ((node.ParentNode != null) && (!node.ParentNode.Equals(SiteMap.RootNode)))
                {
                    offset--;
                    node = node.ParentNode;
                }
                if (offset != 0)
                {
                    SecondaryNavDS.StartingNodeOffset = offset;
                }
            }
        }

        protected void PrimaryNavItemDataBound(object sender, MenuEventArgs e)
        {
            SiteMapNode node = SiteMap.CurrentNode;
            if (SiteMap.RootNode != null)
            {
                while ((node != null) && (node.ParentNode != null) && (!node.ParentNode.Equals(SiteMap.RootNode)))
                {
                    node = node.ParentNode;
                }
                if ((node != null) && (node.ParentNode != null) && node.ParentNode.Equals(SiteMap.RootNode) && node.Url.Equals(e.Item.NavigateUrl))
                {
                    e.Item.Selected = true;
                }
            }
        }

        protected void SecondaryNavItemDataBound(object sender, MenuEventArgs e)
        {
            SiteMapNode node = SiteMap.CurrentNode;
            if (SiteMap.RootNode != null)
            {
                while ((node != null) && (node.ParentNode != null) && (node.ParentNode.ParentNode != null) && (!node.ParentNode.ParentNode.Equals(SiteMap.RootNode)))
                {
                    node = node.ParentNode;
                }
                if ((node != null) && (node.ParentNode != null) && (node.ParentNode.ParentNode != null) && node.ParentNode.ParentNode.Equals(SiteMap.RootNode) && node.Url.Equals(e.Item.NavigateUrl))
                {
                    _secondaryNavMenuItemToSelect = e.Item;
                }
            }
        }

        protected void SecondaryNavFinishedDataBinding(object sender, EventArgs e)
        {
            if (_secondaryNavMenuItemToSelect != null)
            {
                _secondaryNavMenuItemToSelect.Selected = true;
            }
        }
    }

    You'll notice that your markup and my markup are essentially the same, except for the ID values and the choice of CssSelectorClass. Note that I use two different CssSelectorClass values so I can style my two menus independently. Remember that the whole point of CssSelectorClass is to wrap the control with a <div> with a specified class that you can then use to qualify the CSS selectors that you write. I noticed that your markup used the same CssSelectorClass for both menus. I guess you wanted to style your menus identically.

    Anyway, I hope this helps.

    Wednesday, February 28, 2007 7:08 PM
  • User910519897 posted

    Hey There Russ,

    Thanks very much for the encouragement! I've been banging away at this problem for a coupla days and my enthusiasm was flagging a bit.. heh...

    Well done! You are nearly there!

    As it happens, I'm working on this EXACT same problem today and I just solved it. So, I'll be happy to share what I came up with.

    Your markup looks fine. That you figured out that you need 2 Menu tags and 2 SiteMapDataSource tags and how to use MaximumDynamicDisplayLevels, ShowStartingNode and StartFromCurrentNode is great. It took me a while to get that sorted out in my head so I'm incredibly grateful I don't have to try to explain it (since you already got it).

    You are correct in your assumption that you will need to write some code to accomplish what you want. The problem actually has little or nothing to do with the adapters. It has to do with the fact that you are effectively trying to get a menu item to be considered "selected" when its URL isn't actually the URL of the current page. Remember, you are saying that you want the top menu to show its nodes as being selected when a CHILD page in the hierarchy happens to be selected... that that child isn't really in the menu itself. Clear as mud?

    Oh yeah.. I do get it... thats perfectly understandable. 

      

    OK, no worries. What you want to do makes total sense in the real world and that's all we care about.

    I'm gald Sombody thinks so.. heh heh...

     

    Here is the markup I ended up with:

    <asp:SiteMapDataSource ID="PrimaryNavDS" runat="server" ShowStartingNode="false" />
    <asp:SiteMapDataSource ID="SecondaryNavDS" runat="server" ShowStartingNode="false" StartFromCurrentNode="true" />
    <asp:Menu ID="PrimaryNav" runat="server" DataSourceID="PrimaryNavDS" MaximumDynamicDisplayLevels="0" Orientation="Horizontal" CssSelectorClass="PrimaryNav" OnMenuItemDataBound="PrimaryNavItemDataBound" />
    <asp:Menu ID="SecondaryNav" runat="server" DataSourceID="SecondaryNavDS" Orientation="Horizontal" CssSelectorClass="SecondaryNav" OnMenuItemDataBound="SecondaryNavItemDataBound" OnDataBound="SecondaryNavFinishedDataBinding" />

    And here is the corresponding code that I stuck in the code-behind file:

    Ahh man, thank you so much.. you're saving me a bunch of time!

    I'll dig into this code now and see how I get on...

     

    You'll notice that your markup and my markup are essentially the same, except for the ID values and the choice of CssSelectorClass. Note that I use two different CssSelectorClass values so I can style my two menus independently. Remember that the whole point of CssSelectorClass is to wrap the control with a <div> with a specified class that you can then use to qualify the CSS selectors that you write. I noticed that your markup used the same CssSelectorClass for both menus. I guess you wanted to style your menus identically.

    Anyway, I hope this helps.

    It sure does!

    I didn't worry to much about the css styling initially.. just wanted to see if the idea was any way feasible at all .. heh...

    Now that I know it IS I'll be much more interested in getting the whole thing to look right...

    Again, thank you very very much...

    Vida

    Friday, March 2, 2007 6:05 AM
  • User-2051459559 posted

    After a lot of searching, I've just come across this thread and it seems to cover exactly what I want to do. The only differences being that I want my second-level menu to be horizontal and I'm using VB.NET rather than C#.

    After converting the code, I had a few problems:

    1) "SecondaryNavDS" (in line 29 of my VB code) is not recognised.

    2) When I run my page using this (master page) I get a compilation error on line 1 of my code: Compiler Error Message: ASPNET: Make sure that the class defined in this code file matches the 'inherits' attribute, and that it extends the correct base class (e.g. Page or UserControl).

    3) The first line of my MasterPage is highlighted with the message "'Context' is not a member of 'MasterPage'".

    Any suggestions? I'm sure it's something obvious I've overlooked, but I can't work it out. My code reads as follows:

    1    Imports System
    2    Imports System.Data
    3    Imports System.Configuration
    4    Imports System.Collections
    5    Imports System.Web
    6    Imports System.Web.Security
    7    Imports System.Web.UI
    8    Imports System.Web.UI.WebControls
    9    Imports System.Web.UI.WebControls.WebParts
    10   Imports System.Web.UI.HtmlControls
    11   Public Class Main
    12       Inherits System.Web.UI.MasterPage
    13   
    14       Private _secondaryNavMenuItemToSelect As MenuItem = Nothing
    15   
    16       Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    17           Dim node As SiteMapNode = SiteMap.CurrentNode
    18           If ((Not (node) Is Nothing) _
    19                       AndAlso (Not (SiteMap.RootNode) Is Nothing)) Then
    20               Dim offset As Integer = 0
    21   
    22               While ((Not (node.ParentNode) Is Nothing) _
    23                           AndAlso Not node.ParentNode.Equals(SiteMap.RootNode))
    24                   offset = (offset - 1)
    25                   node = node.ParentNode
    26   
    27               End While
    28               If (offset <> 0) Then
    29                   SecondaryNavDS.StartingNodeOffset = offset
    30               End If
    31           End If
    32       End Sub
    33   
    34       Protected Sub PrimaryNavItemDataBound(ByVal sender As Object, ByVal e As MenuEventArgs)
    35           Dim node As SiteMapNode = SiteMap.CurrentNode
    36           If (Not (SiteMap.RootNode) Is Nothing) Then
    37   
    38               While ((Not (node) Is Nothing) _
    39                           AndAlso ((Not (node.ParentNode) Is Nothing) _
    40                           AndAlso Not node.ParentNode.Equals(SiteMap.RootNode)))
    41                   node = node.ParentNode
    42   
    43               End While
    44               If ((Not (node) Is Nothing) _
    45                           AndAlso ((Not (node.ParentNode) Is Nothing) _
    46                           AndAlso (node.ParentNode.Equals(SiteMap.RootNode) AndAlso node.Url.Equals(e.Item.NavigateUrl)))) Then
    47                   e.Item.Selected = True
    48               End If
    49           End If
    50       End Sub
    51   
    52       Protected Sub SecondaryNavItemDataBound(ByVal sender As Object, ByVal e As MenuEventArgs)
    53           Dim node As SiteMapNode = SiteMap.CurrentNode
    54           If (Not (SiteMap.RootNode) Is Nothing) Then
    55   
    56               While ((Not (node) Is Nothing) _
    57                           AndAlso ((Not (node.ParentNode) Is Nothing) _
    58                           AndAlso ((Not (node.ParentNode.ParentNode) Is Nothing) _
    59                           AndAlso Not node.ParentNode.ParentNode.Equals(SiteMap.RootNode))))
    60                   node = node.ParentNode
    61   
    62               End While
    63               If ((Not (node) Is Nothing) _
    64                           AndAlso ((Not (node.ParentNode) Is Nothing) _
    65                           AndAlso ((Not (node.ParentNode.ParentNode) Is Nothing) _
    66                           AndAlso (node.ParentNode.ParentNode.Equals(SiteMap.RootNode) AndAlso node.Url.Equals(e.Item.NavigateUrl))))) Then
    67                   _secondaryNavMenuItemToSelect = e.Item
    68               End If
    69           End If
    70       End Sub
    71   
    72       Protected Sub SecondaryNavFinishedDataBinding(ByVal sender As Object, ByVal e As EventArgs)
    73           If (Not (_secondaryNavMenuItemToSelect) Is Nothing) Then
    74               _secondaryNavMenuItemToSelect.Selected = True
    75           End If
    76       End Sub
    77   End Class
    And my MasterPage ASP.NET is as follows:
    <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
    <head id="Head1" runat="server">
        <title>Master Page</title>
        <link runat="server" rel="stylesheet" href="CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
        <!--[if lt IE 7]>
        <link runat="server" rel="stylesheet" href="CSS/BrowserSpecific/IEMenu6.css" type="text/css">
        <![endif]-->
    </head>
    <body>
        <form id="form1" runat="server">
            <table border="0" style="width: 755px">
                <colgroup>
                <col width="90%" />
                </colgroup>
                <tr valign="top">
                <td align="left">
                    <asp:SiteMapDataSource ID="PrimaryNavDS" runat="server" ShowStartingNode="false" />
                    <asp:SiteMapDataSource ID="SecondaryNavDS" runat="server" ShowStartingNode="false" StartFromCurrentNode="true" />
                </td>
                </tr>
            </table>
            <table border="0">
                <colgroup>
                    <col width="10%" />
                    <col width="90%" />
                </colgroup>
                <tr valign="top" align="left">
                    <td height="20">
                        <asp:LoginStatus ID="loginstatus1" runat="server" LogoutPageUrl="Default.aspx" LogoutAction="Redirect" />
                    </td>
                    <td>
                        <div id="MainMenu">
                            <asp:Menu ID="PrimaryNav" runat="server" DataSourceID="PrimaryNavDS" MaximumDynamicDisplayLevels="0" Orientation="Horizontal" CssSelectorClass="PrimaryNav" OnMenuItemDataBound="PrimaryNavItemDataBound" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td valign="top" style="background-color: #7795BD">
                        <div id="Div1">
                            <asp:Menu ID="SecondaryNav" runat="server" DataSourceID="SecondaryNavDS" Orientation="Horizontal" CssSelectorClass="SecondaryNav" OnMenuItemDataBound="SecondaryNavItemDataBound" OnDataBound="SecondaryNavFinishedDataBinding" />
                        </div>
                    </td>
                    <td valign="top">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="background-color: #7795BD">
                        footer
                    </td>
                </tr>
            </table>
        </form>
    </body>
    </html>
      


     

    Wednesday, August 15, 2007 11:25 AM
  • User910519897 posted

    Well the first error is do with the name of the class in your codebehind file...

    In the asp.net you tell it that the page inherits a class called "masterpage" but then in the vb code you call the class "Main"

    So you're confusing the compiler...

    Either change the name of the class to masterpage or change the Inherits to refer to Main...

     

    HTH

    Vida

    Thursday, August 16, 2007 4:29 AM
  • User-2051459559 posted

    Thanks Vida,

    I thought it must be something stupid like that. Fixing that solved the other problems and I now have it working. Thanks very much for your help and thanks to Russ for his original suggestions. This has been a problem for some time, so I'm really glad to have a solution at last. Thanks again!

     Andrew
     

     

    Thursday, August 16, 2007 6:03 AM
  • User910519897 posted

    Ahh thats great.

    Glad to know I did SOMETHING useful this morning!

    Vida

    PS: click the old Mark As Answer button on my previous post there and I'll get a coupla points...

    Thursday, August 16, 2007 6:46 AM
  • User-2051459559 posted

    I can't mark it as answered Vida. I think you have to do it yourself as you were the original poster. Strange world we live in huh?

    Thursday, August 16, 2007 7:26 AM
  • User910519897 posted

    Ohhh right.. i DID start this thread didn't I?

    Heh, oh well...don't worry about it... enjoy your menus...

    Vida

    Thursday, August 16, 2007 7:38 AM
  • User-2051459559 posted

    Er, one more thing: I've got it all working fine apart from all my styling efforts have no effect on the second level menu. No matter what I do, I can't seem to change the font, spacing, or anything. It seems that my CSS is just ignored. I tried changing the CSSSelectorClass to be the same as the primary menu (which I know works fine), but nothing happened. I even tried applying some styling directly in my ASPX markup - again to no avail. I've looked at the rendered HTML and can't see anything wrong. Once again I suspect I'm overlooking something obvious as nothing I try seems to work. Any ideas? My code is as follows:


    MASTERPAGE.MASTER
    =================== 
    <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
    
        <head id="Head1" runat="server">
    
            <!-- Google Verification Tag -->
            <meta name="verify-v1" content="lSJpsMm2hNVnH+j9zc5FN2tyxFsG8T30eYzoj8wuuG8=" />
    
            <title>Villa Santhi Bali: Luxury Beach Holiday Villa - Master Page</title>
            <link type="text/css" rel="stylesheet" href="Screen.css" />
            <link runat="server" rel="stylesheet" href="CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
            <!--[if lt IE 7]>
            <link runat="server" rel="stylesheet" href="CSS/BrowserSpecific/IEMenu6.css" type="text/css">
            <![endif]-->
    
        </head>
    
        <body>
            <form id="form1" runat="server">
                <div id="wrapperdiv">
                    <div id="containerdiv">
                        <div id="contentdiv">
                        
                            <div id="Nav2Menudiv">
                                <ol>
                                    <li><a href="Default.aspx">Home</a></li>
                                    <li><a href="About.aspx">About</a></li>
                                    <li><a href="Contact.aspx">Contact</a></li>
                                    <li><a href="FAQ.aspx">FAQ</a></li>
                                    <li><a href="Terms.aspx">Terms</a></li>
                                    <li><a href="Privacy.aspx">Privacy</a></li>
                                </ol>
                            </div> <!-- end of Nav2Menudiv -->
    
                            <div id="SiteMapsdiv">
                                <asp:SiteMapDataSource ID="PrimaryNavDS" runat="server" ShowStartingNode="false" />
                                <asp:SiteMapDataSource ID="SecondaryNavDS" runat="server" ShowStartingNode="false" StartFromCurrentNode="true" />
                            </div> <!-- end of SiteMapsdiv -->
    
                            <div id="PrimaryNavdiv">
                                <asp:Menu ID="PrimaryNav" runat="server" DataSourceID="PrimaryNavDS" MaximumDynamicDisplayLevels="0" Orientation="Horizontal" CssSelectorClass="PrimaryNav" OnMenuItemDataBound="PrimaryNavItemDataBound" />
                            </div> <!-- end of PrimaryNavdiv -->
    
                            <div id="SecondaryNavDiv">
                                <asp:Menu ID="SecondaryNav" runat="server" DataSourceID="SecondaryNavDS" Orientation="Horizontal" CssSelectorClass="SecondaryNav" OnMenuItemDataBound="SecondaryNavItemDataBound" OnDataBound="SecondaryNavFinishedDataBinding" />
                            </div> <!-- end of SecondaryNavDiv -->
    
                            <div id="ContentPlaceHolderdiv">
                                <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                                </asp:contentplaceholder>
                            </div> <!-- end of ContentPlaceHolderdiv -->
    
                        </div> <!-- end of contentdiv -->
                    </div> <!-- end of containerdiv -->
                </div> <!-- end of wrapperdiv -->
            </form>
    
             <!-- Google Analytics Tag -->
            <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
            </script>
            <script type="text/javascript">
                _uacct = "UA-2327547-1";
                urchinTracker();
            </script>
    
        </body>
    </html>

     

    SCREEN.CSS

    ===========  

    body
    {
        text-align: center;
        background-image: url(Images/SkyBackground.jpg);
        background-repeat: repeat;
        background-color: #d1d1d4;
    }
    
    #wrapperdiv
    {
        width: 760px;
        margin:0 auto;
        text-align:left;
    	position:relative;
    }
    
    /* Main Contents */
    #ContentPlaceHolderdiv
    {
        background-color: white;
        clear: both;
        border-right: gray thin solid;
        border-left: gray thin solid;
        border-bottom: gray thin solid;
    }
    
    /* Secondary menu (displayed top centre) */
    #Nav2Menudiv
    {
        text-align: center;
        font-size: 85%;
    }
    #Nav2Menudiv ol
    {
        padding:0;
        margin:0;
        display:inline;
    }
    #Nav2Menudiv li
    {
         display:inline;
         padding-left:1em;
         margin-left:1em;
         border-left:1px solid gray;
    }
    #Nav2Menudiv li:first-child
    {
         padding-left:0;
         margin-left:0;
         border-left:none;
    }
    #Nav2Menudiv li a
    {
         color:gray;
    }
    
    /* Main tabbed menu */
    #PrimaryNavdiv {
        float:left;
        width:100%;
        background:#DAE0D2 url("Images/bg.gif") repeat-x bottom;
        font-size:93%;
        line-height:normal;
    }
    #PrimaryNavdiv ul {
        margin:0;
        padding:10px 10px 0;
        list-style:none;
    }
    #PrimaryNavdiv li {
        float:left;
        background:url("Images/left_both.gif") no-repeat left top;
        margin:0;
        padding:0 0 0 9px;
        border-bottom:1px solid #765;
    }
    #PrimaryNavdiv a {
        float:left;
        display:block;
        width:1em;
        white-space:nowrap;
        background:url("Images/right_both.gif") no-repeat right top;
        padding:5px 15px 4px 6px;
        text-decoration:none;
        font-weight:bold;
        color:#765;
    }
    #PrimaryNavdiv .AspNet-Menu-Horizontal > ul a {width:auto;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #PrimaryNavdiv a {float:none;}
    /* End IE5-Mac hack */
    #PrimaryNavdiv a:hover {
        color:#333;
    }
    #PrimaryNavdiv .AspNet-Menu-Selected {
        background-position:0 -150px;
        border-width:0;
    }
    #PrimaryNavdiv .AspNet-Menu-Selected a {
        background-position:100% -150px;
        padding-bottom:5px;
        color:#333;
    }
    #PrimaryNavdiv li:hover, #PrimaryNavdiv li:hover a {
        background-position:0% -150px;
        color:#333;
    }
    #PrimaryNavdiv li:hover a {
        background-position:100% -150px;
    }

     

    MASTERPAGE.MASTER.VB

    ======================

    Imports System
    Imports System.Data
    Imports System.Configuration
    Imports System.Collections
    Imports System.Web
    Imports System.Web.Security
    Imports System.Web.UI
    Imports System.Web.UI.WebControls
    Imports System.Web.UI.WebControls.WebParts
    Imports System.Web.UI.HtmlControls
    Public Class MasterPage
        Inherits System.Web.UI.MasterPage
    
        Private _secondaryNavMenuItemToSelect As MenuItem = Nothing
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            Dim node As SiteMapNode = SiteMap.CurrentNode
            If ((Not (node) Is Nothing) _
                        AndAlso (Not (SiteMap.RootNode) Is Nothing)) Then
                Dim offset As Integer = 0
    
                While ((Not (node.ParentNode) Is Nothing) _
                            AndAlso Not node.ParentNode.Equals(SiteMap.RootNode))
                    offset = (offset - 1)
                    node = node.ParentNode
    
                End While
                If (offset <> 0) Then
                    SecondaryNavDS.StartingNodeOffset = offset
                End If
            End If
        End Sub
    
        Protected Sub PrimaryNavItemDataBound(ByVal sender As Object, ByVal e As MenuEventArgs)
            Dim node As SiteMapNode = SiteMap.CurrentNode
            If (Not (SiteMap.RootNode) Is Nothing) Then
    
                While ((Not (node) Is Nothing) _
                            AndAlso ((Not (node.ParentNode) Is Nothing) _
                            AndAlso Not node.ParentNode.Equals(SiteMap.RootNode)))
                    node = node.ParentNode
    
                End While
                If ((Not (node) Is Nothing) _
                            AndAlso ((Not (node.ParentNode) Is Nothing) _
                            AndAlso (node.ParentNode.Equals(SiteMap.RootNode) AndAlso node.Url.Equals(e.Item.NavigateUrl)))) Then
                    e.Item.Selected = True
                End If
            End If
        End Sub
    
        Protected Sub SecondaryNavItemDataBound(ByVal sender As Object, ByVal e As MenuEventArgs)
            Dim node As SiteMapNode = SiteMap.CurrentNode
            If (Not (SiteMap.RootNode) Is Nothing) Then
    
                While ((Not (node) Is Nothing) _
                            AndAlso ((Not (node.ParentNode) Is Nothing) _
                            AndAlso ((Not (node.ParentNode.ParentNode) Is Nothing) _
                            AndAlso Not node.ParentNode.ParentNode.Equals(SiteMap.RootNode))))
                    node = node.ParentNode
    
                End While
                If ((Not (node) Is Nothing) _
                            AndAlso ((Not (node.ParentNode) Is Nothing) _
                            AndAlso ((Not (node.ParentNode.ParentNode) Is Nothing) _
                            AndAlso (node.ParentNode.ParentNode.Equals(SiteMap.RootNode) AndAlso node.Url.Equals(e.Item.NavigateUrl))))) Then
                    _secondaryNavMenuItemToSelect = e.Item
                End If
            End If
        End Sub
    
        Protected Sub SecondaryNavFinishedDataBinding(ByVal sender As Object, ByVal e As EventArgs)
            If (Not (_secondaryNavMenuItemToSelect) Is Nothing) Then
                _secondaryNavMenuItemToSelect.Selected = True
            End If
        End Sub
    End Class

     

    THE SOURCE VIEW OF ONE OF MY RENDERED PAGES

    ============================================ 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
    
        <head id="ctl00_Head1">
    
            <!-- Google Verification Tag -->
            <meta name="verify-v1" content="lSJpsMm2hNVnH+j9zc5FN2tyxFsG8T30eYzoj8wuuG8=" /><title>
    	Villa Santhi Bali: Luxury Beach Holiday Villa - The Villa
    </title><link type="text/css" rel="stylesheet" href="Screen.css" /><link id="ctl00_AdaptersInvariantImportCSS" rel="stylesheet" href="CSS/Import.css" type="text/css" />
            <!--[if lt IE 7]>
            <link rel="stylesheet" href="CSS/BrowserSpecific/IEMenu6.css" type="text/css" />
            <![endif]-->
    
        <style type="text/css">
    	.ctl00_PrimaryNav_0 { background-color:white;visibility:hidden;display:none;;left:0px;top:0px; }
    	.ctl00_PrimaryNav_1 { text-decoration:none; }
    	.ctl00_PrimaryNav_2 {  }
    	.ctl00_SecondaryNav_0 { background-color:white;visibility:hidden;display:none;;left:0px;top:0px; }
    	.ctl00_SecondaryNav_1 { text-decoration:none; }
    	.ctl00_SecondaryNav_2 {  }
    
    </style></head>
    
        <body>
            <form name="aspnetForm" method="post" action="Villa.aspx" id="aspnetForm">
    <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjgPZBYCZg9kFgICAw9kFgQCBRA8KwANAgAPFgIeC18hRGF0YUJvdW5kZ2QMFCsACAUbMDowLDA6MSwwOjIsMDozLDA6NCwwOjUsMDo2FCsAAhYQHgRUZXh0BQRIb21lHgVWYWx1ZQUESG9tZR4LTmF2aWdhdGVVcmwFGS9WaWxsYVNhbnRoaS9EZWZhdWx0LmFzcHgeB1Rvb2xUaXAFFlZpbGxhIFNhbnRoaSBIb21lIFBhZ2UeB0VuYWJsZWRnHgpTZWxlY3RhYmxlZx4IRGF0YVBhdGgFGS92aWxsYXNhbnRoaS9kZWZhdWx0LmFzcHgeCURhdGFCb3VuZGdkFCsAAhYSHwIFCVRoZSBWaWxsYR8IZx4IU2VsZWN0ZWRnHwEFCVRoZSBWaWxsYR8DBRcvVmlsbGFTYW50aGkvVmlsbGEuYXNweB8FZx8GZx8EBTZBYm91dCB0aGUgdmlsbGEsIGFjY29tbW9kYXRpb24sIGZhY2lsaXRpZXMgYW5kIGdyb3VuZHMfBwUXL3ZpbGxhc2FudGhpL3ZpbGxhLmFzcHhkFCsAAhYQHwEFC1RoZSBTZXR0aW5nHwIFC1RoZSBTZXR0aW5nHwMFGS9WaWxsYVNhbnRoaS9TZXR0aW5nLmFzcHgfBAU/QWJvdXQgQmFsaSwgTG92aW5hLCBMb2NhbCBBbWVuaXRpZXMsIEFjdGl2aXRpZXMgYW5kIEF0dHJhY3Rpb25zHwVnHwZnHwcFGS92aWxsYXNhbnRoaS9zZXR0aW5nLmFzcHgfCGdkFCsAAhYQHwEFC1RoZSBTZXJ2aWNlHwIFC1RoZSBTZXJ2aWNlHwMFGS9WaWxsYVNhbnRoaS9TZXJ2aWNlLmFzcHgfBAU9T3VyIHNlcnZpY2VzLCBpbmNsdWRpbmcgZGluaW5nLCBzcGEsIGV4Y3Vyc2lvbnMgYW5kIHRyYW5zcG9ydB8FZx8GZx8HBRkvdmlsbGFzYW50aGkvc2VydmljZS5hc3B4HwhnZBQrAAIWEB8BBQxUZXN0aW1vbmlhbHMfAgUMVGVzdGltb25pYWxzHwMFHi9WaWxsYVNhbnRoaS9UZXN0aW1vbmlhbHMuYXNweB8EBRxXaGF0IG91ciBndWVzdHMgc2F5IGFib3V0IHVzHwVnHwZnHwcFHi92aWxsYXNhbnRoaS90ZXN0aW1vbmlhbHMuYXNweB8IZ2QUKwACFhAfAQUHR2FsbGVyeR8CBQdHYWxsZXJ5HwMFGS9WaWxsYVNhbnRoaS9HYWxsZXJ5LmFzcHgfBAUnUGhvdG9zLCB2aWRlb3MgYW5kIDM2MC1kZWdyZWUgcGFub3JhbWFzHwVnHwZnHwcFGS92aWxsYXNhbnRoaS9nYWxsZXJ5LmFzcHgfCGdkFCsAAhYQHwEFB0Jvb2tpbmcfAgUHQm9va2luZx8DBRkvVmlsbGFTYW50aGkvQm9va2luZy5hc3B4HwQFJVByaWNlcywgYXZhaWxhYmlsaXR5IGFuZCByZXNlcnZhdGlvbnMfBWcfBmcfBwUZL3ZpbGxhc2FudGhpL2Jvb2tpbmcuYXNweB8IZ2RkZAIHEDwrAA0CAA8WAh8AZ2QMFCsABAULMDowLDA6MSwwOjIUKwACFhAfAQUNQWNjb21tb2RhdGlvbh8CBQ1BY2NvbW1vZGF0aW9uHwMFJS9WaWxsYVNhbnRoaS9WaWxsYV9BY2NvbW1vZGF0aW9uLmFzcHgfBAUMUm9vbSBkZXRhaWxzHwVnHwZnHwcFJS92aWxsYXNhbnRoaS92aWxsYV9hY2NvbW1vZGF0aW9uLmFzcHgfCGdkFCsAAhYQHwEFCkZhY2lsaXRpZXMfAgUKRmFjaWxpdGllcx8DBSIvVmlsbGFTYW50aGkvVmlsbGFfRmFjaWxpdGllcy5hc3B4HwQFKERldGFpbHMgb2YgdGhlIGZ1cm5pc2hpbmdzIGFuZCBlcXVpcG1lbnQfBWcfBmcfBwUiL3ZpbGxhc2FudGhpL3ZpbGxhX2ZhY2lsaXRpZXMuYXNweB8IZ2QUKwACFhAfAQUHR3JvdW5kcx8CBQdHcm91bmRzHwMFHy9WaWxsYVNhbnRoaS9WaWxsYV9Hcm91bmRzLmFzcHgfBAUfRGV0YWlscyBvZiB0aGUgZ2FyZGVucyBhbmQgcG9vbB8FZx8GZx8HBR8vdmlsbGFzYW50aGkvdmlsbGFfZ3JvdW5kcy5hc3B4HwhnZGRkGAEFEGN0bDAwJFByaW1hcnlOYXYPD2QFCVRoZSBWaWxsYWRGZYc1wsTiC6+F9ldkzcVRA193nA==" />
    </div>
    
    
    <script src="/VillaSanthi/JavaScript/AdapterUtils.js" type="text/javascript"></script>
    <script src="/VillaSanthi/JavaScript/MenuAdapter.js" type="text/javascript"></script>
    
                <div id="wrapperdiv">
                    <div id="containerdiv">
                        <div id="contentdiv">
                        
                            <div id="Nav2Menudiv">
                                <ol>
                                    <li><a href="Default.aspx">Home</a></li>
                                    <li><a href="About.aspx">About</a></li>
                                    <li><a href="Contact.aspx">Contact</a></li>
    
                                    <li><a href="FAQ.aspx">FAQ</a></li>
                                    <li><a href="Terms.aspx">Terms</a></li>
                                    <li><a href="Privacy.aspx">Privacy</a></li>
                                </ol>
                            </div> <!-- end of Nav2Menudiv -->
    
                            <div id="SiteMapsdiv">
    
                                
                                
                            </div> <!-- end of SiteMapsdiv -->
    
                            <div id="PrimaryNavdiv">
                                
    <div class="PrimaryNav">
    	<div class="AspNet-Menu-Horizontal">
    		<ul class="AspNet-Menu">
    			<li class="AspNet-Menu-Leaf">
    				<a href="/VillaSanthi/Default.aspx" class="AspNet-Menu-Link" title="Villa Santhi Home Page">
    					Home</a>
    
    			</li>
    			<li class="AspNet-Menu-Leaf AspNet-Menu-Selected">
    				<a href="/VillaSanthi/Villa.aspx" class="AspNet-Menu-Link AspNet-Menu-Selected" title="About the villa, accommodation, facilities and grounds">
    					The Villa</a>
    			</li>
    			<li class="AspNet-Menu-Leaf">
    				<a href="/VillaSanthi/Setting.aspx" class="AspNet-Menu-Link" title="About Bali, Lovina, Local Amenities, Activities and Attractions">
    					The Setting</a>
    
    			</li>
    			<li class="AspNet-Menu-Leaf">
    				<a href="/VillaSanthi/Service.aspx" class="AspNet-Menu-Link" title="Our services, including dining, spa, excursions and transport">
    					The Service</a>
    			</li>
    			<li class="AspNet-Menu-Leaf">
    				<a href="/VillaSanthi/Testimonials.aspx" class="AspNet-Menu-Link" title="What our guests say about us">
    					Testimonials</a>
    
    			</li>
    			<li class="AspNet-Menu-Leaf">
    				<a href="/VillaSanthi/Gallery.aspx" class="AspNet-Menu-Link" title="Photos, videos and 360-degree panoramas">
    					Gallery</a>
    			</li>
    			<li class="AspNet-Menu-Leaf">
    				<a href="/VillaSanthi/Booking.aspx" class="AspNet-Menu-Link" title="Prices, availability and reservations">
    					Booking</a>
    
    			</li>
    		</ul>
    	</div>
    </div>
    
                            </div> <!-- end of PrimaryNavdiv -->
    
                            <div id="SecondaryNavDiv">
                                
    <div class="PrimaryNav">
    	<div class="AspNet-Menu-Horizontal">
    
    		<ul class="AspNet-Menu">
    			<li class="AspNet-Menu-Leaf">
    				<a href="/VillaSanthi/Villa_Accommodation.aspx" class="AspNet-Menu-Link" title="Room details">
    					Accommodation</a>
    			</li>
    			<li class="AspNet-Menu-Leaf">
    				<a href="/VillaSanthi/Villa_Facilities.aspx" class="AspNet-Menu-Link" title="Details of the furnishings and equipment">
    					Facilities</a>
    
    			</li>
    			<li class="AspNet-Menu-Leaf">
    				<a href="/VillaSanthi/Villa_Grounds.aspx" class="AspNet-Menu-Link" title="Details of the gardens and pool">
    					Grounds</a>
    			</li>
    		</ul>
    	</div>
    </div>
    
                            </div> <!-- end of SecondaryNavDiv -->
    
                            <div id="ContentPlaceHolderdiv">
                                
        <p>Set in extensive private grounds, with a large infinity-effect swimming pool, Villa Santhi is by far the most spacious and luxurious accommodation in North Bali.</p>
        <p>A stunning fusion of traditional and contemporary design, this architect-built villa perfectly suits its enchanting beachfront setting.</p>
        <p>It is lavishly equipped, and the standard of finish and attention to detail are simply unsurpassed.</p>
        <p>Panoramic ocean views at the front complement sweeping rice field and mountain views at the rear.</p>
    
        <p>The open-living design expands the feeling of spaciousness to create an intimate connection with the environment.</p>
        <p>Cooled by a refreshing, flower-scented, sea breeze and soothed by the sound of waves gently lapping the beach, Villa Santhi is a blissful haven of tranquillity and calm.</p>
    
                            </div> <!-- end of ContentPlaceHolderdiv -->
    
                        </div> <!-- end of contentdiv -->
                    </div> <!-- end of containerdiv -->
    
                </div> <!-- end of wrapperdiv -->
            </form>
    
             <!-- Google Analytics Tag -->
            <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
            </script>
            <script type="text/javascript">
                _uacct = "UA-2327547-1";
                urchinTracker();
            </script>
    
        </body>
    
    </html>
     
    Monday, August 20, 2007 6:41 AM
  • User-2051459559 posted

    Oops! Cancel that, I've just realised my mistake. It's to do with the DIVs that surround my menus. 

    Monday, August 20, 2007 6:46 AM
  • User910519897 posted

    Yeah,

    the old CSS stuff sure makes life complicated for us software engineer types... I find that most of the problems like that are to do with CSS selectors... and I just dont know enough CSS at all... I've enough to do just to get the ASP.NET bits working heh...

    I use the web developer plugin for firefox and the one for IE as well... the one for IE allows you to click on an element and it tells you the class of the element, its ID, its position in the DOM etc.. and makes it pretty easy to figure out what the right selector is... 

    I actually gave up on the CSSAdapters after a while cos we bought third-party controls (telerik, infragistics etc) and I just use their menu's because they have a load of pre-styled themes included in-the-box (so to speak) which means my meagre graphic design abilites aren't on show.. heh...

     HTH

    Vida 

    Monday, August 20, 2007 10:04 AM
  • User443124764 posted

    I figure out a simpler way!

    The concept is as follows:

    1. When the user clicks on the first menu, save the Menu1.SelectedItem reference into a session or something.
    2. When the user clicks on the second menu, set the saved reference selected property to true

    but for some reasons I was not able to save an object reference so I had to tweak the approach:

    1. When the user clicks on the first menu, save the Menu1.SelectedItem.DataPath (or the index count of the selected item) into a session.  or something such as lastTopMenuItemDataPath
    2. When the user clicks on the second menu, select the menu item from the first menu that matches the first menu. 

    Having said the solution, here is the code:

    For the master page:
    <?xml:namespace prefix = asp /><asp:SiteMapDataSource class=st id="<asp:SiteMapDataSource class=st id=" 

    <asp:Menu ID="Menu2" runat="server" DataSourceID="SiteMapDataSource2" MaximumDynamicDisplayLevels="0">
        <StaticMenuItemStyle CssClass="menuItem" />
        <StaticSelectedStyle CssClass="menuItemSelected" />
        <StaticHoverStyle CssClass="menuItemHover" />
    </asp:Menu>
    <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" StartingNodeOffset="1" />
    
    <asp:Menu ID="Menu1" OnPreRender="setRef" runat="server" DataSourceID="SiteMapDataSource1" MaximumDynamicDisplayLevels="0" Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="menuItem" />
        <StaticSelectedStyle CssClass="menuItemSelected" />
        <StaticHoverStyle CssClass="menuItemHover" />
    </asp:Menu>
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"  />
    
    <asp:ContentPlaceHolder OnPreRender="getRef" ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
      </asp:SiteMapDataSource></asp:SiteMapDataSource>

    <asp:SiteMapDataSource class=st><asp:SiteMapDataSource class=st>The master page code behind:</asp:SiteMapDataSource></asp:SiteMapDataSource>

    <asp:SiteMapDataSource class=st><asp:SiteMapDataSource class=st> 

    public partial class MasterPage : System.Web.UI.MasterPage {
    
        protected void setRef(object sender, EventArgs e) {
            if (Menu1.SelectedItem != null) Session["lastTopMenuItemDataPath"] = Menu1.SelectedItem.DataPath;
        }
        protected void getRef(object sender, EventArgs e) {
            string ldp = Session["lastTopMenuItemDataPath"].ToString();
            if(ldp !=null) foreach (MenuItem m in Menu1.Items) m.Selected = (m.DataPath == ldp);
        }
    }
     </asp:SiteMapDataSource></asp:SiteMapDataSource>
    Thursday, August 23, 2007 12:39 PM
  • User-2051459559 posted

    Genius! That's so beautifully simple. I got it working in about 5 minutes. Well done!

    The only complexity I'm now struggling with (which applies to the other method too) is that I want to display a completely separate top menu for the usual "About", "Contact", "FAQ", "Privacy", etc. I've put these into a separate node in my SiteMap, so that they don't get included in the main menu. This works fine except that whatever main menu tab I select prior to clicking on this menu remains active. Can you tell me how to set the selected item in the main menu to "none"?
     

    Thursday, August 23, 2007 2:02 PM
  • User443124764 posted

    I don't understand what you mean but I noticed that when there are no items on the second menu, the first menu should not be displayed. I fixed that in the getRef method

        protected void getRef(object sender, EventArgs e) {
            string ldp = Session["lastTopMenuItemDataPath"] == null ? "" : Session["lastTopMenuItemDataPath"].ToString();
            if (ldp != null) foreach (MenuItem m in Menu1.Items) m.Selected = (m.DataPath == ldp && Menu2.Items.Count!=0);
        }

     

    Here's the complete code:

    Master.css

    body
    {
        font-family:Verdana;
    }
    
    h1{font-size:large;}
    
    .menuItem, .menuItemSelected, .menuItemHover
    {
        display:block;
        border:outset 1px;
        height:30px;
        width:200px;
        vertical-align:middle;
        text-align:center;
        padding:1px;
        padding-top:5px;
        margin:1px;
        background-color:#D7E1F6;
    }
    
    .menuItemSelected{
        background-color:#336699;
        border:inset 1px;
        color:White;
        cursor:default;
    }
    
    .menuItemHover{
        /*background-color:<span class='val'>#<span class='unit'>E0E0E0</span></span>;*/
        color:White;
    }
    
      

    MasterPage.master.cs

    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 MasterPage : System.Web.UI.MasterPage {

        protected void Page_Load(object sender, EventArgs e) {
        }

        protected void setRef(object sender, EventArgs e) {
            if (Menu1.SelectedItem != null) Session["lastTopMenuItemDataPath"] = Menu1.SelectedItem.DataPath;
        }

        protected void getRef(object sender, EventArgs e) {
            string ldp = Session["lastTopMenuItemDataPath"] == null ? "" : Session["lastTopMenuItemDataPath"].ToString();
            if (ldp != null) foreach (MenuItem m in Menu1.Items) m.Selected = (m.DataPath == ldp && Menu2.Items.Count!=0);
        }
    }

      

    I renamed the Default.aspx that uses the master as a main control loader as GKD.aspx

    <% @ Page ValidateRequest="false" MasterPageFile="~/MasterPage.master" Language="C#" AutoEventWireup="true" CodeFile="gkd.aspx.cs" Inherits="_Default" %>
     

    GKD.aspx.cs

    using System;
    using System.Data;
    using System.Configuration;
    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 void Page_Load(object sender, EventArgs e)
        {
            loadControl();
        }
    
    
        public void loadControl() {
            //search for the controlID from the queryString
            string txt = Request.QueryString["ctrlID"];
    
            //choose the corresponding control
            string ctrl2Load = "_notFound.ascx";
            if (txt != null) {
                switch (int.Parse(txt)) {
                    case 1001: ctrl2Load = "_newProject.ascx"; break;
                    case 1002: ctrl2Load = "_newWorkflow.ascx"; break;
                    case 1003: ctrl2Load = "_test.ascx"; break;
                    case 1101: ctrl2Load = "_browseProjects.ascx"; break;
                    case 1103: ctrl2Load = "_WelcomePage.ascx"; break;
                }
            }
    
            //load the control
            string controlPath = "Controls/Gks/";
            ContentPlaceHolder cph = this.Master.FindControl("ContentPlaceHolder1") as ContentPlaceHolder;
    
            UserControl uc = this.LoadControl("Controls/Gks/" + ctrl2Load) as UserControl;
            if ((cph != null) && (uc != null)) {
                cph.Controls.Add(uc);
            }
        }
    
     }
    

     

    Web.sitemap

     

    <?xml version="1.0" encoding="UTF-8"?>
    <siteMap>
      <siteMapNode url="gkd.aspx" title="root">
        <siteMapNode url="gkd.aspx?ctrlID=1000" title="Admin">
          <siteMapNode url="gkd.aspx?ctrlID=1001" title="Create Project"></siteMapNode>
          <siteMapNode url="gkd.aspx?ctrlID=1002" title="Create Workflow"></siteMapNode>
          <siteMapNode url="gkd.aspx?ctrlID=1003" title="test"></siteMapNode>
          <siteMapNode url="gkd.aspx?ctrlID=1004" title="not found"></siteMapNode>
        </siteMapNode>
        <siteMapNode url="gkd.aspx?ctrlID=1100" title="Browse">
          <siteMapNode url="gkd.aspx?ctrlID=1101" title="Browse Projects"></siteMapNode>
          <siteMapNode url="gkd.aspx?ctrlID=1102" title="Browse Workflows"></siteMapNode>
          <siteMapNode url="gkd.aspx?ctrlID=1103" title="Welcome page"></siteMapNode>
          <siteMapNode url="gkd.aspx?ctrlID=1104" title="Two.Four"></siteMapNode>
        </siteMapNode>
      </siteMapNode>
    </siteMap>
    
     
    Friday, August 24, 2007 7:36 AM
  • User-2051459559 posted

    I think our situations are subtly different. I have a "Home" tab (linked to Default.aspx) that can be selected in the main menu, even though it has no sub-menu nodes. Thanks to some experimentation, your advice, and that of others, I have that working fine as well as nearly every other aspect.

    The bit I'm struggling with is clearing all selections when a page (e.g. my FAQ page) which is off the menu structure (under a separate node called TopMenu.aspx) is loaded.

    My SiteMap is as follows (you can see the extra items at the bottom):

    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
      <siteMapNode url="" title=""  description="" >
        <siteMapNode url="MainMenu.aspx" title="Main" description="Main Menu">
          <siteMapNode url="Default.aspx" title="Home" description="Villa Santhi Home Page">
        </siteMapNode>
        <siteMapNode url="Villa.aspx" title="The Villa"  description="About the villa, accommodation, facilities and grounds" >
          <siteMapNode url="Villa_Accommodation.aspx" title="Accommodation"  description="Room details"/>
          <siteMapNode url="Villa_Facilities.aspx" title="Facilities"  description="Details of the furnishings and equipment"/>
          <siteMapNode url="Villa_Grounds.aspx" title="Grounds"  description="Details of the gardens and pool"/>
        </siteMapNode>
        <siteMapNode url="Setting.aspx" title="The Setting"  description="About Bali, Lovina, Local Amenities, Activities and Attractions">
          <siteMapNode url="Setting_Bali.aspx" title="Bali"  description="About the island of Bali"/>
          <siteMapNode url="Setting_Lovina.aspx" title="Lovina"  description="About the Lovina area"/>
          <siteMapNode url="Setting_Amenities.aspx" title="Amenities"  description="Local shops, bars and restaurants"/>
          <siteMapNode url="Setting_Attractions.aspx" title="Attractions"  description="Things to see"/>
          <siteMapNode url="Setting_Activities.aspx" title="Activities"  description="Things to do"/>
        </siteMapNode>
        <siteMapNode url="Service.aspx" title="The Service"  description="Our services, including dining, spa, excursions and transport">
          <siteMapNode url="Service_Dining.aspx" title="Dining"  description="Our food and drink service"/>
          <siteMapNode url="Service_Spa.aspx" title="Spa"  description="Our massage and beauty treatments"/>
          <siteMapNode url="Service_Excursions.aspx" title="Excursions"  description="Guided tours of Bali island"/>
          <siteMapNode url="Service_Transport.aspx" title="Transport"  description="Helping you get around Bali and Lovina"/>
          <siteMapNode url="Service_Concierge.aspx" title="Concierge"  description="Helping you make the most of your time in Bali"/>
        </siteMapNode>
        <siteMapNode url="Testimonials.aspx" title="Testimonials"  description="What our guests say about us">
        </siteMapNode>
        <siteMapNode url="Gallery.aspx" title="Gallery"  description="Photos, videos and 360-degree panoramas">
          <siteMapNode url="Gallery_Photos.aspx" title="Photos"  description="Photographs of Bali and the villa"/>
          <siteMapNode url="Gallery_Videos.aspx" title="Videos"  description="Video tours of the villa"/>
          <siteMapNode url="Gallery_Panoramas.aspx" title="Panoramas"  description="360-degree panoramic views of the villa"/>
        </siteMapNode>
        <siteMapNode url="Booking.aspx" title="Booking"  description="Prices, availability and reservations">
        </siteMapNode>
      </siteMapNode>
        <siteMapNode url="TopMenu.aspx" title="Top Menu"  description="Top Menu">
          <siteMapNode url="About.aspx" title="About Us"  description="Background information on Villa Santhi" />
          <siteMapNode url="Contact.aspx" title="Contact Us"  description="Send us a message" />
          <siteMapNode url="FAQ.aspx" title="FAQ"  description="Frequently Asked Questions" />
          <siteMapNode url="Terms.aspx" title="Terms"  description="Our terms of stay" />
          <siteMapNode url="Privacy.aspx" title="Privacy"  description="Our privacy policy" />
        </siteMapNode>
      </siteMapNode>
    </siteMap>
    
    So, when someone clicks on "About Us" or "Contact Us" in my top menu (which is totally separate and distinct from the main menu/sub-menu structure), I want to display the selected page with *none* of the main menu tabs selected.
    See what I mean? Your modified code almost did the trick, except that it also applied when selecting "Home" (as this has no sub-nodes).
    Any ideas? 
    Friday, August 24, 2007 11:13 AM
  • User-2051459559 posted

    Cancel that, I've managed to work it out. Thanks again for all your help.

    If anyone's interested, here is my VB.NET code:

    Public Class MasterPage
        Inherits System.Web.UI.MasterPage
    
        Protected Sub setRef(ByVal sender As Object, ByVal e As EventArgs)
            If (Not (PrimaryNav.SelectedItem) Is Nothing) Then
                Session("lastTopMenuItemDataPath") = PrimaryNav.SelectedItem.DataPath
            End If
        End Sub
    
        Protected Sub getRef(ByVal sender As Object, ByVal e As EventArgs)
            Dim ldp As String = Session("lastTopMenuItemDataPath").ToString
            If (Not (ldp) Is Nothing) Then
                For Each m As MenuItem In PrimaryNav.Items
                    If SecondaryNav.Items.Count <> 0 Then
                        m.Selected = m.DataPath = ldp
                    End If
                Next
            End If
        End Sub
    End Class
    
      
    Friday, August 24, 2007 11:27 AM
  • User-2051459559 posted

    I thought this was all done, but I've come across a problem:

    If I click on one of my main menu tabs, and then select a sub-menu item, it all works fine. But if I go away for a while (say 10 minutes) and then, when I get back, click on another sub-menu item, the main menu tab selection is lost. I guess this is to do with the session variable timing out. Presumably session timeouts are configurable, but I wonder if there may be a better (simpler) way...

    How about changing the OnPreRender event behind the ContentPlaceHolder to simply set the main menu selected item to the parent of the currently-selected sub-menu item, if one exists? I'm not sure how to code it, but my pseudo code is as follows:

    PrimaryNav.SelectedItem = SecondaryNav.SelectedItem.Parent
    
    Does that make sense? 
    Tuesday, August 28, 2007 10:00 AM
  • User443124764 posted

    good point Android. I guess we would have to save the value into a state or viewstate instead of a session. Another approach is to save the last selected item into a hidden field and then request it with the typical form.request or something

    Tuesday, August 28, 2007 2:08 PM
  • User-2051459559 posted
    Or maybe we don't need to save it at all. That's what I'm hoping. Couldn't we just work it out when we need to know it? By identifying the parent of the current sub-menu item? That would seem simplest, but maybe I'm missing something.
    Wednesday, August 29, 2007 5:59 AM
  • User443124764 posted

    I agree. That was my original aproach but I was not able to figure that out. Please let me know if you found the way.

    Migrating from asp to asp.net seems to me like learning how to ride a motorcycle when I already know how to ride a bicycle. Some times I try to pedal the motorcycle!

    Wednesday, August 29, 2007 10:58 AM
  • User1279666338 posted

    Hi,

     I have to implement exactly the same requirement i.e Parent menu Horizontal and Child Menu Vertical.

     Can you pelase give me the steps through whihc i can implement or point to any existing article.

     Thanks in Advance.

    Tuesday, September 2, 2008 2:19 PM
  • User89553585 posted

    I thought this was all done, but I've come across a problem:

    If I click on one of my main menu tabs, and then select a sub-menu item, it all works fine. But if I go away for a while (say 10 minutes) and then, when I get back, click on another sub-menu item, the main menu tab selection is lost. I guess this is to do with the session variable timing out. Presumably session timeouts are configurable, but I wonder if there may be a better (simpler) way...

     Reviving an old post, but this could be accomplished by writing the variable into the url instead of a session

    Tuesday, September 23, 2008 5:59 PM
  • User820633955 posted

     vidapura,

     This is really good stuff. I had my menu setup using the CSS Friendly Control Adapter but just the default where the sub-navigation appeared as a flyout below the primary navigation. I really wanted the sub-navigation in a separate "div" on the page like you have described, but I seem to be having a problem. When I introduced the second SiteMap DataSource and second Menu I no longer have my sub-navigation anywhere. I used the same configuration for SiteMap DataSource and Menu shown above. Below is an example of my web.sitemap. Do you see anything abnormal?

      <?xml version="1.0" encoding="utf-8" ?>
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
        <siteMapNode url="" title="" description="">
            <siteMapNode url="" title="HOME" description="">
                <siteMapNode url="~/Home/Home_1.aspx" title="HOME_1" description=""></siteMapNode>
                <siteMapNode url="~/Home/Home_2.aspx" title="HOME_2" description=""></siteMapNode>
                <siteMapNode url="~/Home/Home_3.aspx" title="HOME_3" description=""></siteMapNode>
            </siteMapNode>
            <siteMapNode url="" title="PERSONAL" description="">
                <siteMapNode url="~/Personal/Personal_1.aspx" title="PERSONAL_1" description=""></siteMapNode>
                <siteMapNode url="~/Personal/Personal_2.aspx" title="PERSONAL_2" description=""></siteMapNode>
                <siteMapNode url="~/Personal/Personal_3.aspx" title="PERSONAL_3" description=""></siteMapNode>
            </siteMapNode>
            <siteMapNode url="" title="APPLICATIONS" description="">
                <siteMapNode url="~/Applications/Applications_1.aspx" title="APPLICATIONS_1" description=""></siteMapNode>
                <siteMapNode url="~/Applications/Applications_2.aspx" title="APPLICATIONS_2" description=""></siteMapNode>
                <siteMapNode url="~/Applications/Applications_3.aspx" title="APPLICATIONS_3" description=""></siteMapNode>
            </siteMapNode>
            <siteMapNode url="" title="DOCUMENTS" description="">
                <siteMapNode url="~/Documents/Documents_1.aspx" title="DOCUMENTS_1" description=""></siteMapNode>
                <siteMapNode url="~/Documents/Documents_2.aspx" title="DOCUMENTS_2" description=""></siteMapNode>
                <siteMapNode url="~/Documents/Documents_3.aspx" title="DOCUMENTS_3" description=""></siteMapNode>
            </siteMapNode>
            <siteMapNode url="" title="FORUM" description="">
                <siteMapNode url="~/Forum/Forum_1.aspx" title="FORUM_1" description=""></siteMapNode>
                <siteMapNode url="~/Forum/Forum_2.aspx" title="FORUM_2" description=""></siteMapNode>
                <siteMapNode url="~/Forum/Forum_3.aspx" title="FORUM_3" description=""></siteMapNode>
            </siteMapNode>
            <siteMapNode url="" title="IT" description="">
                <siteMapNode url="~/IT/IT_1.aspx" title="IT_1" description=""></siteMapNode>
                <siteMapNode url="~/IT/IT_2.aspx" title="IT_2" description=""></siteMapNode>
                <siteMapNode url="~/IT/IT_3.aspx" title="IT_3" description=""></siteMapNode>
            </siteMapNode>
            <siteMapNode url="" title="QUALITY" description="">
                <siteMapNode url="~/Quality/Quality_1.aspx" title="QUALITY_1" description=""></siteMapNode>
                <siteMapNode url="~/Quality/Quality_2.aspx" title="QUALITY_2" description=""></siteMapNode>
                <siteMapNode url="~/Quality/Quality_3.aspx" title="QUALITY_3" description=""></siteMapNode>
            </siteMapNode>
            <siteMapNode url="" title="SAFETY" description="">
                <siteMapNode url="~/Safety/Safety_1.aspx" title="SAFETY_1" description=""></siteMapNode>
                <siteMapNode url="~/Safety/Safety_2.aspx" title="SAFETY_2" description=""></siteMapNode>
                <siteMapNode url="~/Safety/Safety_3.aspx" title="SAFETY_3" description=""></siteMapNode>
            </siteMapNode>
            <siteMapNode url="" title="POLICY" description="">
                <siteMapNode url="~/Policy/Policy_1.aspx" title="POLICY_1" description=""></siteMapNode>
                <siteMapNode url="~/Policy/Policy_2.aspx" title="POLICY_2" description=""></siteMapNode>
                <siteMapNode url="~/Policy/Policy_3.aspx" title="POLICY_3" description=""></siteMapNode>
            </siteMapNode>
            <siteMapNode url="" title="CRM" description="">
                <siteMapNode url="~/CRM/CRM_1.aspx" title="CRM_1" description=""></siteMapNode>
                <siteMapNode url="~/CRM/CRM_2.aspx" title="CRM_2" description=""></siteMapNode>
                <siteMapNode url="~/CRM/CRM_3.aspx" title="CRM_3" description=""></siteMapNode>
            </siteMapNode>
        </siteMapNode>
    </siteMap>

    Tuesday, November 11, 2008 3:39 PM
  • User-581178909 posted

    I was looking for a coding solution to this a while ago until I realised that I had no "coding" reason to "select" the Parent node.  All I wanted to do was have the Parent node show it was selected, i.e. colour change/whatever.

     The simplest way to achieve this is conditional CSS .  I can't remember exactly which CSS operators you use but I think it's something like:

    li.HasChildren>li.selected{color: indigo/scarlet/puce}

    The li.HasChildren is the parent node you want to select.  The li.selected is the child node which is selected.  The > means that the css will only apply if the parent node has a child of the type li.selected.

     

    Obviously the .HasChildren and .Selected are the wrong terms,you'll need to replace them with the correct .AspNetMenu classes which you can determine for a "View Source".

     

    As for the conditional CSS I would look it up, I'm not too sure > is the correct chararcter, but it works as described.

    Friday, November 14, 2008 8:29 AM
  • User1739690689 posted

     Hi,

    Is it  possible to display the treeview in a top-bottom style, instead of the left-right style, if yes how, no is there any other way, i m trying hard, in case you have any idea already please let me know, and thank you in advance.

    Thursday, May 7, 2009 2:05 AM
  • User2013729832 posted

    Hello Vidapura:

    I'm working on an ASP.NET website and would like to achieve this: I guess same thing as you. actually I want to have a horizontal parent menu bar with different menu each having dropdown menus as well. When a user clicks on any dropdown menu. I would like all the dropdown menu to be shown a vertical left sidebar while showing the actual dropdown menu, which was selected by the user. I decided to use C#.

    Please you may share your source code here or send it to my private email jkuipo@rocketmail.com if you don't mind. I may so the styling myself, but highly need the code that does the task. 

    Many Thanks.

    Saturday, November 29, 2014 7:16 PM