Prolong the duration before the submenu closes on a div-based css menu

I have created a unique horizontal menu using DIVs without the use of ul and li lists. Currently, I am searching for a way to delay the collapse of the submenus when the mouse moves out. I don't mind if the solution involves JavaScript, jQuery, or CSS. I have attempted various JavaScript solutions but none have been successful.

Here is the CSS code:

.topmenu {
    margin: 0 auto;
    width: auto;
    float: left; 
    position: relative;
    z-index: 4;
    height: 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #444;
}

.topmenu a {
    padding: 0 16px;
    line-height: 50px;
    font-size: 16px;
    font-weight: normal;
    display: block;
    outline: 0;
    text-decoration: none;
    position: relative;
    color: #444;
}

/* Rest of the CSS code goes here */

And the HTML code:

<div class="topmenu">
    <div class="home"><a href="#">HOME</a>
        <div class="subhome">
            <!-- Submenu content goes here -->
        </div>
    </div>
    <!-- More menu items go here -->
</div>

You can view a test example of this menu here.

Thank you

[1]:

javascriptjqueryhtmlcss

Answer №1

To achieve this effect, you can utilize CSS Transitions. Simply adjust the visibility property to display or hide the menu (instead of toggling between display: block and display: none), and by specifying the transition on it, you will only delay the change from visible to hidden, not the other way around.

Additionally, you have the option to create a fade effect by animating the opacity property.

For a live example, visit: http://jsfiddle.net/KVtV7/

Here is an example of the code:

<ul id="menu">
    <li>
        <a href="">Text</a>
        <ul>
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
            <li><a href="">E</a></li>
        </ul>
    </li>
</ul>

The accompanying CSS would look something like this:

#menu ul{
    visibility: hidden;
    position: absolute;
    padding: 0;
    -moz-transition-property: visibility;
    -moz-transition-duration: 2s;
    -webkit-transition-property: visibility;
    -webkit-transition-duration: 2s;
    transition-property: visibility;
    transition-duration: 2s;
}

#menu li:hover > ul{
    visibility: visible;
}

Answer №2

To delay the hiding of an element using :hover in CSS alone is not possible. The browser instantly renders the new state. To achieve this effect, JavaScript along with setTimeout function needs to be utilized.

For example, consider the code snippet below. jQuery has been used for its compact nature and capabilities like the mouseleave event.

A class called button has been added to each button div.

<div class="button1 button"><a href="#">ITEM1</a>

