Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET menu
Is it possible to expand menu items on mouse click and not on mouse hover in an aspnet 3.5 website? I got some suggestions using javascript, but that mixed up the entire menu itself.
If this is not possible or advisable, are there any alternatives?
Posted 24-Jan-13 8:20am
GeoNav745
Comments
Sergey Alexandrovich Kryukov at 24-Jan-13 14:26pm
   
I personally would even prefer if you did it on click and encourage to do so. And it's absolutely possible, only I don't know the component you use for menu, so I cannot give you further advice; if I did it from scratch, I would not see any problem.
—SA
GeoNav at 30-Jan-13 11:48am
   
Thanks for the comment. I am using asp:menu control. Is it possible for you to share your approach?

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I am trying it please check and tell that if its work or not.Its working for me.
 
The Java Script Code is between the <script></script> tag.
 
Put This code is the Aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Edit._Default" %>
 
<!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" >
<head runat="server">
    <title>Untitled Page</title>
    <script>
    function addClickBehavior(menuTable)
{
var tbody = menuTable.getElementsByTagName("TBODY")[0];
var tr = tbody.getElementsByTagName("TR")[0];
 
for(var i = 0; i < tr.childNodes.length; i++)
{
    var td = tr.childNodes[i];
    if(td.tagName && td.tagName.toLowerCase() == 'td')
    {
        var anchor = td.getElementsByTagName("A")[0];
        if(anchor)
        {
 
                var onClick = td.onmouseover;
                td.onclick =
                (function (el, method){
                   return function(evt){
                          method.call(el);
                          if(window.event) {
                              evt = window.event
                        }
                        evt.cancelBubble = true;
                      };
                                    })(td, onClick);
                td.onmouseover =
                (function (el){
                   return function(){
                          Menu_HoverRoot(el);
                      };
                      })(td);
                //add cursor style
                anchor.style.cursor = "default";
                anchor.onclick = function(){return false;};
                //td.onmouseout = null;
        }
    }
}
}
function WebForm_RemoveClassName(element, className) {
var current = element.className;
var oldLength = -1;
 
if (current) {
    while(oldLength != current.length)
    {
        if (current.substring
          (current.length - className.length - 1,
           current.length) == ' ' + className) {
            element.className =
             current.substring
             (0, current.length - className.length - 1);
            oldLength = current.length;
            current = element.className;
            continue;
        }
        if (current == className) {
            element.className = "";
            oldLength = current.length;
            current = element.className;
            continue;
        }
        var index = current.indexOf(' ' + className + ' ');
        if (index != -1) {
            element.className =
             current.substring
             (0, index) +
             current.substring
              (index + className.length + 2, current.length);
            oldLength = current.length;
            current = element.className;
            continue;
        }
        if (current.substring
                      (0, className.length) == className + ' ') {
            element.className =
             current.substring
                      (className.length + 1, current.length);
        }
        current = element.className;
        oldLength = current.length;
    }
}
}
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");
if (data.staticHoverClass) {
    //avoids adding the same class twice

    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;
}
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <asp:Menu ID="Menu1" runat="server" Height="34px" Orientation="Horizontal"
            Width="869px" onprerender="Menu1_PreRender">
            <Items>
                <asp:MenuItem Text="Home" Value="Home">
                    <asp:MenuItem Text="Next Home" Value="Next Home"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="About US" Value="About US"></asp:MenuItem>
                <asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem>
            </Items>
        </asp:Menu>
 
    </div>
    </form>
</body>
</html>
 

Now go to the Cs page click the PreRender Event of the Menu and paste the below code .
 
protected void Menu1_PreRender(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterStartupScript
(Page.GetType(), "addClickBehavior",
"addClickBehavior(document.getElementById('" +
Menu1.ClientID + "'));", true);
        }
 

Thanks.I hope this will help.
I have Inculded the Java Script portion in the aspx page itself.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 5,170
1 DamithSL 4,357
2 Maciej Los 3,750
3 Kornfeld Eliyahu Peter 3,470
4 Sergey Alexandrovich Kryukov 2,851


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 30 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100