CODEWITHSUNDEEP
htmlcssmouseeventsubmenu
user3033193
user3033193

Reputation: 11

CSS Sub-Menus staying open when clicked.

I have created this CSS drop down menu. The menu works flawless as it should, my only question is how can I get the sub menus to stay open and not instantly disappear when the mouse is removed off of them? My code is at this link, http://fiddle.jshell.net/NJ4UP/

I have tried several things but nothing is seeming to do what I want. I would prefer not to use J-Query or JavaScript, as I'm not that familiar them, but any help will be greatly appreciated!!

All I want and need is for the sub-menus to not instantly disappear if the mouse is not hovering over them. I was thinking a timeout option or something that sets it to close after a predetermined amount of time (ie 5 seconds) or another menu or link is clicked.

Thanks in advanced.

Upvotes: 0

Views: 4116

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105903

In CSS you may expand area that covers <li> when hovered with a pseudo element : DEMO. 

li:hover:before  {
  content:'';
  position:absolute;
  width:100px;
  height:200px;
  background:rgba(0,0,0,0.01);/* not 100% transparent, so it gets the mouse over */
}

In CSS you may delay transition to close your menu DEMO.

  1. do not use display to hide/show the submenu
  2. Use a rule that handles number value.
#menu ul > li ul {
  position:absolute;
  margin-left:-9999px;
  transition:0s 0.5s;/* stay open 0.5sec before to hide again */
}
    #menu ul > li:hover > ul {
  margin:0;
    transition:0s 0s;/* show ! don't wait */
}

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105903

In CSS you may use the experimental rule pointer-events and HTML tabindex attribute .

  1. pointer-events to control mouse events hover <a> in <li> first level.
  2. tabindex for <li> first level , so it can be focused via click & tab.

The idea is:

  1. to shortcut the click events on so <li tabindex="0"> can take the :focus and apply same rule as :hover.
  2. then once <li> has focus , to give back to ability to receive mouse events.

DEMO - CSS click open/close menu

it alows to open close menu via the key tab

At the moment i believe it is better to set a class instead tabindex and use javasript to toggle class on click , or at least to keep the :hover rule effective.

It can be done somehow for a two level menu too

Upvotes: 0

user3407000
user3407000

Reputation: 328

You could check this out, maybe it helps:

http://www.w3schools.com/css/css3_transitions.asp

Upvotes: 0

Related Questions