Hallo,
ik ben al een tijdje bezig met websites maken en met alleen css en html lukt het al aardig. Net nadeel is dat ik nu tegen de tekortkomingen hiervan aanloop en er met javascript niet helemaal uitkom.
Ik heb een menu gemaakt wat opzich goed werkt alleen wil ik graag een delay op de hover. Als iemand nu even per ongeluk voorbij komt met zijn muis gaat meteen het menu naar een andere hover state. Ook wil ik graag dat als mensen met hun muis het menu verlaten het nog even zo blijft staan (weer een delay). Ik heb al heel wat af gegoogled en ben er zo achter gekomen dat dit niet meer met css alleen kan. Hiervoor is javascript nodig. Ik heb hierop ook gezocht en kwam op sites zoals deze:
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
Dit is eigenlijk precies wat ik wil. Een wat kortere delay op de active state dus dat als je bijv naar je browser menu gaat je niet meteen een menu openklapt als je eroverheen komt. En dat als je per ongeluk even het menu verlaat met je muis het niet meteen weer inklapt.
Hier nog een goed voorbeeld: http://www.ledgernews.com/
Deze site heeft niet echt active hover maar omdat hij een vrij lange hover heeft als je het menu verlaat is het niet storend en ziet het er ook goed uit. Dit is dus ook een optie. (het beste zou natuurlijk zijn als je de delay van activate en deactive apart kan instellen)
Alleen hoe kan ik dit werkend krijgen met mijn code (zie code hieronder)?
Kan iemand mij helpen een zo'n simpel en kort mogelijke manier te vinden om dit menu (met puur li en ul elementen) via javascript een delay mee te geven.
PS. Ik wil dit later graag gaan gebruiken icm met een CMS systeem, dus ik kan niet teveel aan de code van het menu (HTML ul en li's) aanpassen, omdat als een CMS het menu beheert niet zomaar extra id's classes e.d. toegevoegd kunnen worden (dan moet alles hardcoded). Alles handmatig in de html code zetten is de laatste mogelijkheid.
Alvast bedankt, Shappie
ik ben al een tijdje bezig met websites maken en met alleen css en html lukt het al aardig. Net nadeel is dat ik nu tegen de tekortkomingen hiervan aanloop en er met javascript niet helemaal uitkom.
Ik heb een menu gemaakt wat opzich goed werkt alleen wil ik graag een delay op de hover. Als iemand nu even per ongeluk voorbij komt met zijn muis gaat meteen het menu naar een andere hover state. Ook wil ik graag dat als mensen met hun muis het menu verlaten het nog even zo blijft staan (weer een delay). Ik heb al heel wat af gegoogled en ben er zo achter gekomen dat dit niet meer met css alleen kan. Hiervoor is javascript nodig. Ik heb hierop ook gezocht en kwam op sites zoals deze:
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
Dit is eigenlijk precies wat ik wil. Een wat kortere delay op de active state dus dat als je bijv naar je browser menu gaat je niet meteen een menu openklapt als je eroverheen komt. En dat als je per ongeluk even het menu verlaat met je muis het niet meteen weer inklapt.
Hier nog een goed voorbeeld: http://www.ledgernews.com/
Deze site heeft niet echt active hover maar omdat hij een vrij lange hover heeft als je het menu verlaat is het niet storend en ziet het er ook goed uit. Dit is dus ook een optie. (het beste zou natuurlijk zijn als je de delay van activate en deactive apart kan instellen)
Alleen hoe kan ik dit werkend krijgen met mijn code (zie code hieronder)?
HTML:
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
| <div id="container"> <div id="header_bg"> <div id="header"> <div id="menu_top"> <ul> <li class="current"><a href="#">Menu 1</a> <ul> <li class="current"><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> <li><a href="#">Submenu Item 4</a></li> <li><a href="#">Submenu Item 5</a></li> <li><a href="#">Submenu Item 6</a></li> <li><a href="#">Submenu Item 7</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> <li><a href="#">Submenu Item 4</a></li> </ul> </li> </ul> <div id="nav_bar"></div> </div> </div> </div> <div id="main"> <div id="spacer_bg"> <div id="spacer"> </div> </div> <div id="mainbody_bg"> <div id="mainbody"> <div id="left"> </div> <div id="content"> </div> </div> </div> </div> <div id="footer_bg"> <div id="footer"> </div> </div> </div> |
Cascading Stylesheet:
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
| * {padding:0; margin:0;} body {font-family:Verdana, Arial, Helvetica, sans-serif; background:#4991f2;} div#container {} div#header_bg {background:#fff url(../images/test9/nav_bar.png) repeat-x bottom;} div#header {padding:50px 0 0 0; width:980px; margin:0 auto;} div#menu_top {background:#e5e5e5 url(../images/test9/menu_top.png);} div#nav_bar {position:relative; background:#ec763d url(../images/test9/nav_bar.png); width:100%; height:40px; margin:40px 0 0 0;} div#header ul {list-style:none; margin:0; padding:10px 0 0 10px; position:relative; z-index:1;} div#header ul:hover li.current a {background:#777 url(../images/test9/nav_deactive.png); width:140px;} div#header ul li {float:left; padding:0 10px 0 0;} div#header ul li:hover a, div#header ul li.current a, div#header ul:hover li.current:hover a {background:#ec763d url(../images/test9/nav_active.png); color:#fff;} div#header ul li a, div#header ul:hover li.current a {color:#ccc; display:block; text-align:center; text-transform:uppercase; text-decoration:none; font-size:16px; background:#777 url(../images/test9/nav_deactive.png); width:140px; padding:11px 10px;} div#header ul li ul, div#header ul:hover li.current ul {display:none;} div#header ul li:hover ul, div#header ul li.current ul, div#header ul:hover li.current:hover ul {display:block; position:absolute; left:0; top:50px; width:100%; margin:0; padding:2px 0 0 0;} div#header ul li:hover ul li, div#header ul li.current ul li {background:none; width:auto; position:relative;} div#header ul li.current ul li.current {background:none; width:auto; position:relative; z-index:1;} div#header ul li:hover ul li:hover, div#header ul li.current ul li:hover {background:none;} div#header ul li.current ul li.current:hover {background:none; width:auto; position:relative; z-index:1;} div#header ul li:hover ul li a, div#header ul li.current ul li a, div#header ul:hover li.current:hover ul li a {color:#ccc; font-size:12px; background:none; width:auto; padding:11px 10px;} div#header ul li.current ul li.current a, div#header ul:hover li.current ul li.current a {color:#fff; text-decoration:underline;} div#header ul:hover li:hover ul li a:hover, div#header ul:hover li.current ul li a:hover {color:#fff; text-decoration:underline;} div#header ul li.current ul li.current a:hover {color:#fff; text-decoration:underline;} div#main {} div#spacer_bg {border-top:10px solid #333; border-bottom:1px solid #fff; background:#555;} div#spacer {height:80px;} div#mainbody_bg {background:#ccc;} div#mainbody {height:400px;} div#left {} div#content {} div#footer_bg {background:url(../images/test9/footer_bg.png); border-top:10px solid #333;} div#footer {height:40px;} |
Kan iemand mij helpen een zo'n simpel en kort mogelijke manier te vinden om dit menu (met puur li en ul elementen) via javascript een delay mee te geven.
PS. Ik wil dit later graag gaan gebruiken icm met een CMS systeem, dus ik kan niet teveel aan de code van het menu (HTML ul en li's) aanpassen, omdat als een CMS het menu beheert niet zomaar extra id's classes e.d. toegevoegd kunnen worden (dan moet alles hardcoded). Alles handmatig in de html code zetten is de laatste mogelijkheid.
Alvast bedankt, Shappie
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
We zitten hier niet om voor jou JS scriptjes in je HTML te bouwen /u/102549/gimp_logo_icon.png?f=community){kind=icon}
:strip_icc():strip_exif()/u/224424/lilith-small.jpg?f=community)
:strip_icc():strip_exif()/u/36083/crop5dca9e34ce091_cropped.jpeg?f=community)