"Enhance the information displayed when hovering over the content

I am working on an HTML menu and I need to keep the markdown as is. The requirement is to have the content expand on hover over the "-link."

<div class="container">
  <div class="first-div-in row-menu" data-menu-block="first-div-in">Title</div>
      ..some other buttons..
</div>
<div id="first-div-in" class="menu-in">
  <div class="container" style="display:none;">
    <div class="col-xs-10">
      ... here is content ...
    </div>
  </div>
</div>

The issue lies in the implementation. The concept is for the container with content to expand when the user hovers over the "div"-link. Once the cursor moves to this expanded container, it should remain visible.

Here is the JavaScript code:

var hover_menu = function() {
  var parent = $(this);
  var menu_block = $( parent ).data('menu-block');
  $('#' + menu_block).slideToggle('slow');
}
$('.row-menu').on( 'hover', hover_menu );

I need my JavaScript code to expand the container on hover over the "div"-link, ensuring the container stays visible when the cursor moves to it. How can I achieve this behavior?

javascriptjqueryhtmlcss

Answer №1

Consider trying out this approach. When hovering over an item, if it is already visible, no action is taken. However, if it is not visible, any other open sections will be hidden and the new one will be displayed.

var hover_menu = function(){
    var $parent = $(this);
    var $menu_block = $('#' + $parent.data('menu-block'));


    if ($menu_block.not(':visible')) {
       $('.menu-in:visible').not($menu_block).slideOut('slow');
       $menu_block.slideIn('slow');
    }
}
$('.row-menu').on( 'mouseover', hover_menu );

Answer №2

You can create a stylish menu using simple CSS by utilizing max-height and overflow:hidden properties.

<div class="menu-container">
<div class="visible-content">
  My menu
</div>
<div class="invisible-content">
 <div class="content-of-invisible-div">
 <ul>
 <li>My first item</li>
 <li>My second item</li>
 <li>My third item</li>
 </ul>
 </div>

</div>


.menu-container:hover .invisible-content {
   max-height: 100px
}
.invisible-content{
  max-height: 0px;
  overflow: hidden;

}
.visible-content{
  background-color: red;
  padding: 10px;
}
.content-of-invisible-div {
  background-color: blue;
}

Check out the demo on https://jsfiddle.net/7w1rts24/

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

Looking to extract specific information from a webpage using VBA

I'm trying to extract the text 'Catalog Manager/ Sales' & 'EOL (product/component)' from the view source tab using VBA. Here is an excerpt of the view source code: <tr> <td nowrap="true" valign="top" width="165px" cl ...

htmlvbaexcelview-source

Incorporating Javascript into a <script> tag within PHP - a step-by-step guide

