Copyright 1998 - 2026 DPG Media B.V. Mon, 11 May 2026 04:42:16 GMT Mon, 11 May 2026 04:42:16 GMT GoT - list_messages https://gathering.tweakers.net/ Gathering of Tweakers https://tweakers.net/g/if/logo.gif nl-nl https://gathering.tweakers.net/rss/list_messages/1422411 Drop-line menu - Softwareontwikkeling - GoT gathering@tweakers.net (Administrator) MoietyMe https://gathering.tweakers.net/forum/list_message/34567554#34567554 Hier een menu (CSS staat nog inline, maar dat is makkelijk te fixen) dat alleen CSS en een .htc-bestand gebruikt voor IE6. Drop-line menu. Getest in Safari 5, Firefox 3.6, Opera 10 en IE6 t/m 8.
Drop-line menu.

Getest in Safari 5, Firefox 3.6, Opera 10 en IE6 t/m 8.]]> MoietyMe https://gathering.tweakers.net/forum/list_message/34567554#34567554 Mon, 23 Aug 2010 11:22:41 GMT ^Ripper https://gathering.tweakers.net/forum/list_message/34559241#34559241 "Zoek anders ook eens op suckerfish, dat is een voorbeeld van deze techniek." http://www.cssplay.co.uk/menus/ <- in mijn ogen DE website voor CSS menu's Erg veel soorten en maten en worden ge-update wanneer nodig.
http://www.cssplay.co.uk/menus/ <- in mijn ogen DE website voor CSS menu's

Erg veel soorten en maten en worden ge-update wanneer nodig.]]> ^Ripper https://gathering.tweakers.net/forum/list_message/34559241#34559241 Sat, 21 Aug 2010 14:27:19 GMT MoietyMe https://gathering.tweakers.net/forum/list_message/34553068#34553068 Toch even een snel voorbeeld. De CSS moet je zelf maken. 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 <ul id="menu"> <li class="green"> <a href="">Item 1</a> <ul> <li> <a href="">Subitem 1</a> </li> <li> <a href="">Subitem 2</a> </li> <li> <a href="">Subitem 3</a> </li> <li> <a href="">Subitem 4</a> </li> </ul> </li> <li class="yellow"> <a href="">Item 2</a> <ul> <li> <a href="">Subitem 1</a> </li> <li> <a href="">Subitem 2</a> </li> </ul> </li> <li class="blue"> <a href="">Item 3</a> </li> <li class="red"> <a href="">Item 4</a> </li> </ul>
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

<ul id="menu">
    <li class="green">
        <a href="">Item 1</a>
        <ul>
            <li>
                <a href="">Subitem 1</a>
            </li>
            <li>
                <a href="">Subitem 2</a>
            </li>
            <li>
                <a href="">Subitem 3</a>
            </li>
            <li>
                <a href="">Subitem 4</a>
            </li>
        </ul>
    </li>
    <li class="yellow">
        <a href="">Item 2</a>
        <ul>
            <li>
                <a href="">Subitem 1</a>
            </li>
            <li>
                <a href="">Subitem 2</a>
            </li>
        </ul>
    </li>
    <li class="blue">
        <a href="">Item 3</a>
    </li>
    <li class="red">
        <a href="">Item 4</a>
    </li>
</ul>
]]> MoietyMe https://gathering.tweakers.net/forum/list_message/34553068#34553068 Fri, 20 Aug 2010 09:17:01 GMT SpaceK33z https://gathering.tweakers.net/forum/list_message/34553044#34553044 @GoodFella: Goed idee, zal ik eens proberen. Dat van die sprite is een goede tip, heb ik nog nooit in de praktijk gebruikt. Dankje voor je snelle antwoord .Bosmonster schreef op vrijdag 20 augustus 2010 @ 11:12: De UL's nesten ipv losse UL's maken. Is semantisch gezien een stuk correcter en lost direct je probleem op (in combinatie met wat Good Fella zegt dan natuurlijk, hovers op de LI's). Zoek anders ook eens op suckerfish, dat is een voorbeeld van deze techniek.Ook bedankt, zal ik eens proberen. .
Bosmonster schreef op vrijdag 20 augustus 2010 @ 11:12:
De UL's nesten ipv losse UL's maken. Is semantisch gezien een stuk correcter en lost direct je probleem op (in combinatie met wat Good Fella zegt dan natuurlijk, hovers op de LI's).

Zoek anders ook eens op suckerfish, dat is een voorbeeld van deze techniek.
Ook bedankt, zal ik eens proberen.]]> SpaceK33z https://gathering.tweakers.net/forum/list_message/34553044#34553044 Fri, 20 Aug 2010 09:13:35 GMT Bosmonster https://gathering.tweakers.net/forum/list_message/34553038#34553038 De UL's nesten ipv losse UL's maken. Is semantisch gezien een stuk correcter en lost direct je probleem op (in combinatie met wat Good Fella zegt dan natuurlijk, hovers op de LI's). Zoek anders ook eens op suckerfish, dat is een voorbeeld van deze techniek.
Zoek anders ook eens op suckerfish, dat is een voorbeeld van deze techniek.]]> Bosmonster https://gathering.tweakers.net/forum/list_message/34553038#34553038 Fri, 20 Aug 2010 09:12:45 GMT MoietyMe https://gathering.tweakers.net/forum/list_message/34553016#34553016 Zet de hover eens op de <ul> in plaats van op de <a>. Aangezien de rest van de linkjes ook in de <ul> zitten zou dit je probleem moeten oplossen. Daarnaast zou je voor je plaatjes eens naar een sprite moeten kijken, dan heb je maar één plaatje en i.p.v. 8 declaraties 5. Verder is de code nogal een rommeltje. Dit zou veel netter kunnen. Nu even geen tijd voor een voorbeeld, maar met alleen UL's, LI's en A's is dit prima mogelijk. De hover voor IE6 kun je dan oplossen met een .htc-bestand.
Daarnaast zou je voor je plaatjes eens naar een sprite moeten kijken, dan heb je maar één plaatje en i.p.v. 8 declaraties 5.

