Toon posts:

Vraag m.b.t. css uitklapmenu

Pagina: 1
Acties:
  • 202 views

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Hi allen,

Vorige week ben ik hier zo goed geholpen, dat ik nogmaals hulp vraag _/-\o_

Op http://javascript-array.com/scripts/simple_drop_down_menu/ staat een menu.
Als er een menu openklapt, en je met je muis in het submenu bent, is de parent van het submenu niet meer zoals met onmouse-over.
Sorry voor deze hele brakke uitleg, maar ik wil dus eigenlijk dat de onmouse-over van het hoofd-menu-item niet verdwijnt als je in het subemenu bent.

Dat krijg ik maar niet voor elkaar.

Heeft iemand een suggestie?

Alvast hartelijk dank!

Acties:
  • 0 Henk 'm!

Verwijderd

Ik zou in mopen-functie een paar aanpassingen doen

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function mopen(id)
{   
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';

    ddmenuitem.parentNode.style.background = '#49A3FF';

}


In mclose() moet je dan wel weer de style resetten. in feite is dan de "#sddm li a:hover" in de css ook niet meer nodig.

edit: ik heb de code niet getest, maar iets in die aard zou moeten werken...

[ Voor 6% gewijzigd door Verwijderd op 26-01-2009 16:45 ]


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Thanx voor je reactie RPSimon, ik ga er vanavond mee aan de slag!
Kun je dan ook in JavaScript CSS schrijven? Kan ik dan bijvoorbeeld ook een image als achtergrond aangeven in plaats van ddmenuitem.parentNode.style.background = '#49A3FF'; ?

edit: op www.w3schools.com zie ik daar al een boel info over, ik ga daar rondkijken. Thanx!

[ Voor 16% gewijzigd door Verwijderd op 26-01-2009 16:51 ]


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Het lukt helaas niet helemaal, hij zet als het ware om de parent heen de background kleur.
Niet i.p.v. de huidge kleur.

Het kan waarschijnlijk gewoon niet.

edit: Hetzelfde geld voor een image als achtergrond. Die plaatst hij niet i.p.v. de huidige achtergrond van de parent, maar erachter. Dat je die ziet betekent dat de parent breder en hoger is dan het knopje zelf.

[ Voor 40% gewijzigd door Verwijderd op 26-01-2009 17:22 ]


Acties:
  • 0 Henk 'm!

Verwijderd

Verwijderd schreef op maandag 26 januari 2009 @ 16:49:
Thanx voor je reactie RPSimon, ik ga er vanavond mee aan de slag!
Kun je dan ook in JavaScript CSS schrijven? Kan ik dan bijvoorbeeld ook een image als achtergrond aangeven in plaats van ddmenuitem.parentNode.style.background = '#49A3FF'; ?

edit: op www.w3schools.com zie ik daar al een boel info over, ik ga daar rondkijken. Thanx!
Je kan inderdaad alles in javascript aanpassen dat je kan aanpassen in css. Ik ben juist aan het kijken naar de code, en je zal moeten een paar dingen aanpassen in de css. Want het is niet echt de parent die van achtergrond veranderd, maar de link die in de parent staat.

edit: ik lees juist jouw bovenste post... Kzal even kijken

edit: als je de code als volg aan past dan werkt het...

Javascript
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function mopen(id)
{   
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem){ ddmenuitem.style.visibility = 'hidden';
    ddmenuitem.parentNode.style.background = '#5970B2';
    }

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
    
    ddmenuitem.parentNode.style.background = '#49A3FF';

}
// close showed layer
function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    ddmenuitem.parentNode.style.background = '#5970B2'
    
}


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
44
45
46
47
48
#sddm
{   margin: 0;
    padding: 0;
    z-index: 30}

#sddm li
{   
    display: block;
    margin: 0 1px 0 0;
    padding: 4px 10px;
    width: 60px;
    background: #5970B2;
    
    text-align: center;
    list-style: none;
    float: left;
    font: bold 11px arial}

#sddm li a
{   
    color: #FFF;
    text-decoration: none}

#sddm div
{   position: absolute;
    visibility: hidden;
    margin-left: -10px;
    margin-top: 4px;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #5970B2}

    #sddm div a
    {   position: relative;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #EAEBD8;
        color: #2875DE;
        font: 11px arial}

    #sddm div a:hover
    {   background: #49A3FF;
        color: #FFF}

[ Voor 51% gewijzigd door Verwijderd op 26-01-2009 17:34 ]


Acties:
  • 0 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Kan iemand even...?

Euh, verwijzen naar een site met een (3rd party) script en dan vragen of iemand het voor je aan kan passen is not-done hier. We verwachten hier wel wat meer eigen inzet (zie onze Quickstart over hoe je een goed topic opent). En daarbij moet je voor support op code van derden bij die derden aankloppen, niet bij ons ;)

Dit is gewoon een scriptrequest en daar beginnen we hier dus niet aan.

[ Voor 23% gewijzigd door RobIII op 26-01-2009 17:38 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Pagina: 1

Dit topic is gesloten.