I am trying to integrate the following code into a PHP file: if (contains($current_url, $bad_urls_2)) { echo '<script> $('body :not(script,sup)').contents().filter(function() { return this.nodeType === 3; ...

javascriptphp

Unload pre-loaded JavaScript documents

Two javascript files are included in a popup (simple div) created using ajax. <script type="text/javascript" src="<?php echo JS ?>pm.js"></script> <script type="text/javascript" src="<?php echo JS ?>chat.js"></script> ...

javascriptjqueryajax

Working with intricately structured objects using TypeScript

Trying to utilize VS Code for assistance when typing an object with predefined types. An example of a dish object could be: { "id": "dish01", "title": "SALMON CRUNCH", "price": 120, ...

javascriptjsontypescriptobject

What is the most effective way to address duplicate title/meta tags on paginated pages? Can you share some recommended strategies for handling this

Google's webmaster tools are indicating the presence of Duplicate title tags on pages that have pagination. Below are a few examples: HTML suggestions Duplicate title tags Your title provides users and search engines with valuable information about ...

phphtmlseo

Error message: "When using Webpack 4 with Bootstrap, a TypeError occurs where property 'jquery' is read as undefined."

I've recently delved into the world of webpack and everything seems to be running smoothly. However, when I run my webpack app, I encounter the following error within Bootstrap: var version = $.fn.jquery.split(' ')[0].split('.'); ...

javascriptnode.jsreactjswebpack

"Ensuring function outcomes with Typescript"Note: The concept of

I've created a class that includes two methods for generating and decoding jsonwebtokens. Here is a snippet of what the class looks like. interface IVerified { id: string email?: string data?: any } export default class TokenProvider implements ...

javascriptnode.jstypescriptexpress

Firefox failing to trigger key events within iframe

For fun, I created my own little JSFiddle website where I built a Snake implementation that works great in Chrome. However, when I try to use it in Firefox, I can't control the player with the arrow keys or WASD. You can check it out here: I read on ...

javascriptjqueryfirefoxiframejquery-events

The combination of DOMDocument and DOMXPath is a powerful duo

I am currently working on converting CSS to inline using DOMDocument and DOMXPath. However, I'm encountering an issue where the HTML I provide is not being recognized as valid XML. Is there a way for me to configure these functions to ignore unknown ...

phpcssregexphpquery

Once the stripe token is generated, proceed to submit the form

Having issues submitting a form using jQuery with the Stripe.js plugin. I need to submit the form after creating a Stripe token. The jQuery validation is working correctly, but I'm getting an error message in the console saying "object is not a functi ...

javascriptphpjqueryformsstripe-payments

Exploring cookies to extract and display my email using Express.js

I am currently working on retrieving the name and value fields as cookies through a loop in my app.get method, then posting the field values in the app.post method using expressjs. I would appreciate it if someone could review the 'for loop' bel ...

javascriptnode.jsexpress

Ensure the page is always updated by automatically refreshing it with JavaScript each time it

I'm currently working on a web application that makes use of JQuery. Within my javascript code, there's a function triggered by an onclick event in the HTML which executes this line: $('#secondPage').load('pages/calendar.html&apos ...

javascriptjson

Utilize Rails file_field input as a clickable button

Currently, I have a button that needs to trigger the action associated with a file_field in my Rails application. Below is the erb code I am using: <label for='file-input'> <span class='btn btn-success' style='max-width ...

cssruby-on-railsrubyerb

A Guide to Effortlessly Implementing moment.js into a React TypeScript Application

I'm attempting to implement code splitting and one of the specific packages I want to separate into its own chunk is moment.js. Here's how I'm doing it: const myFunc = async (currentNumber) => { const moment = (await import('momen ...

javascriptreactjsmomentjscode-splitting

Tips for displaying a dropdown on top of a modal with the help of Tailwind CSS

I am currently utilizing Tailwind CSS and I am struggling to display the white dropdown over my modal. Despite attempting to use the z-index, I have been unsuccessful in getting it to work. Do you have any suggestions or insights on how to resolve this is ...

htmlcssvue.jstailwind-cssheadless-ui

JavaScript: Navigating Through Frames and iFrames in Internet Explorer

Is there a way to run JavaScript code after my iFrames or Frames have finished loading? It seems like document.onReady fires before the frames are actually displayed on the page. Any ideas on how to make this work? I came across a plugin called FrameReady ...

javascriptjqueryhtmliframeframes

Create a dialog box with rounded triangle corners

In the process of developing an application, we are incorporating a text display feature within a div that resembles a chat box direction, but with a curved style as depicted in the screenshot linked below. Desired design exemplified in purple Target des ...

htmlcssresponsive-design

The AngularJS templates' use of the ternary operator

Is there a way to implement a ternary operation in AngularJS templates? I am looking for a way to apply conditionals directly in HTML attributes such as classes and styles, without having to create a separate function in the controller. Any suggestions wo ...

javascripthtmlangularjsternary-operator

Failure to establish connection between electron/socket.io client and python-socketio/aiohttp server

My websocket connection is failing at the moment, even though it was working perfectly just a couple of days ago. I attempted to fix the issue by downgrading electron from version 6 to 5.0.6, but unfortunately, this did not resolve the problem. https://i. ...

javascriptpythonwebsocketelectronaiohttp

Challenges encountered with the "load" event handler when creating a Firefox Extension

I am currently troubleshooting a user interaction issue with my Firefox extension. The tasks that my extension needs to complete include: Checking certain structures on the currently viewed browser tab Making backend server calls Opening dialogs Redirect ...

javascriptdialogevent-handlingfirefox-addondom-events