suckerfish dropdown menu

[Verwijderd]

Geachte tweakers,

ik ben momenteel bezig met een bepaald systeem op internet, daarbij wil ik onder bepaalde punten op een map een dropdown menu hebben. Ik maak hiervoor gebruik van het suckerfish dropdown menu dat ik engzins aan heb gepast omdat ik hem op de juiste punten op de kaart moet kunnen zetten.

Wat ik momenteel heb: http://www.sitedezign.net/test/test.html. Echter ik zit met een probleem welke ik niet opgelost krijg:

Als ik over één van de dropdown menu's ga, en deze valt toevallig over een andere link voor een dropdown menu dan wil ik niet dat deze wordt geopent als ik met m'n muis erover heen ga. Ik wil natuurlijk wel dat deze open gaat als ik zonder een dropdown menu open te hebben staan er met m'n muis overheen ga.

Een ander probleem is de text die in zo'n geval (geopend dropdown menuutje dat over andere heen valt) door elkaar heen lopen, wat ik niet wil is dat er een vaste achtergrond kleur komt want dat ziet er niet met het plaatje. Nu heb ik geprobeerd hetzelfde plaatje erachter te zetten als dat ik gebruik (nederland.jpg) en dan te positioneren, echter dat werkt niet aangezien zo'n background-image op een layer zit waar je niet bij kan komen.

Ik heb in beide gevallen met z-index geprobeerd, maar dat werkte niet.

Iemand die me kan helpen

PS: Liever een iets minder semantische markup dan een niet werkend systeem... Dus als het moet, dan met een <img /> erin.

[faabman]

je kunt ipv pure-css ook javascript gebruiken om de menus te openen... Dus een onmouseover op je LI en voordat je het nieuwe menu opent kijken of er een ander menu open is... zo ja dan doe je niets...

eventueel kun je aan de hand van coördinaten nog kijken of je wel of geen overlapping krijgt...

[Thijsmans]

1. Je sluit de [url-tag] af met [/ur ], moet natuurlijk [/url] zijn
2. Gebruik als je de '>' wilt neerzetten in tekst geen '>', maar >
3. Bij mij werkt het prima met z-index:

code:

    <li style="top: 260px; left: 185px; z-index: 5;">>>
      <ul>
        <li><a href="#">dsfsfsd</a></li>
        <li><a href="#">asewrf</a></li>
        <li><a href="#">euurnne</a></li>
        <li><a href="#">blaat</a></li>
      </ul>
    </li>
    <li style="top: 300px; left: 220px; z-index: 4;">>>
      <ul>
        <li><a href="#">CA</a></li>
        <li><a href="#">NJ</a></li>
      </ul>
    </li>
    <li style="top: 40px; left: 330px; z-index: 3;">>>
      <ul>
        <li><a href="#">NSW</a></li>
        <li><a href="#">WA</a></li>
      </ul>
    </li>

hth

[Verwijderd]

Ok, ik heb het inmiddels aangepast en het werkt idd, en ondanks dat je tkene geparsed werd zal je dit:

code:

>

wel bedoelen. Heb ik ook aangepast.

Verder werkt het met het hover nu in mozilla, en warempel jaja ook in IE

Nog 1 probleempje, de haakjes die ik neergezet heb in de li, als ware het pijltjes (gebruik geen plaatjes want dan moet ik weer een hack maken voor IE die geen doorzichtige PNS's ondersteund), die komen nog wel boven het submenuutje uit, iemand een idee hoe dit op te lossen?

Alvast bedankt tot nu toe, scheelt weer een hoop geklooi.

edit: zelfde link gebruiken voor een preview (die is aangepast inmiddels tot werkende...)

[ Voor 9% gewijzigd door Verwijderd op 27-09-2004 21:10 ]

[Verwijderd]

Wederom een update, zit nog steeds met hetzelfde probleem van de haakjes die nog steeds door de achtergrond afbeelding heen komen.

ik dacht dit als volgt op te lossen:

code:

ul#world > li:hover {
    z-index: 2;
}

ul#world > li {
    z-index: 1;
}

Maar dit werkt niet, iemand die weet wat het wel oplost? En als ik er span omheen zet zou het dan moeten werken met deze code:

code:

ul#world > li:hover span{
    z-index: 2;
}

ul#world > li span{
    z-index: 1;
}

voor zover nog niet. Iemand een manier die weet hoe dit opgelost kan worden, voorbeeld van wat ik nu heb: http://www.sitedezign.net/test/test.html

Het hoeft overigens niet voor IE compatible te zijn, want die laat de haakjes wel achter het background-image vallen...

[Verwijderd]

Heb je het al opgelost? Ik zie het probleem niet namelijk...

[Verwijderd]

Verwijderd schreef op 29 september 2004 @ 16:04:
Heb je het al opgelost? Ik zie het probleem niet namelijk...

Nee het is nog niet opgelost, en eh in welke browser bekijk je het, want in IE werrkt ie WEL...

in mozilla (firefox) niet.

[Verwijderd]

Ik bekijk hem in Firefox 1.0 PR en IE 6.0 . Ik bedoelde eigenlijk dat ik niet snapte wat je nou precies met wat er fout ging.

Als je wil dat het 'pijltje' niet zichtbaar is wanneer er tekst overheen gaat kan je misschien met een beetje JavaScript de andere <div> laten verwijderen bij een mouseover-event van het ene vierkantje.

[Vinzzz243]

geef de betreffende li of ul een class naam, en hide die vervolgens bij een rollover, zo moeilijk toch niet?

edit: verkeerd gelezen, maar omdat je 'onderliggende' li niet genest is in de andere, gaat t je niet lukken met css

edit2: je zegt dat het niet uitziet met een achtergrond, maar een net gekleurd blok met bijpassende 1px border ziet misschien nog beter uit dan alleen tekst, en je probleem is gelijk verholpen...

[ Voor 75% gewijzigd door Vinzzz243 op 01-10-2004 19:13 ]

[Verwijderd]

Ok, thnx voor je reactie, ga ik zeker wat mee doen, ziet er idd niet zo slecht uit namelijk...

thnx a lot