Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one?

I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smoothly by hovering on any element.

This is the code I currently have:

.links-destacados {
  padding: 0px;
  // More CSS styles here...
}
// More CSS code...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="links-destacados fixed-module">
  <!-- HTML structure goes here -->
</div>

<script type="text/javascript">
$("li#elm").hover(
  function() {
    $("li#elm").removeClass('active');
    $(this).addClass('active');
  }
);

Answer №1

I didn't review your code specifically, but from what you've described, it seems like a traditional approach.

The structure involves showcasing the primary menu items on the left column, while the right column displays secondary level items individually.

If I were to implement this, I would opt for utilizing JavaScript.

For the primary level, I would assign a unique value to the `data-id` attribute based on the ID of the item. Subsequently, I would hide the second level by setting its CSS property to `display: none;`, and apply a class such as `level-id-xx`.

Upon clicking a primary level item, I would utilize JavaScript to reveal the corresponding secondary level on the right-hand side.

Hopefully, I comprehended your issue correctly.

In this scenario, the relationship between level 2 and level 1 is direct and can be manipulated using the following CSS:

.links-destacados .wrapper-links .list-first-level > div > li.active > ul {
    display: block;
    position: absolute;
    top: 2px;
    left: 44.44%;
    padding-left: 14px;
    margin-bottom: 40px;
    width: 55.55%;
}

Answer №2

Here's a variation for you to try: I've included some CSS and added script functionality for hover effects as well as on mouseout.

Additional inline comments have been added

$("li#elm").hover(function() {
    $("li#elm").removeClass('active');
    $(this).addClass('active');
  });
.links-destacados {
  padding: 0px;
  overflow: hidden;
}

/* Rest of the CSS code omitted for brevity */

/* Added CSS to maintain sub-menu active */
.links-destacados .wrapper-links .list-first-level > div > li.active > ul {
    display: block;
    padding-left: 14px;
    margin-bottom: 10px;
    width: 45%;
    top: 2px;
    left: 520px;
    position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="links-destacados fixed-module" about="" typeof="">
  /* HTML content goes here */
</div>

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

Error in vue.js: Unable to call this.$emit as it is not a function

export default { mounted() { setTimeout(function() { this.$emit('onLoad') }, 4000); } } //views/Load.vue I want to redirect to another page after the page has been accessed for 4 seconds. <template> <d ...

NodeJs:- Retrieve data from the initial dropdown menu and display it dynamically in the secondary dropdown

Currently, I am working on a dropdown list and facing an issue where the results displayed in the second dropdown need to be filtered based on the selection made in the first dropdown. The EJS code snippet that I am using is: <div class="form-group"& ...

The concept of selective importing within JavaScript

Seeking guidance on configuring conditional imports for a native library that is built for both node and electron. The challenge arises when one project requires the node implementation for testing, while another project needs the electron version. Projec ...

Unity3D: Troubleshooting a Code Issue

Encountering an issue with my code and struggling to find a solution. I've tried moving my c# script up to the standard assets folder as suggested in my research but it didn't resolve the problem. Any assistance would be greatly appreciated! Than ...

Tips for placing the brand logo on the left edge of the Bootstrap 4 navbar

I am facing an issue with the placement of my logo. The code snippet below shows how it currently looks: <nav class="navbar navbar-fixed-top navbar-light bg-primary"> <div class="container-fluid"> <img class="navbar-brand" src="logo.p ...

Utilizing Google Script to extract information from Gmail emails and transfer it to Google Sheets

I am facing a challenge with extracting data from an email and inputting it into a Google Sheet. While most of my code is functioning properly, I'm struggling with the regex section due to lack of expertise in this area. Below is a snippet of the HTM ...

Avoid generating `.d.ts` definition files during the onstorybook build process in a Vite React library project

I am currently developing a component library using react and typescript. I have integrated Vite into my workflow, and every time I build Storybook, the dts plugin is triggered. This has two undesired effects: It generates numerous unnecessary folders an ...

Browsing through a jQuery JSON object in Chrome reveals a dynamic reshuffling of its order

Jquery + rails 4 Within the json_data instance, there is data with key-value pairs. The key is an integer ID and the value is an object containing data. However, when attempting to iterate over this data using the jQuery $.each function, the results are s ...

The ng-bootstrap datepicker does not allow setting a default date prior to selection

I have implemented the ng-bootstrap date picker in my project and I am facing an issue with setting a default date for the input field before selecting a date from the datepicker itself. <input type="text" id="datepicker{{i}}" class="form-control" form ...

Tips for transforming a string into an object using AngularJS

Here is a string I'm working with: $scope.text = '"{\"firstName\":\"John\",\"age\":454 }"'; I am trying to convert it into a JavaScript object: $scope.tmp = {"firstName":"John","age":454 }; Please note: J ...

Sending POST data to a PHP file without the use of jQuery results in AJAX malfunction

I have been struggling to make an ajax alert layer work with a POST method for the past few days, and I cannot figure out why it is not functioning. I have successfully used the same code structure to send form data through ajax using POST on other admin p ...

PHP Retrieve Current Time with AM/PM Display

Can anyone help me figure out how to use PHP to get the current time along with AM/PM indication? The code I have doesn't seem to be working correctly. Here is the code snippet that I am currently using: $format1 = date("G"); // this should give the ...

Having trouble interpreting JSON with Jquery

I am attempting to implement autosuggestion using Solr in conjunction with jQuery. Below is the code I have written for this purpose: $(function() { $( "#artist" ).autocomplete({ source: function( request, response ) { $.ajax({ ...

Encountering an issue with Ajax code on initial execution

I've implemented an Ajax script on my PHP page to execute a PHP script upon clicking a button. However, the issue I am facing is that when I initially load the web page, the script does not run. But, if I click back and repeat the process, the script ...

Updating dropdown selection with JavaScript

I have a dropdown select menu with two options. I am using JavaScript to retrieve the selected value from the drop-down menu and display it in a text area. Here is my code: $(document).ready(function () { $('#pdSev').change(function () { ...

Adding material-ui library to a stylesheet

Can I include @material-ui/core/colors/deepOrange in my CSS file? I want to import this library and use it as shown below: import deepOrange from '@material-ui/core/colors/deepOrange'; import deepPurple from '@material-ui/core/colors/deepPu ...

Grabbing specific inline JSON data with jQuery's .getJSON function or a comparable method

I am trying to extract information from an array embedded within a <script> tag using jQuery's .getJSON method. According to the documentation I've come across (http://api.jquery.com/jquery.getjson/), .getJSON typically needs a URL and an e ...

The Radiobutton .val() function will always return a value, even if no radiobuttons have been selected

Within my form, I have 3 sets of radio buttons that are all properly labeled. When the user submits the form, I want to verify if they selected an option from each group. To achieve this, I have implemented the following method: $('.form').sub ...

Discovering the process of retrieving information from Firebase using getServerSideProps in NextJs

I've been exploring ways to retrieve data from Firebase within GetServerSideProps in NextJs Below is my db file setup: import admin from "firebase-admin"; import serviceAccount from "./serviceAccountKey.json"; if (!admin.apps.len ...

What is the most effective method for implementing COPY/INSERT functionality with cascading effects in PostgreSQL?

Seeking advice on the most effective method to perform an "on cascade copy/insert" of linked elements within PostgreSQL. To better explain my scenario, I've crafted a straightforward example: Understanding the Database Structure Within the datab ...