Disable the default hover effect of the ASP.NET menu

How can I disable the default hover effect on my asp.net menu and instead display child items when the parent item is clicked?

I am currently using the pre-built asp.net menu feature and populating menu items from a sitemap data source.

<div class="span2 menu-bar">
                                <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" EnableViewState="false" IncludeStyleBlock="false" 
                                    StaticDisplayLevels="2"  Orientation="Horizontal"  CssClass="row-fluid" DynamicHorizontalOffset="-2" RenderingMode="List">
                                </asp:Menu>
                                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
                            </div>

Your assistance with this issue would be greatly appreciated.

Thank you in advance

jqueryasp.netcss

Answer №1

When the page loads or is ready, insert this line of code: $('#Menu1').find('ul .level2').css('display','none');

By doing this, you will disable the hover effect on that menu. However, you will only be able to open the submenu by setting it to display block. To achieve this, I have written the following lines to trigger onclick of an image inside the menu: $('#Menu1').find('ul .level2').css('display','block');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide for using a CSS variable in a dynamic CSS class within a dynamic component

I'm working with library components and running into an issue with CSS when importing the same component multiple times within a parent component with different styles. import "../myCss.css" const CircleComponent = ({size , color}) => { ...

cssreactjsnext.jsmodulestyles

Accessing dynamic elements in Internet Explorer 7 and 8 using jQuery

I have generated an HTML element dynamically using jQuery. Unfortunately, I am facing difficulties accessing the element utilizing jQuery selectors in IE7/IE8. For example: var id = 45; var $comment = $('#comment-'+id); // dynamically created ...

javascriptjqueryinternet-explorer-8internet-explorer-7

Working with missing data in SQLDataReader

I am currently facing an issue with tables containing null values, which are causing errors. Despite my attempts at different solutions to handle the nulls, I have not been successful. Here are the snippets of code from my various efforts: If (r("datemod ...

asp.netvb.netsyntaxnullsqldatareader

What is the best way to obtain the id of an HTML element that is generated within jQuery code?

Typically, data is retrieved in HTML by storing the html in the html file. In my case, however, I create the html element inside jQuery. So, how do I call out the div id? How can I replace document.getElementByID ("edit").innerHTML=.... when the element i ...

javascripthtmljqueryfirebase

The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

I successfully verified a user with Azure AD through Owin, but now I need to securely access the CRM Online Web API as this authenticated user without prompting them

Currently, I am utilizing the Microsoft.Owin middleware to authenticate users against Azure AD when they land on my webpage. App_Start > Startup.cs using Owin; using System.Configuration; using System.Globalization; using Microsoft.Owin; using Microso ...

c#asp.netazureowindynamics-crm-online

Displaying information from an array in a view and manipulating it using JavaScript

Having trouble displaying array data in a customized way. Here is how my array structure looks: array:2 [▼ "folder1" => array:5 [▼ 0 => "4.png" 1 => "2.png" 2 => "1.png" 3 => "3.png" 4 => "5.png" ] "folder2" ...

javascriptphpjqueryarrayslaravel-5.1

Instructions on setting div opacity when Overflow is set to visibleExplanation on setting opacity for div with Overflow

In my HTML code, I have a div element and an image tag stacked one on top of the other. The div is smaller than the image. I have set the overflow property to visible for the div. My query is, when I add an image to the image tag, the content that overflow ...

javascriptjqueryhtmlcss

Exploring the differences between the meta viewport and font size

My website includes the following code in the section: <meta name="viewport" content="width=990"/> This setting helps to display my webpage well on mobile devices, as using width=device-width causes issues with elements that have 100% width. Howeve ...

htmlcssmeta-tags

Retrieve data from a REST API in a dynamic manner without manually specifying the table structure in the HTML code

I am looking to retrieve JSON data via a post request from a REST API: http://localhost/post1 param1='1' The response will look like this: { "json_table": [ { "date": 123, "test": "hello2" }, { "date": 19, ...

javascriptjqueryajaxdatatables

The Django template does not render the JavaScript script block

I'm in the process of fetching a form via ajax on the "current.html" page The page that manages the form displays "form.html" "current.html" looks something like this: <script> // ajax request to get the form upon clicking a#get_form ...

jqueryajaxdjango

Unexpected behavior: JQuery Ajax request not displaying Json object following recent update to JQuery version 1.10.2

Currently facing an issue with a project I am working on. The previous programmer used jquery 1.4.4, and I have updated it to 1.10.2 due to the designer using Bootstrap. However, after running it in version 1.10.2, one of the objects that was functional i ...

javascriptjqueryajaxjson

Using a ternary condition within the ngClick directive

Trying to implement different functionalities based on the type of device. The setting tab is clickable, and in the desktop version, clicking should redirect to a default URL. However, on mobile devices, clicking the same link should open a modal window. ...

javascriptjqueryangularjshtml

Creating an online bidding platform using ASP.Net, MVC 5, and Entity Framework

Having recently delved into the world of ASP.NET, I am in the process of developing a basic auction site for a charitable cause. Utilizing MVC 5 and Entity Framework with Code-First approach for database management. The core of this project is the Item mo ...

asp.netasp.net-mvchtmlentity-frameworkrazor

"Utilize jQuery to superimpose an image on top of

I'm attempting to create a feature where clicking on an image will reveal text underneath, similar to how retailmenot.com displays coupon codes. In addition, when the image is clicked, users should be directed to an external URL. Here is an example o ...

javascriptjqueryhtml

Is there a way to identify which paragraph element was clicked and retrieve its innerHTML content using JavaScript?

Hi there! I'm facing an issue where I need my webpage to identify which paragraph was clicked, retrieve its inner text, and then adjust the size of an image accordingly. You can check it out here: http://jsfiddle.net/YgL5Z/ Here is a snippet of my HT ...

javascriptjqueryonclickinnerhtml

The Vue application is unable to expand to 100% height when using a media query

Hello everyone, I'm currently using my Vue router for multiple pages, and I'm facing an issue where setting the height of the main container to 100% within this media query is not working as expected: @media screen and (min-width: 700px) { #sig ...

javascriptcssvue.jsvuejs2vue-router

Retrieving information from database using AJAX in ASP.NET MVC

I currently have a database consisting of tables named Companies, Vacancies, Interview, and QuestionBlocks. Below is the scheme of the database: https://i.sstatic.net/oVuoA.png The Vacancy table is connected to Company, Interview is connected to Vacancy ...

c#jqueryasp.netajaxasp.net-mvc

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

Whenever I use a script to fetch an array of objects from PHP... I successfully display the results on my website by outputting them into Divs. The challenge arises when I introduce CSS animations. The animation only triggers if the variable length excee ...

javascriptphpcssjsonanimation

How can you automate clicking a button and then performing a specific action through code?

In my current coding project, I am attempting to automate the process of clicking on a tab through a script in order to reveal additional divs on the webpage. Once these divs are revealed, I need to perform certain actions on them. My code currently looks ...

javascriptjquery