[JS] Menu met images en horizontaal submenu

[Deddiekoel]

Ik hier nu al drie dagen mee bezig en begin gek te worden. Zo moeilijk kan het nl. niet zijn.
Ik probeer het volgende te bereiken:

Ik heb een menu balk met menu knoppen die bestaat uit plaatjes met een rollover. Hieronder wil ik nu een submenu laten verschijnen als je met je muis over het hoofditem gaat. Dit alles lukt nig wel, maar waar het fout is wanneer ik in het submenu ga. Dan schiet nl. het plaatje van het hoofditem weer terug!

Ik heb uiteraard flink zitten Googelen en deze link komt het meest in de buurt: http://www.duoh.com/csstutorials/2levelmenu/index.html
Maar deze heeft nog steeds 'mijn' beperking.

Waar nu naar op zoek ben is hoe ik mijn hoofditem actief hou als ik met mijn muis in het submenu zit. Op dit moment s het submenu nog een aparte cel in de tabel.

Aanpak die ik tot nu toe heb gedaan is om mouseover en mouseout events op een cel te zetten die het submenu verbergen en tonen. In die cel zitten dan weer twee rijen met hoofd- en submenu. Dit werkt op zich prima. Maar als ik dit ga 'mengen' met de image rollover dan gaat het mis.

[OkkE]

Door de <li> van je hoofditem een class te geven onMouseOver, of nog beter gewoon li:hover gebruiken, weet je welk item actief is, en kun je de child <ul> ook stijlen.

[Camulos]

@OkkE :: ik geloof dat de TS het precies andersom wil

Wanneer je een sub-element hebt.. zoek je simpel weg de parent op en die stijl je

Ik neem aan dat je UL-LI-UL-LI (== UL - Hoofdelement - UL - Sub element) hebt (waarbij de laatste LI je sub-element is).. bij een mouseover hoef je aleen maar de parent (UL) en daar de parent van (LI) te stijlen.

Dus ff in javascript pseudocode:
li.parent.parent.setAttribute('style','active');

[OkkE]

@Camulos; Ik weet wat de TS wil, maar hij (en jij) denkt vanuit de verkeerde richting.
.

HTML:

<ul>
    <li>
        <a href="">Hoofditem</a>
        <ul>
            <li><a href="">Sub 1</a></li>
            <li><a href="">Sub 2</a></li>
        </ul>
    </li>
</ul>

Wanneer je met je muis over "Sub 1" gaat ga je ook over "Hoofditem". Op die manier kun je d.m.v. li:hover dus het "Hoofditem" stijlen, wanneer je over "Sub 1" gaat. Geen Javascript nodig.

---

Online voorbeeld: http://azwart.nl/got/got4.html
.

[ Voor 8% gewijzigd door OkkE op 03-05-2011 08:44 ]

[Deddiekoel]

OkkE schreef op dinsdag 03 mei 2011 @ 08:34:
@Camulos; Ik weet wat de TS wil, maar hij (en jij) denkt vanuit de verkeerde richting.
.

HTML:

<ul>
    <li>
        <a href="">Hoofditem</a>
        <ul>
            <li><a href="">Sub 1</a></li>
            <li><a href="">Sub 2</a></li>
        </ul>
    </li>
</ul>

Wanneer je met je muis over "Sub 1" gaat ga je ook over "Hoofditem". Op die manier kun je d.m.v. li:hover dus het "Hoofditem" stijlen, wanneer je over "Sub 1" gaat. Geen Javascript nodig.

---

Online voorbeeld: http://azwart.nl/got/got4.html
.

Cool, thanks!
Maar nu zit ik nog met 1 probleem. De hoofditems zijn plaatjes. Ik kan die wel in CSS verwerken (hoewel ik (nog) niet met list items werkte), maar die moeten zelf ook weer klikbaar zijn. Als ik er plaatjes in verwerk zijn dat achtergrond plaatjes. Hoe zorg ik nu dat ik iets klikbaars krijg? Terwijl ik dit typ denk ik aan een transparant gif. Gaat dat werken? Ik ga het iig proberen.

Ow ja, de subitems moeten ook nog naast elkaar staan. Zoals t.net menu. Met de juiste float setting is dit ook recht gezet. Maar nu verspringt mijn hoofditem steeds.

[ Voor 6% gewijzigd door Deddiekoel op 03-05-2011 09:16 ]

[MueR]

Wat houdt je tegen om die enge img tag te gebruiken?

[OkkE]

Background-image op de <a> die je met li:hover kunt laten wijzigen, plus de <a> display:block; geven en de tekst er binnen verbergen.

[Deddiekoel]

OkkE schreef op dinsdag 03 mei 2011 @ 09:28:
Background-image op de <a> die je met li:hover kunt laten wijzigen, plus de <a> display:block; geven en de tekst er binnen verbergen.

Ik ga deze even proberen. Vooralsnog werkt mijn transparante gif ook. Maar als ik de li een background geef dan willen de subitems opeens niet meer naast elkaar staan...

Smerige oplossing is natuurlijk om maar 1 sub-li te doen en daarbinnen meerdere items te zetten. Dat werkt ook niet omdat de tekst dan wordt afgebroken... Opgelost door de ul ul een breedte mee te geven!

Code tot dusver:

HTML:

<!DOCTYPE html> 
<html lang="en" class=""> 
<head> 
<meta charset="UTF-8" /> 
<title>li:hover</title> 
<style> 
ul, li { margin: 0px; padding: 0px; list-style: none; }
ul li { float: left; }
ul a { color: blue; padding: 5px; }
ul li:hover a, ul li:hover ul a:hover { color: blue; }
ul li:hover ul a { color: red; }
ul ul { display: none; background: #fff; width: 200px }
ul ul li { float: left; }
 
ul li:hover ul { display: block; }
 
li#item1 {
    background-image:url(../images/button-11.png);
    height: 73px;
    width: 114px;
}
li#item1:hover {
    background-image:url(../images/button-12.png);
}
li#item2 {
    background-image:url(../images/button-11.png);
    height: 73px;
    width: 90px;
}
li#item2:hover {
    background-image:url(../images/button-12.png);
}
</style> 
</head> 
<body> 
 
<ul> 
    <li id="item1"> 
        <a href=""><img src="../images/transparant.png" width="114" height="73" alt="Over ons"></a> 
        <ul> 
            <li><a href="">Sub 1.1</a></li> 
            <li><a href="">Sub 1.2</a></li> 
        </ul> 
    </li> 
    <li id="item2"> 
        <a href=""><img src="../images/transparant.png" width="90" height="73" alt="Cases"></a> 
        <ul> 
            <li><a href="">Sub 2.1</a></li> 
            <li><a href="">Sub 2.2</a></li> 
            <li><a href="">Sub 2.3</a></li> 
        </ul> 
    </li> 
</ul> 
 
</body> 
</html>

Is het trouwens mogelijk om de naam van het plaatje te koppelen aan de id naam? Zodat ik niet per id de dingen hoef te definieren?

[ Voor 6% gewijzigd door Deddiekoel op 03-05-2011 10:38 ]

[Camulos]

@okke ::dat is inderdaad een zeer nette oplossing
had ik nog niet zo bedacht (en weer wat geleerd vandaag)