locked
how to highlight the selected asp menu item? RRS feed

  • Question

  • User149956399 posted


    hi,

    I have one asp leftmenu control in my project.when I select one menu item of menu control that Should be highlight.


    how to highlight the selected asp menu item????

    please reply me?


    Thanks in advance.



    Thursday, August 12, 2010 2:21 AM

Answers

  • User713056278 posted

    Hi,

    According to your description,I give the sample,it shows how to highlight the menu item which  clicked.Hope it can help you.

    I use XML files as the data file.

    1.Code in XML(named 'XMLFile.xml')

    <?xml version="1.0" encoding="utf-8" ?>
    <lifangWeb text="Home Page" url="" >
      <main text="About" url="" >
        <page text="About1" url=""></page>
        <page text="About2" url=""></page>
        <page text="About3" url=""></page>
        <page text="About4" url=""></page>
        <page text="About5" url=""></page>
      </main>
      <main text="News" url="" >
        <page text="News1" url=""></page>
        <page text="News2" url=""></page>
        <page text="News3" url=""></page>
      </main>
      <main text="Text" url="" >
        <page text="Text1" url=" "></page>
        <page text="Text2" url=" "></page>
        <page text="Text3" url=" "></page>
      </main>
    </lifangWeb>
    

    2.Code in .cs:

     

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="menu_div">
            <asp:Menu ID="menu" runat="server" Width="760px" DisappearAfter="0" StaticSubMenuIndent="10px"
                StaticEnableDefaultPopOutImage="False" Orientation="Horizontal" StaticDisplayLevels="2"
                DataSourceID="xmldatasource" ItemWrap="True">
                <StaticHoverStyle Height="34px" Width="95px" BackColor="#93C6FF" />
                <StaticMenuItemStyle HorizontalPadding="8px" Width="95px" Height="34px" CssClass="menustyle"
                    ForeColor="Black" VerticalPadding="2px" />
                <DynamicMenuStyle Width="95px" />
                <DynamicSelectedStyle BackColor="#507CD1"></DynamicSelectedStyle>
                <DynamicHoverStyle BackColor="#6597F0" ForeColor="White" Font-Bold="True" />
                <DynamicMenuItemStyle BackColor="#0A398D" Width="95px" HorizontalPadding="15px" VerticalPadding="6px"
                    ForeColor="White" Font-Size="12px" />
                <DataBindings>
                    <asp:MenuItemBinding DataMember="lifangWeb" TextField="text" Text="menun0" NavigateUrlField="url">
                    </asp:MenuItemBinding>
                    <asp:MenuItemBinding DataMember="main" TextField="text"></asp:MenuItemBinding>
                    <asp:MenuItemBinding DataMember="page" NavigateUrlField="url" TextField="text"></asp:MenuItemBinding>
                </DataBindings>
            </asp:Menu>
            <asp:XmlDataSource runat="server" ID="xmldatasource" DataFile="XMLFile.xml"></asp:XmlDataSource>
        </div>
        </form>
        <script language="javascript" type="text/javascript">
    function __doPostBack(eventTarget, eventArgument) {
                var xm = eventArgument.split('\\');
                if (xm != null && xm.length < 3) {
                    Menu_UnXM(document.getElementById("menun0"));
                    Menu_UnXM(document.getElementById("menun1"));
                    Menu_UnXM(document.getElementById("menun2"));
                    Menu_UnXM(document.getElementById("menun3"));
                    if (xm.length == 1) {
                        var current = document.getElementById(xm[0]);
                        Menu_Xm(current);
                    }
                    else {
                        switch (xm[1].toString()) {
                            case "About":
                                Menu_Xm(document.getElementById("menun1"));
                                break;
                            case "News":
                                Menu_Xm(document.getElementById("menun2"));
                                break;
                            case "Text":
                                Menu_Xm(document.getElementById("menun3"));
                                break;
                        }
                    }
                }
                else {
                    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
                        theForm.__EVENTTARGET.value = eventTarget;
                        theForm.__EVENTARGUMENT.value = eventArgument;
                        theForm.submit();
                    }
                }
            }
            function Menu_Xm(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var data = Menu_GetData(item);
                if (!data) {
                    return null;
                }
                var nodeTable = WebForm_GetElementByTagName(node, "table");
                if (data.staticHoverClass) {
                    nodeTable.hoverClass = data.staticHoverClass;
                    WebForm_AppendToClassName(nodeTable, data.staticHoverClass);
                }
                node = nodeTable.rows[0].cells[0].childNodes[0];
                if (data.staticHoverHyperLinkClass) {
                    node.hoverHyperLinkClass = data.staticHoverHyperLinkClass;
                    WebForm_AppendToClassName(node, data.staticHoverHyperLinkClass);
                }
                return node;
            }
            function Menu_Unhover(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var nodeTable = WebForm_GetElementByTagName(node, "table");
                
                node = nodeTable.rows[0].cells[0].childNodes[0];
                
                Menu_Collapse(node);
            }
            function Menu_UnXM(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var nodeTable = WebForm_GetElementByTagName(node, "table");
                if (nodeTable.hoverClass) {
                    WebForm_RemoveClassName(nodeTable, nodeTable.hoverClass);
                }
                node = nodeTable.rows[0].cells[0].childNodes[0];
                if (node.hoverHyperLinkClass) {
                    WebForm_RemoveClassName(node, node.hoverHyperLinkClass);
                }
                Menu_Collapse(node);
            }
            function Menu_HoverRoot(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var data = Menu_GetData(item);
                if (!data) {
                    return null;
                }
                var nodeTable = WebForm_GetElementByTagName(node, "table");
    
                node = nodeTable.rows[0].cells[0].childNodes[0];
               
                return node;
            }
            function Menu_HoverDynamic(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var data = Menu_GetData(item);
                if (!data) return;
                var nodeTable = WebForm_GetElementByTagName(node, "table");
                
                node = nodeTable.rows[0].cells[0].childNodes[0];
                
                if (data.disappearAfter >= 200) {
                    __disappearAfter = data.disappearAfter;
                }
                Menu_Expand(node, data.horizontalOffset, data.verticalOffset);
            }
    
        </script>
    </body>
    </html>



     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 17, 2010 2:19 AM

