Is this possible, with or without the adapaters?

Last post 07-19-2008 6:15 PM by p19101. 7 replies.

Sort Posts:

  • Is this possible, with or without the adapaters?

    07-19-2008, 10:37 AM
    • Loading...
    • p19101
    • Joined on 12-17-2006, 7:54 PM
    • Posts 36

    I have a menucontrol, the menu is horizontal. For each link in the menu I have a picture that has text and background. The page that is active (selected) should swap image in the menu to one with a different text color. And yes I need to do this with images because the font I use is not standard. I've asked this question on several pages but have only gotten suggestions to do it in other ways. I need to do it with images.

     

    I really appreciate any help on this as this is becoming a real headache for me.

  • Re: Is this possible, with or without the adapaters?

    07-19-2008, 11:32 AM
    • Loading...
    • SGWellens
    • Joined on 01-02-2007, 9:27 PM
    • MN, USA
    • Posts 3,026
    • Moderator
      TrustedFriends-MVPs

    You can do it without the adapters using CSS:

        <style type="text/css">
            .Picture1Style
            {
                background-image: url( 'COMPUTER1.png' );
                background-repeat: no-repeat;
            }
            .Picture2Style
            {
                background-image: url( 'COMPUTER2.png' );
                background-repeat: no-repeat;
            }
      
    
        <asp:Menu ID="Menu1" runat="server" Style="z-index: 1; left: 0px; top: 177px; position: absolute;
            height: 233px; width: 152px" onmenuitemclick="Menu1_MenuItemClick">
            <StaticSelectedStyle CssClass="Picture2Style" />
            <StaticMenuItemStyle CssClass="Picture1Style" />
    
     
    Steve Wellens
  • Re: Is this possible, with or without the adapaters?

    07-19-2008, 12:39 PM
    • Loading...
    • p19101
    • Joined on 12-17-2006, 7:54 PM
    • Posts 36

    I might be wrong but I can't specify a different picture for every menu item that way? Using the code above will assign a single picture for all static items and one for selected ones? 

  • Re: Is this possible, with or without the adapaters?

    07-19-2008, 1:07 PM
    Answer
    • Loading...
    • SGWellens
    • Joined on 01-02-2007, 9:27 PM
    • MN, USA
    • Posts 3,026
    • Moderator
      TrustedFriends-MVPs

    p19101:
    I might be wrong...
      No, not this time Smile

     

    This might do it for you:

        protected void Menu1_PreRender(object sender, EventArgs e)
        {
            if (Menu1.SelectedItem == null)
                return;
    
            switch (Menu1.SelectedItem.Value)
            {
                case "aaa":
                    Menu1.StaticSelectedStyle.CssClass = "Picture1Style";
                    break;
                case "bbb":
                    Menu1.StaticSelectedStyle.CssClass = "Picture2Style";
                    break;
            }
        }
    
     
    Steve Wellens
  • Re: Is this possible, with or without the adapaters?

    07-19-2008, 2:08 PM
    • Loading...
    • p19101
    • Joined on 12-17-2006, 7:54 PM
    • Posts 36

    That looks like exactly what I'm looking for, if I could get it to work. The value for the case loop, where is that taken from, the aaa and bbb you had up there? I get no errors so I'm not sure where I'm going wrong, probably something wrong in connecting all the parts to eachother. Let me know if you can spot it... (this is just a test I threw together)

     Masterpage code:

         <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
                StaticDisplayLevels="2">
                <Items>
                    <asp:MenuItem NavigateUrl="0.aspx" Text="New Item" Value="New Item">
                        <asp:MenuItem NavigateUrl="1.aspx" Text="1" Value="1"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="2.aspx" Text="2" Value="2"></asp:MenuItem>
                    </asp:MenuItem>
                </Items>
            </asp:Menu>

     

    Masterpage Code behind:

    using System;
    using System.Collections;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    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;
    using System.Xml.Linq;

    public partial class MasterPage : System.Web.UI.MasterPage
    {
        protected void Menu1_PreRender(object sender, EventArgs e)
        {
            if (Menu1.SelectedItem == null)
            return;

            switch (Menu1.SelectedItem.Value)
            {
                case "1":
                    Menu1.StaticSelectedStyle.CssClass = "style1";
                    break;
                case "2":
                    Menu1.StaticSelectedStyle.CssClass = "style2";
                    break;
            }
        }
    }

     
    CSS code:

    .style1
    {
        background: url(1.jpg)
    }

    .style2
    {
        background: url(2.jpg);
    }

     

    -----------------
     

    Cheers
     

    EDIT: I hadn't loaded the event, I have now but Menu1.SelectedItem remains null...

    EDIT2: Using a Sitemap to provide the nodes it worked, not if I had static nodes added directly in the menucode, very strange. Thanks for the help...
     

  • Re: Is this possible, with or without the adapaters?

    07-19-2008, 5:12 PM
    • Loading...
    • p19101
    • Joined on 12-17-2006, 7:54 PM
    • Posts 36

     I now ran into another problem having to use the sitemap.

     

    The value of items in the sitemap is decided by title. As I want to use images I need to leave title empty hence giving none of my items a value. What would you suggest as a workaround? What are my options apart from a sitemap? It didn't work when I staticly added my items to the menu... 

  • Re: Is this possible, with or without the adapaters?

    07-19-2008, 5:25 PM
    • Loading...
    • SGWellens
    • Joined on 01-02-2007, 9:27 PM
    • MN, USA
    • Posts 3,026
    • Moderator
      TrustedFriends-MVPs

    I don't know if this will help you or not, but you don't have to switch on value.  You could switch on the menu item's Title, URL, Image URL,or anything else in the Menu Item.

     

    Steve Wellens
  • Re: Is this possible, with or without the adapaters?

    07-19-2008, 6:15 PM
    • Loading...
    • p19101
    • Joined on 12-17-2006, 7:54 PM
    • Posts 36

    Thanks, just ran into another problem, what a mess this is. Should probably have looked for another way to do this and skipped the menu control. If I use an XML file to assign the initial images for each item it wont be overwritten by the CSS background image as that one most likely ends up behind the original one instead of replacing it. So I have to assign the individual images to each and every menu item. If I only could assign a CSSClass to each menu item, but I guess it has to be hard. There probably is some easier way to this but no one has been able to tell me what that is and I havn't been able to find it myself either, very frustrating.
     


     

Page 1 of 1 (8 items)
Microsoft Communities
Page view counter