vertraging bij verlaten hover
Ik werk al jaren met css hover voor lijn menu's Maar zou een vertraging willen bij het verlaten. Sommige gebruikers bewegen nogal slecht met hun muis en zodra de muis de tag verlaat is het menu weg. Als ik nu een vertraging van een (halve) seconden zou hebben dan zou het beter zijn.
Ik heb dit geprobeerd maar alles loopt nog steeds onmiddellijk.
bron: https://stackoverflow.com/questions/9393125/delay-mouseout-hover-with-css3-transitions
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
nav li {
transition: .5s all;
transition-delay: 5s;
}
nav li:hover {
transition-delay: 0s;
}
transition: .5s all;
transition-delay: 5s;
}
nav li:hover {
transition-delay: 0s;
}
Jan
Je moet de oplossing zoeken in javascript ... het makkelijkst is jQuery.
Je zet een event listener op (de container div van) het menu. Bij een mouse out zet je na x seconden 'display' (css) op 'none', of je doet een fade-out.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
background-image: linear-gradient(to right, red 0%, green 100%);
background-size: 100% 3px;
background-repeat: no-repeat;
background-position: bottom;
transition: .5s all;
transition-delay: 2s;
}
a:hover {
background-position: top;
transition-delay: 0s;
}
</style>
</head>
<body>
<a href="#">test</a>
</body>
</html>
<html>
<head>
<style>
a {
text-decoration: none;
background-image: linear-gradient(to right, red 0%, green 100%);
background-size: 100% 3px;
background-repeat: no-repeat;
background-position: bottom;
transition: .5s all;
transition-delay: 2s;
}
a:hover {
background-position: top;
transition-delay: 0s;
}
</style>
</head>
<body>
<a href="#">test</a>
</body>
</html>
Ik heb de code geprobeerd en de "animatie" is hier wel zichtbaar echter met een submenu (display:block en display:hide) krijg ik het niet werkende.
Ik heb ook geprobeerd om te werken via animation lukt echter ook niet. js wel maar zoals ik schreef zou ik een pure css oplossing willen.
in volgende fiddle staan de 3 voorbeelden de uitwerking van "Ad Fundum" + zijn voorbeeld en een werken js voorbeeld.
https://jsfiddle.net/36mu92hx/
Let niet op de tijden die staan hoog en moeten op termijn naar 200-500ms gaan. 't is nu maar om te testen en dan wil ik het traag zien :)
Jan
Waarom zou je dat willen als js prima werkt? Js is bedoeld voor interactie en dit is een interactie vraagstuk. Er vindt een bepaalde interactie plaats tussen de gebruiker en de website: de gebruiker beweegt z'n muis buiten het menu en er moet even gewacht worden alvorens het menu wordt gesloten.
Hoe dan ook ik heb even wat speurwerk verricht en heb deze link gevonden. Wellicht kun je hier iets mee. Dit is enkel met css. Of het in alle situaties goed werkt, geen idee ... maar wellicht kun je er iets mee.
https://codepen.io/paulobrien/pen/JjGGdRz
(gevonden via https://www.sitepoint.com/community/t/having-menu-visible-for-x-number-of-seconds-after-hover-has-been-removed/353690/5)
CSS heeft een complete animatie-module, en het is zonde om dat wiel opnieuw in JS uit te vinden, waarbij het ook nog eens trager werkt dan puur CSS. Daarom zeg ik: CSS eerst, tenzij.
Een demo ter inspiratie wat je met puur CSS kan doen: https://www.cssplay.co.uk/menu/cssplay-tic-tac-toe-v3.html
Op diezelfde site staan ook massa's voorbeelden van CSS menu's, je kan de broncode bekijken en er je voordeel mee doen:
https://www.cssplay.co.uk/menus/
Wellicht handig als je dan even kunt aangeven waar de oplossing staat voor de specifieke vraag van de topic starter.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<style>
html, body, div, nav {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
background: darkgray;
font-family: Arial, Helvetica, sans-serif;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
nav {
background: gray;
}
.dropdown {
--hoogte: 40px;
diplay: block;
position: relative;
height: var(--hoogte);
line-height: var(--hoogte);
font-size: 16px;
padding: 0 1em;
color: yellow;
}
.dropdown a {text-decoration: none;}
.dropdown li {position: relative;}
.dropContent {
position: absolute;
left: 0;
visibility: hidden;
background: yellow;
opacity: 0;
top: var(--hoogte);
text-align: center;
transition: opacity 0, visibility 0;
transition-delay: 500ms;
}
.dropdown li:hover .dropContent {
visibility: visible;
opacity: 1;
transition: opacity 1, visibility 1;
transition-delay: 0s;
}
</style>
</head>
<body>
<nav>
<ul class="dropdown">
<li><a class="dropbtn" href="#">Dropdown 1</a>
<ul class="dropContent">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a class="dropbtn" href="#">Dropdown 1</a>
<ul class="dropContent">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
<html>
<head>
<style>
html, body, div, nav {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
background: darkgray;
font-family: Arial, Helvetica, sans-serif;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
nav {
background: gray;
}
.dropdown {
--hoogte: 40px;
diplay: block;
position: relative;
height: var(--hoogte);
line-height: var(--hoogte);
font-size: 16px;
padding: 0 1em;
color: yellow;
}
.dropdown a {text-decoration: none;}
.dropdown li {position: relative;}
.dropContent {
position: absolute;
left: 0;
visibility: hidden;
background: yellow;
opacity: 0;
top: var(--hoogte);
text-align: center;
transition: opacity 0, visibility 0;
transition-delay: 500ms;
}
.dropdown li:hover .dropContent {
visibility: visible;
opacity: 1;
transition: opacity 1, visibility 1;
transition-delay: 0s;
}
</style>
</head>
<body>
<nav>
<ul class="dropdown">
<li><a class="dropbtn" href="#">Dropdown 1</a>
<ul class="dropContent">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a class="dropbtn" href="#">Dropdown 1</a>
<ul class="dropContent">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Als je meer visuele effecten wil kan je nog animeren met max-height op de dropdown menuutjes, al dan niet in combinatie met transform: translateY(..), etc.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.dikke:hover{
transform: rotate(5deg);
}
.rotate {
animation: rotation 8s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
transform: rotate(5deg);
}
.rotate {
animation: rotation 8s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}