$('.button').each(function() {

  // Using closures here ensures that each button has its own 'to'.
  var $that = $(this)
      ,to;

  $that.on('mouseleave', function() {

    // Utilizing setTimeout to wait 500 ms
    to = setTimeout(function() { 
      $that.find('> div').hide(); 
    }, 500);
  });

  $that.on('mouseenter', function() {

    // Hiding all other open submenus
    $('.button > div').hide(); 

    // You can continue using your CSS :hover technique instead of show.
    // In that case, remove this show call.
    $that.show();
  });

Answer №3

The following code snippet demonstrates how to create a menu with expandable buttons in HTML, including images and background styles:

HTML


 <div class="topmenu">
    <div class="home"><a href="#">HOME</a>
         <div class="subhome">
         </div> 
    </div>
    <div class="button1 sub"><a href="#">ITEM1</a>
        <div class="submenu1" style="width:840px;">
            <div class="submenuleft">
                    <a href="#"><span>LINK TITLE</span></a><br> 
                    <a href="#">Example link</a><br>
                    <a href="#">Example link</a><br>
                    <a href="#">Example link</a><br>
                    <a href="#">Example link</a>
            </div>
            <div class="submenuleft">
                    <a href="#"><span>LINK TITLE</span></a><br> 
                    <a href="#">Example link</a><br>
                    <a href="#">Example link</a>
            </div>
            <div class="submenuleft">
                    <a href="#"><span>LINK TITLE</span></a><br> 
                    <a href="#">Example link</a><br>
                    <a href="#">Example link</a><br>
                    <a href="#">Example link</a><br>
                    <a href="#">Example link</a><br>
                    <a href="#">Example link</a>
            </div>
            <div class="submenuleft" style="text-align:right;width:130px;">
                <img src="" alt="" style="width:128px; height:200px; height:190px;margin-top:5px;">
            </div>            
        </div>
    </div>

    <div class="button2"><a href="#">ITEM2</a>
         <div class="submenu2" style="width:800px;">
           <div class="submenuleft">
                     <a href="#"><span>LINK TITLE</span></a><br> 
                     <a href="#">Example link</a><br>
                     <a href="#">Example link</a><br>   
                     <a href="#">Example link</a>                  
            </div>
            <div class="submenuleft">
                     <a href="#"><span>LINK TITLE</span></a><br>                  
                     <a href="#"><span>LINK TITLE</span></a><br> 
                     <a href="#">Example link</a><br>
                     <a href="#">Example link</a>                  
            </div>
            <div class="submenuleft">
                      <a href="#">Example link</a><br>
                      <a href="#">Example link</a><br>
                      <a href="#">Example link</a>                   
            </div>
            <div class="submenuleft" style="text-align:right; width:140px;">
                <img src="" alt="" style="width:140px; height:210px;">
            </div>
         </div>
    </div>

CSS Styling


      .home .topmenu .home a,
      .button1 .topmenu .button1 a,
      .button2 .topmenu .button2 a { 
          color:#FFF;  
          background-color:#a4472d;
     }
.topmenu{
  margin: 0 auto; 
  width: auto;
  float:left; 
  position:relative;
  z-index:20;
  height: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  color:#444;
}

.topmenu a {
   padding:0 16px;
   line-height:50px;
   font-size:16px;
   font-weight:normal;
   display:block;
   outline:0;
   text-decoration: none;
   position:relative;
   color:#444;
 }

 .topmenu .home, .topmenu .button1, .topmenu .button2 {float: left;}
 .topmenu .home img {vertical-align: top; margin-top:8px; border:none;}
 .topmenu .home:hover a, .topmenu .button1:hover a, .topmenu .button2:hover a  {
     background-color:#333; 
     color:#FFF; 
     z-index:9;
 }

 .topmenu .subhome,.topmenu .submenu1,.topmenu .submenu2 {
    position: absolute;
    right:0;
    z-index:20;
    visibility:hidden; 
    opacity:0;        
    background-color:#0e5079;           
    text-align: left;
    padding: 20px;  
    top:50px;
    color:#999;
    border-radius:3px;
}

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

What is the process for implementing a CSS theme switch in a CHM file and ensuring that it remains persistent?

Welcome to my tech world Greetings! I am a tech writer with a side interest in scripting JavaScript/jQuery for our help file (CHM file). While I consider myself a beginner in JS scripting, I have ventured into the realm of dynamic theme swapping within CH ...

javascriptcsscookiesthemeschm

Troubleshooting VueJS's Dilemma with Quotation Marks

When I try to parse a string containing either double quotes or single quotes, an error is being thrown: JSON Unexpected token. Is there a way to properly parse and bind it to a variable in Vue.js? PHP $arr = array(); $arr[0]['description'] = ...

javascriptvue.js

Issue with reflect metadata in Next.js edge runtime causing functional problems

Currently, I am utilizing a package in my upcoming 13 app that incorporates reflect metadata. Unfortunately, during the next build process, an error occurs for which I haven't been able to find a solution. ../../eshop-sdk-js/node_modules/reflect-metad ...

javascriptreactjstypescriptnext.js

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

Is there a way to replace the if else statement in the function using a Ternary operator in JavaScript? private getProductName(productType: string): string { let productName = 'Product not found'; this.deal.packages.find(p => p.isSele ...

javascripttypescriptconditional-operator

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

Currently working on customizing the navbar using Bootstrap. I've been able to style it perfectly for both desktop and mobile devices in its initial state. The issue arises when attempting to style the navbar in its expanded and collapsed states on m ...

javascriptjqueryhtmlcsstwitter-bootstrap

AngularJS: How to accurately retrieve the offsetTop value upon page initialization

Issue: I am facing difficulty in obtaining the accurate top offset value of a DOM element immediately after the page has loaded. In the project I am currently working on, it is essential to retrieve the offsetTop value of various DOM elements as soon as ...

javascriptjqueryangularjsangularjs-directiveangularjs-ng-repeat

Creating raw JavaScript from npm package:How to convert npm modules into plain

Is there a way to get a pre-compiled plain JavaScript file from the repository https://github.com/airbrake/airbrake-js? I'm looking for a solution without using bower, npm or any other tools - just a single JavaScript file. By the way: The file "http ...

javascriptnpmbowergenerated

What is the correct way to implement ::v-deep(<inner-selector>) in a Vue component?

I am attempting to assign an existing style class to a child element that will be loaded using the v-html directive. Since /deep/ and >>> are no longer supported, I have tried using ::v-deep in Vue. <template> <div v-else v-html="chi ...

cssvue.jsvuejs2vuejs3

Anomaly in Form Validation with Semantic-UI

This time around, I am implementing Semantic-UI with React. In the past, I have successfully utilized Semantic-UI's form and form validation features in various projects without encountering any issues. However, a new problem has arisen, which I will ...

javascriptjquerycsssemantic-ui

Prevent overlapping of range sliders in HTML and CSS

I have designed a range slider with two buttons, but they are overlapping each other. I want to ensure that they do not cross over one another - where the value of the first button should be equal to the minimum value of the second button, and the maximum ...

htmlcssangularfrontend

What is the best way to align text in the center of a button?

When creating custom buttons in CSS using <button>, I noticed that the text appears to be centered both horizontally and vertically across all browsers without the need for padding, text-align, or other properties. Simply adjusting the width and heig ...

htmlcss

Reach out to individuals who have responded to a message on Discord using JavaScript

I am looking to develop a script that will enable me to send direct messages to users who have reacted (all reactions) to a specific message by its ID. I want to exclude bots and ensure that each user only receives one message even if they react multiple ...

javascriptnode.jsdiscorddiscord.js

The UglifyJsPlugin in Webpack encounters an issue when processing Node modules that contain the "let" keyword

Below is the code snippet from my project which utilizes Vue.js' Webpack official template: .babelrc: "presets": [ "babel-preset-es2015", "babel-preset-stage-2", ] webpack.prod.config.js new webpack.optimize.UglifyJsPlugin({ compress: { ...

javascriptnode.jswebpackvue.jsuglifyjs2

Mocha throwing 400 bad request error when making a post request with raw data

var expect=require('chai').expect; var http=require("http"); var request = require('request'); var env = require('./environment'); describe("Testing Callflow Functionality", function(done) { //this.timeout(15000); it("Tes ...

javascriptjson

What is the solution to the problem "How can you resolve the issue where 'Cannot set property 'ref' of undefined' occurs"?

My goal is quite simple - I just want to retrieve data from Cloud Firestore. Below is the code snippet I am using: import React from 'react'; import firebase from "react-native-firebase"; export default class newsFeed extends React.Component { ...

javascriptfirebasereact-nativegoogle-cloud-firestore

Combining a random selection with a timer in JavaScript for a dynamic user experience

Currently, I am developing a Twitter bot using JavaScript, Node.js, and the Twit package. The goal is for the bot to tweet every 60 seconds with a randomly selected sentence from an array. When testing the timer and random selection function individually, ...

javascriptarraysnode.jsbots

Retrieve Content from a Different Web Page Using Ajax

I recently received permission from another website to pull their RSS feeds, and now I'm trying to figure out what to write in TAG1 and TAG2. This is the specific issue I'm facing: Here is the HTML code (it's an ajaxed page) <!doctype ht ...

javascriptajax

Send form data without reloading the page and connect it to a JavaScript script

I've designed a system that reveals values based on a specific input selection. Below is the main form where users can enter model numbers and press enter: <form> <input type="text" name="ModNum" id="ModelNumber" pattern="^PIV13RT[23]?$" ...

javascriptjqueryhtmlajaxforms

Raphael and jQuery/JavaScript for user-selected array intersections

Hello everyone! This is my first time posting here, and I must say that I'm still quite new to JavaScript/jQuery/Raphael. Please forgive me if I make any mistakes or ask basic questions. :) I've been searching high and low for answers to my quer ...

javascriptjqueryarraysraphael

Tips for aligning the Bootstrap inline form in the center of the webpage

Is there a way to center align my form in such a way that the input box and button appear in the same row? I've tried the code below, but for some reason they don't display inline. Can anyone provide a code sample to help me achieve this? Your as ...

htmlcssformsbootstrap-4inline