Menu Expand on Click

Question

0.00/5 (No votes)

See more:

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 7:20am

GeoNav

Add a Solution

Comments

Sergey Alexandrovich Kryukov 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 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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Anurag Sarkar · Accepted Answer · 2013-01-30T09:17:00

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 tag.

Put This code is the Aspx page.

XML

<%@ 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 .

C#

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.