Verder is de code nogal een rommeltje. Dit zou veel netter kunnen. Nu even geen tijd voor een voorbeeld, maar met alleen UL's, LI's en A's is dit prima mogelijk. De hover voor IE6 kun je dan oplossen met een .htc-bestand.]]> MoietyMe https://gathering.tweakers.net/forum/list_message/34553016#34553016 Fri, 20 Aug 2010 09:09:36 GMT SpaceK33z https://gathering.tweakers.net/forum/list_message/34552968#34552968 Ik ben bezig met een drop-line menu. Nu heb ik die niet helemaal zelf gemaakt (wel helemaal aangepast), maar van cssplay. Nou heb ik 'm zo aangepast dat als je met je cursor over een hoofditem heen gaat, het plaatje verandert en gelijk word aan de kleur van de onderste balk (zie voorbeeld). Dit werkt perfect, op een ding na. Ik wil graag dat als je met je muis nog in dat balkje staat, 'ie nog gehoverd blijft. Als je nu naar een van de subitems wilt gaan, gaat het plaatje (wat dan gelijk is aan de onderste kleur) weer terug naar zijn eerste stand, wat er niet mooi uit ziet. Weet iemand hoe ik dit kan aanpassen, zodat 'ie gehoverd blijft als je een subitem gaat kiezen, desnoods met Javascript? Het voorbeeld: http://keeskluskens.nl/dump/websites/stp/ De code: 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 <div id="nav"> <ul class="select"><li><a href="#" class="navblauw">Home <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub blauw"> <li><a href="#">Welkom</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Sitemap</a></li> <li><a href="#">FAQ</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul> <ul class="current"><li><a href="#" class="navgroen">Actueel <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub_active groen"> <li><a href="#">Nieuws</a></li> <li><a href="#">Persberichten</a></li> <li><a href="#">Evenementenagenda</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul> <ul class="select"><li><a href="#" class="navrood">Activiteiten <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub rood"> <li><a href="#">TU Eindhoven</a></li> <li><a href="#">TU Delft</a></li> <li><a href="#">Twente</a></li> <li><a href="#">Landelijk</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul> <ul class="select"><li><a href="#" class="navgeel">Stichting <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub geel"> <li><a href="#">Algemeen</a></li> <li><a href="#">Missie</a></li> <li><a href="#">Visie</a></li> <li><a href="#">Geschiedenis</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Resultaten</a></li> <li><a href="#">Organisatie</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul> </div><!-- Einde #nav --> De css: http://keeskluskens.nl/dump/websites/stp/style.css Alvast bedankt! Nou heb ik 'm zo aangepast dat als je met je cursor over een hoofditem heen gaat, het plaatje verandert en gelijk word aan de kleur van de onderste balk (zie voorbeeld).
Dit werkt perfect, op een ding na. Ik wil graag dat als je met je muis nog in dat balkje staat, 'ie nog gehoverd blijft. Als je nu naar een van de subitems wilt gaan, gaat het plaatje (wat dan gelijk is aan de onderste kleur) weer terug naar zijn eerste stand, wat er niet mooi uit ziet.
Weet iemand hoe ik dit kan aanpassen, zodat 'ie gehoverd blijft als je een subitem gaat kiezen, desnoods met Javascript?

Het voorbeeld:
http://keeskluskens.nl/dump/websites/stp/

De code:
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

<div id="nav">


<ul class="select"><li><a href="#" class="navblauw">Home
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub blauw">
<li><a href="#">Welkom</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">FAQ</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>





<ul class="current"><li><a href="#" class="navgroen">Actueel
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub_active groen">
<li><a href="#">Nieuws</a></li>
<li><a href="#">Persberichten</a></li>
<li><a href="#">Evenementenagenda</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>


<ul class="select"><li><a href="#" class="navrood">Activiteiten
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub rood">
<li><a href="#">TU Eindhoven</a></li>
<li><a href="#">TU Delft</a></li>
<li><a href="#">Twente</a></li>
<li><a href="#">Landelijk</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>

<ul class="select"><li><a href="#" class="navgeel">Stichting
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub geel">
<li><a href="#">Algemeen</a></li>
<li><a href="#">Missie</a></li>
<li><a href="#">Visie</a></li>
<li><a href="#">Geschiedenis</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Resultaten</a></li>
<li><a href="#">Organisatie</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
</div><!-- Einde #nav -->


De css:
http://keeskluskens.nl/dump/websites/stp/style.css

Alvast bedankt!]]> SpaceK33z https://gathering.tweakers.net/forum/list_message/34552968#34552968 Fri, 20 Aug 2010 09:02:01 GMT