Menu Styling Problem RRS feed

  • Question

  • User608688243 posted

    I apologise if I'm being daft and this question has already been answered but I can't find a solution and need some help!  I'm completely new to .NET, 1 week in fact, and I have this project that needs to be completed asap.  My problem is this...

    A designer has passed me an html website that needs some functionality.  The first thing I did was to break the pages up into master and content pages.  So far so good.  I then tried to recreate the navigation menu of the original design and this is where I ran into problems.  I read about the css adapter and thought this would be ideal to recreate the css based design I had been provided with.  I did manage to recreate the original menu, basing it on the simple css adapter menu example, however when I added the NavigateURL property the current selected page tab is no longer highlighted

    Here is what I've done.  I've removed the NavigateURL property from the Home tab so you can see what I'm trying to achieve


    I also need the current page menu tab selected when the page is initially loaded rather than waiting for the menu being clicked.  I'm no doubt going around this problem all wrong but like I said, this is all incredibly new to me.  Any advice or tips would be greatly appreciated


    Here is the code:

    <asp:Menu ID="main_nav" runat="server" Orientation="Horizontal" CssSelectorClass="NavigationMenu">


    <asp:MenuItem NavigateUrl="Default.aspx" Text="Home" />

    <asp:MenuItem NavigateUrl="About.aspx" Text="About Us" />

    <asp:MenuItem NavigateUrl="Student.aspx" Text="Student Life" />

    <asp:MenuItem NavigateUrl="Events.aspx" Text="Corporate Events" />

    <asp:MenuItem NavigateUrl="Connections.aspx" Text="Unified Connections" />

    <asp:MenuItem NavigateUrl="Clients.aspx" Text="Clients" />

    <asp:MenuItem NavigateUrl="Team.aspx" Text="The Team" />

    <asp:MenuItem NavigateUrl="Contact.aspx" Text="Contact" />




    and the css


    .NavigationMenu li {margin:0 3px 0 0; margin-top:20px;} /* all list items */

    .NavigationMenu li:hover {background: Black;} /* list items being hovered over */

    .NavigationMenu a {padding:10px 11px; margin:0;text-decoration:none; font-size:15px;font-weight:bold; color:#332344; background:#ccc url(../i/back-nav.jpg) repeat-x 0 0;} /* all anchors and spans (nodes with no link) */

    .NavigationMenu li:hover a {background:#F8F9F9;} /* hovered text */

    .NavigationMenu .AspNet-Menu-Selected,

    .NavigationMenu li:hover a.AspNet-Menu-Selected

    {background:#332344; color:#fff;} /* this tier is selected */

    Thursday, April 24, 2008 11:02 AM

All replies

  • User608688243 posted

    I managed to find a solution.  Here it is:


    Protected Sub Menu_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Menu.Load

    Select Case SiteMap.CurrentNode.Title

    Case "Home"

    Menu.Items(0).Selected = True

    SiteMap.CurrentNode.ReadOnly = False

    SiteMap.CurrentNode.Title = "Welcome to Unified Events"

    Case "About Us"

    Menu.Items(1).Selected = True

    SiteMap.RootNode.Title = "Home"

    Case "Student Life"

    Menu.Items(2).Selected = True

    SiteMap.RootNode.Title = "Home"

    Case "Corporate Events"

    Menu.Items(3).Selected = True

    SiteMap.RootNode.Title = "Home"

    Case "Unified Connections"

    Menu.Items(4).Selected = True

    SiteMap.RootNode.Title = "Home"

    Case "Clients"

    Menu.Items(5).Selected = True

    SiteMap.RootNode.Title = "Home"

    Case "The Team"

    Menu.Items(6).Selected = True

    SiteMap.RootNode.Title = "Home"

    Case "Contact Us"

    Menu.Items(7).Selected = True

    SiteMap.RootNode.Title = "Home"

    Case "Thankyou"

    Menu.Items(7).Selected = True

    SiteMap.RootNode.Title = "Home"

    Case Else

    Menu.Items(0).Selected = True

    SiteMap.CurrentNode.Title = "Welcome to Unified Events"

    End Select

    End Sub

    Wednesday, April 30, 2008 2:09 AM