All replies

  • User1154043639 posted

    Solution 1

    You can use StaticSelectedStyle and DynamicSelectedStyle

    <title>Snippet</title>

    <asp:Menu runat="server" ID="menu">
        <StaticSelectedStyle BorderColor="Red" />
        <DynamicSelectedStyle BorderColor="Blue" />
    </asp:Menu>

    Solution 2:

    You can use a CSS Adaptor

    Example:

    More information

    Thursday, August 12, 2010 5:25 AM
  • User-1498334129 posted

    It depends on what kind of menu. If you are using a standad menu control, styles will  be the answer. If you are using hyperlinks, you can change the style of the hyperlinks using javascript

    Thursday, August 12, 2010 5:48 AM
  • User-1954435776 posted

    Parthika,

    You can use java script and CSS. assume your menu item has id "menu1" .

    in menu element onclientclick=highlight().

    function highlight()
    {
    var selItem=document.getElementById("menu1");
    selItem.style.bgcolor='red';
    }

    hope this will help......

    Thanks,

    Vijayan

    Thursday, August 12, 2010 7:07 AM
  • User-1567482218 posted

    Check this simple Tab Menu example that detects the hyperlink that matches the page visitor is on using JavaScript and highlights it - http://www26.brinkster.com/mvark/codegallery/tabmenu.aspx

    Demo - http://www26.brinkster.com/mvark/dyna/Page1.aspx


    Thursday, August 12, 2010 7:14 AM
  • User1283497924 posted

    Hi,

    Please check the link this may help u:

    http://www.obout.com/t2/eParent.aspx

    Thursday, August 12, 2010 7:18 AM
  • User149956399 posted

    I have a vertical asp menu control in User control(.ascx page),

    Cities

    Locations

    Categories

    ......

    .... like this.

    When I selected ''Cities'' Menu Item Change  the backgroundcolor of the selected item(cities) ,  the changed color should be  present untill User selected another item and same process for other menu items also.I call the User control in My ''masterpage''.

    please tell me how to highlight the selected asp menu item???

    Thanks in advance.




    Thursday, August 12, 2010 9:25 AM
  • User149956399 posted

    I made some changes in my post.I have a  asp menu control i(Position:Vertical)The menu items are

    Cities

    Locations

    Categories

    ......

    .... like this.

    When I selected ''Cities'' Menu Item Change  the backgroundcolor of the selected item(cities) and stay that background color.

    please tell me how to highlight the selected asp menu item on menu item Click & ???

    Thanks in advance.

     

    Monday, August 16, 2010 9:45 AM
  • User713056278 posted

    Hi,

    According to your description,I give the sample,it shows how to highlight the menu item which  clicked.Hope it can help you.

    I use XML files as the data file.

    1.Code in XML(named 'XMLFile.xml')

    <?xml version="1.0" encoding="utf-8" ?>
    <lifangWeb text="Home Page" url="" >
      <main text="About" url="" >
        <page text="About1" url=""></page>
        <page text="About2" url=""></page>
        <page text="About3" url=""></page>
        <page text="About4" url=""></page>
        <page text="About5" url=""></page>
      </main>
      <main text="News" url="" >
        <page text="News1" url=""></page>
        <page text="News2" url=""></page>
        <page text="News3" url=""></page>
      </main>
      <main text="Text" url="" >
        <page text="Text1" url=" "></page>
        <page text="Text2" url=" "></page>
        <page text="Text3" url=" "></page>
      </main>
    </lifangWeb>
    

    2.Code in .cs:

     

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="menu_div">
            <asp:Menu ID="menu" runat="server" Width="760px" DisappearAfter="0" StaticSubMenuIndent="10px"
                StaticEnableDefaultPopOutImage="False" Orientation="Horizontal" StaticDisplayLevels="2"
                DataSourceID="xmldatasource" ItemWrap="True">
                <StaticHoverStyle Height="34px" Width="95px" BackColor="#93C6FF" />
                <StaticMenuItemStyle HorizontalPadding="8px" Width="95px" Height="34px" CssClass="menustyle"
                    ForeColor="Black" VerticalPadding="2px" />
                <DynamicMenuStyle Width="95px" />
                <DynamicSelectedStyle BackColor="#507CD1"></DynamicSelectedStyle>
                <DynamicHoverStyle BackColor="#6597F0" ForeColor="White" Font-Bold="True" />
                <DynamicMenuItemStyle BackColor="#0A398D" Width="95px" HorizontalPadding="15px" VerticalPadding="6px"
                    ForeColor="White" Font-Size="12px" />
                <DataBindings>
                    <asp:MenuItemBinding DataMember="lifangWeb" TextField="text" Text="menun0" NavigateUrlField="url">
                    </asp:MenuItemBinding>
                    <asp:MenuItemBinding DataMember="main" TextField="text"></asp:MenuItemBinding>
                    <asp:MenuItemBinding DataMember="page" NavigateUrlField="url" TextField="text"></asp:MenuItemBinding>
                </DataBindings>
            </asp:Menu>
            <asp:XmlDataSource runat="server" ID="xmldatasource" DataFile="XMLFile.xml"></asp:XmlDataSource>
        </div>
        </form>
        <script language="javascript" type="text/javascript">
    function __doPostBack(eventTarget, eventArgument) {
                var xm = eventArgument.split('\\');
                if (xm != null && xm.length < 3) {
                    Menu_UnXM(document.getElementById("menun0"));
                    Menu_UnXM(document.getElementById("menun1"));
                    Menu_UnXM(document.getElementById("menun2"));
                    Menu_UnXM(document.getElementById("menun3"));
                    if (xm.length == 1) {
                        var current = document.getElementById(xm[0]);
                        Menu_Xm(current);
                    }
                    else {
                        switch (xm[1].toString()) {
                            case "About":
                                Menu_Xm(document.getElementById("menun1"));
                                break;
                            case "News":
                                Menu_Xm(document.getElementById("menun2"));
                                break;
                            case "Text":
                                Menu_Xm(document.getElementById("menun3"));
                                break;
                        }
                    }
                }
                else {
                    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
                        theForm.__EVENTTARGET.value = eventTarget;
                        theForm.__EVENTARGUMENT.value = eventArgument;
                        theForm.submit();
                    }
                }
            }
            function Menu_Xm(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var data = Menu_GetData(item);
                if (!data) {
                    return null;
                }
                var nodeTable = WebForm_GetElementByTagName(node, "table");
                if (data.staticHoverClass) {
                    nodeTable.hoverClass = data.staticHoverClass;
                    WebForm_AppendToClassName(nodeTable, data.staticHoverClass);
                }
                node = nodeTable.rows[0].cells[0].childNodes[0];
                if (data.staticHoverHyperLinkClass) {
                    node.hoverHyperLinkClass = data.staticHoverHyperLinkClass;
                    WebForm_AppendToClassName(node, data.staticHoverHyperLinkClass);
                }
                return node;
            }
            function Menu_Unhover(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var nodeTable = WebForm_GetElementByTagName(node, "table");
                
                node = nodeTable.rows[0].cells[0].childNodes[0];
                
                Menu_Collapse(node);
            }
            function Menu_UnXM(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var nodeTable = WebForm_GetElementByTagName(node, "table");
                if (nodeTable.hoverClass) {
                    WebForm_RemoveClassName(nodeTable, nodeTable.hoverClass);
                }
                node = nodeTable.rows[0].cells[0].childNodes[0];
                if (node.hoverHyperLinkClass) {
                    WebForm_RemoveClassName(node, node.hoverHyperLinkClass);
                }
                Menu_Collapse(node);
            }
            function Menu_HoverRoot(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var data = Menu_GetData(item);
                if (!data) {
                    return null;
                }
                var nodeTable = WebForm_GetElementByTagName(node, "table");
    
                node = nodeTable.rows[0].cells[0].childNodes[0];
               
                return node;
            }
            function Menu_HoverDynamic(item) {
                var node = (item.tagName.toLowerCase() == "td") ?
            item :
            item.cells[0];
                var data = Menu_GetData(item);
                if (!data) return;
                var nodeTable = WebForm_GetElementByTagName(node, "table");
                
                node = nodeTable.rows[0].cells[0].childNodes[0];
                
                if (data.disappearAfter >= 200) {
                    __disappearAfter = data.disappearAfter;
                }
                Menu_Expand(node, data.horizontalOffset, data.verticalOffset);
            }
    
        </script>
    </body>
    </html>



     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 17, 2010 2:19 AM