Question 262200 in CSS Question posted in
Some basic documentation can be found here.

Delay for opening horizontal menu – just with CSS

guys,

Any chance you could help me with this?

I have an online store with horizontal menu: https://www.super-naradi.cz/ . I would like the menu to open after a slight delay (0,5 sec). It’s kinda annoying that the menu opens every time I just want to browse the website.

Also, this online store runs on a platform where I am able to chance just CSS. So, the code would have to be in CSS.

(Hope, it makes sence). Thanks for help!

I have no idea what code to use.

Tags:

2

Answers


  1. 0

    To achieve a delayed menu open using only CSS, you can use the :hover pseudo-class along with the transition-delay property. Here’s an example of how you can create a CSS-only delayed menu open:

    Assuming your HTML structure looks something like this:

    <div class="menu-container">
  <div class="menu"> <!-- Your menu content goes here --> </div>
</div>

    You can apply CSS to delay the menu open:

    .menu-container {
  position: relative;
 /* Other styles for the menu container */
}

.menu {
  display: none; /* Hide the menu by default */
  position: absolute;
  /* Other styles for the menu */

  transition: display 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transition-delay: 0.5s; /* Add a delay of 0.5s before transitioning */
}

.menu-container:hover .menu {
  display: block; /* Show the menu when the container is hovered */
  opacity: 1; /* Optionally, add opacity for smooth transition */
}
    Login or Signup to reply.
  2. 0

    i think you mean the vertical menu
    i didnt notice any horizontal menu to open, and also i didnt understand why menu content is inside two different ul tags which makes it harder to control the delay or transition of it.
    what i understood was you are changing the display of menu None to block.

    in css changing display none to block wont get transition or delay
    but it works with jQuery which you mentioned you cant change.

    in css you can change opacity and visibility and pointer-event properties instead of changing display from block to none.

    to hide :

    transition: all .4s ease;
opacity: 0;
visibility: hidden;
pointer-events: none;

    to show:

    opacity: 1;
visibility: visible;
pointer-events: all;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search