Menu in css

[Verwijderd]

Hoi, ik ben mijn blogsite aan het vernieuwen en ik dacht dat het maar is tijd was voor een nieuw menu.
Nu ben ik op zoek naar een menu volgens het principe zoals hier op tweaker.net op de frontpage. Wanneer je dus bijvoorbeeld op artikelen wijst met je muis dat er dan nog meer categoriën (archieven, nieuws, redactieblog ....) te voorschijn komen en wanneer je elders op de pagina staat de categoriën er nog steeds staan.

Nu heb ik gezocht via google maar daar vind ik alleen openklap menu's die wanneer je elders op de pagina gaat staan terug dichtklappen (wat dus niet mag).
Hoe kan ik dit maken ? Lukt dit alleen met HTML en CSS of gaat hier meer met gemoeid ? Weten jullie mischien een tutorial zijn ?
Alvast bedankt

[Kiphaas7]

Dat open blijven staan wordt hier op tweakers hoogstwaarschijnlijk met javascript gedaan.

Die openklapmenu's waar je het over hebt zijn een prima start, probeer eerst daar een functioneel menu mee te maken, en ga daarna het "enhancen" met javascript. In principe zijn dit ook 2 gescheiden stappen waar dus vaak ook 2 verschillende tutorials over gaan, vandaar dat je het niet terugvond in de tutorials over het maken van de menu's.

Dat openklappen kan ook met php, en waarschijnlijk op nog vele andere manieren.

"A List Apart" is een mooie website waar je info over al dit soort zaken kan vinden. Het is natuurlijk niet de enige website, maar zeker een mooi begin.

[Avalaxy]

Dit gaat niet met CSS, CSS is namelijk alleen voor de opmaak. Je kunt er verder niets mee kwa klikbaarheid en uitschuifbaarheid en dergelijken (wel een hover, maar dat is wat anders).

Je zult waarschijnlijk naar de Javascript/AJAX toe moeten als je dergelijke geintjes uit wilt halen.

[Kwastie]

CSS kan hier wel degelijk voor gebruikt worden alleen de 'special effect' en in dit geval laten staan kan alleen gedaan worden door bijv. Javascript of Flash.Omdat CSS alleen een opmaak taal is.

leonpwner1 schreef op maandag 16 juni 2008 @ 00:38:
Je zult waarschijnlijk naar de Javascript/AJAX toe moeten als je dergelijke geintjes uit wilt halen.

Ajax is buzzwoord, het enigste wat het doet is data asynchroon naar de server te sturen. De rest is gewoon javascript. Dus de volgende keer associeer niet alles wat gewoon Javascript is met Ajax.

[ Voor 3% gewijzigd door Kwastie op 16-06-2008 00:49 ]

[Avalaxy]

Kwastie schreef op maandag 16 juni 2008 @ 00:48:
[...]


Ajax is buzzwoord, het enigste wat het doet is data asynchroon naar de server te sturen. De rest is gewoon javascript. Dus de volgende keer associeer niet alles wat gewoon Javascript is met Ajax.

I know, maar waarom zou het daarom fout zijn?

Anyhow, ik raad de TS aan niet met flash te gaan werken voor een menu... Denk dat het het beste (en makkelijkste) is als hij het bij Javascript houdt.

[_eXistenZ_]

Het is fout omdat je van te voren allang weet hoe je menuindeling er uit ziet, die ga je niet ff lekker dynamisch op lopen te halen, en ook nog _bij elke mouseover_

[Gomez12]

Theoretisch kan je zo'n groot menu hebben wat bijna niemand ooit gebruikt dat het niet lonend is om het in je standaard html mee te sturen, maar pas als de pagina geladen / onmouseover dan binnenhalen en tonen.

Met een beetje clientside-caching is dit best wel te doen.
Alleen moet je dan imho wel een menu hebben van een paar honderd kb ( minified en gegzipped ) wil je deze moeite / foutkans lonend maken...

Maar het kan lonend zijn...

[Verwijderd]

Opgelost ik heb het ergens gevonden op een site ! De volgende site ziet er alvast veel beter uit
Hoe ik die andere nog online laat staan

[_eXistenZ_]

Verwijderd schreef op maandag 16 juni 2008 @ 02:10:
Opgelost ik heb het ergens gevonden op een site ! De volgende site ziet er alvast veel beter uit
Hoe ik die andere nog online laat staan

Praat nou geen poep ja
Hoe moeten wij weten wat je met vorige en volgende enzo bedoeld... online laten staan kan door m niet te verwijderen... zegt men glazen bol.

[MueR]

Maareh psst, deel je dat linkje van je bron dan even? Dan heeft de zoekmachine ook wat nuttigs te eten.

[Verwijderd]

Hier heb ik het gevonden.
Wanneer onmouseout="hide()" , hide vervangt door show blijft het menu staan...
Je moet wel zelf nog je style toepassen buttons enzo, maar bij mij is het goed gelukt.

[H004]

Verwijderd schreef op maandag 16 juni 2008 @ 14:11:
Hier heb ik het gevonden.
Wanneer onmouseout="hide()" , hide vervangt door show blijft het menu staan...
Je moet wel zelf nog je style toepassen buttons enzo, maar bij mij is het goed gelukt.

Dat lijkt me niet echt een SEO-vriendelijke optie, aangezien al je submenu's pas HTML (dus spiderbaar) worden als er een javscriptactie wordt uitgevoerd. Ik zou het script iets verbouwen en alle submenu's al in de html plaatsen met style="visibility: hidden;" etc.. Dmv javascript zou ik dan visibility togglen, zodat een submenu zichtbaar wordt (of niet).

Cascading Stylesheet:

#SubMenu_1, 
#SubMenu_2 {
    visibility: hidden; // of iets anders wat nodig is om t te verbergen
}

JavaScript:

<script type="text/javascript">
function show(int) {
    // Loop door alle submenu's en maak ze hidden met hide(int); Mag je zelf doen...
    // vervolgens 1 visible maken
    var submenu = document.getElementById("SubMenu_" + int);
    submenu.style.visibility = "visible";

}
function hide(int) {
    var submenu = document.getElementById("SubMenu_" + int);
    submenu.style.visibility = "hidden";
}
</script>

HTML:

<ul id="Menu">
    <li><a href="#" onmouseover="show(1);">Link</a></li>
    <li><a href="#" onmouseover="show(2);">Link</a></li>
    <!-- Etc... -->
</ul>

<ul id="SubMenu_1"><li>...</li></ul>
<ul id="SubMenu_2"><li>...</li></ul>
<!-- Etc... -->

Enige wat nog niet werkt dan is dat je submenu niet openstaat zodra je op een submenu-pagina belandt. Dit kan je simpel oplossen met php en js door een extra style mee te geven aan het betreffende submenu.

code:

<script type="text/javascript>
<?php echo "var pagina = ".$_GET["pagina"]; ?>
// alle submenus doorlopen
for (var i = 1; i < 5; i++){
    if (SubMenu_i bevat pagina) { // moet jezelf even uitvogelen hoe je dat doet
        var submenu = document.getElementById("SubMenu_i);
        submenu.style.visibility = "visible";
    }
}
</script>

Genoeg ingrediënten om je menu goed te maken, lijkt me zo...

[ Voor 52% gewijzigd door H004 op 16-06-2008 16:00 ]

[Verwijderd]

Ik zal zeker dit script eens bekijken want SEO is heel belangrijk de dag van vandaag
Dat het menu nog niet openstaat wanneer je naar die pagina gelinkt wordt geeft niet echt.
Maar wat betreft SEO van het oude menu, is dit nodig ? Ik maak gebruik van een sitemap via een google account. Dan worden toch alle pagina's geïndexeerd die in de sitemap staan ?

[Verwijderd]

Ik heb 2 "problemen"
1. De submenu's moeten niet onder elkaar maar op dezelfde plaats verschijnen
2. Wanneer je van link1 naar link2 wijst, komt het submenu van link2 te voorschijn maar blijft die van link1 nog staan ( die moet verdwijnen, zodat de andere in de plaats komt)


het 2 de probleem is opgelost door hide toe te voegen:
<ul id="Menu">
<li><a href="#" onmouseover="show(1);hide(2)">Link</a></li>
<li><a href="#" onmouseover="show(2);hide(1)">Link</a></li>
<!-- Etc... -->
</ul>

[ Voor 37% gewijzigd door Verwijderd op 16-06-2008 17:06 ]

[martijnve]

Verwijderd schreef op maandag 16 juni 2008 @ 17:00:
Ik heb 2 "problemen"
1. De submenu's moeten niet onder elkaar maar op dezelfde plaats verschijnen
2. Wanneer je van link1 naar link2 wijst, komt het submenu van link2 te voorschijn maar blijft die van link1 nog staan ( die moet verdwijnen, zodat de andere in de plaats komt)


het 2 de probleem is opgelost door hide toe te voegen:
<ul id="Menu">
<li><a href="#" onmouseover="show(1);hide(2)">Link</a></li>
<li><a href="#" onmouseover="show(2);hide(1)">Link</a></li>
<!-- Etc... -->
</ul>

Dit gaat niet werken als je zometeen 3 submenu's hebt en iemand gaat van 1 naar 3, h004 zegt ook nog in zn comments "Loop door alle submenu's en maak ze hidden met hide(int); Mag je zelf doen... ". verder zou je het ook nog met onmousin en onmouseout kunnen doen.

[Verwijderd]

vreemd het werkt nochtans met drie en meer

Cascading Stylesheet: stylesheet

#SubMenu_1, 
#SubMenu_2,
#SubMenu_3 {
    visibility: hidden; // of iets anders wat nodig is om t te verbergen
}

HTML: index

<div id="eerste">
<ul id="Menu">
    <li><a href="#" onmouseover="show(1);hide(2);hide(3)">Ikzelf</a></li>
    <li><a href="#" onmouseover="show(2);hide(1);hide(3)">Iemand</a></li>
    <li><a href="#" onmouseover="show(3);hide(1);hide(2)">Foto</a></li>
    <!-- Etc... -->
</ul>

<div id="SubMenu_1"><div>Nieuws</div><div>Laatste Nieuws</div><div>Updates</div><div>theepot</div></div>
<div id="SubMenu_2"><li>Nieuwsvanmzelf</li></div>
<div id="SubMenu_3"><li>CocaCola</li></div>
<!-- Etc... -->
</div>

Hoe moet het dan wel ?

[ Voor 9% gewijzigd door Verwijderd op 16-06-2008 17:26 ]

[martijnve]

Ah, ja dat kan maar efficient en netjes is anders.

Netter is om boven aan de, show(x) functie een loopje zetten die alle andere menu's hide.

iets in de trand van:

JavaScript:

function show(int) {
    var i=0;
    for (i = 1; i <= je-hoogste-menu-nummer; i++){
        hide(i);
    }
    var submenu = document.getElementById("SubMenu_" + int);
    submenu.style.visibility = "visible";

} 

HTML: index

<div id="eerste">
<ul id="Menu">
    <li><a href="#" onmouseover="show(1)">Ikzelf</a></li>
    <li><a href="#" onmouseover="show(2)">Iemand</a></li>
    <li><a href="#" onmouseover="show(3)">Foto</a></li>
    <!-- Etc... -->
</ul>

<div id="SubMenu_1"><div>Nieuws</div><div>Laatste Nieuws</div><div>Updates</div><div>theepot</div></div>
<div id="SubMenu_2"><li>Nieuwsvanmzelf</li></div>
<div id="SubMenu_3"><li>CocaCola</li></div>
<!-- Etc... -->
</div>

[ Voor 38% gewijzigd door martijnve op 16-06-2008 17:30 ]

[H004]

Verwijderd schreef op maandag 16 juni 2008 @ 17:00:
Ik heb 2 "problemen"
1. De submenu's moeten niet onder elkaar maar op dezelfde plaats verschijnen
2. Wanneer je van link1 naar link2 wijst, komt het submenu van link2 te voorschijn maar blijft die van link1 nog staan ( die moet verdwijnen, zodat de andere in de plaats komt)


het 2 de probleem is opgelost door hide toe te voegen:
<ul id="Menu">
<li><a href="#" onmouseover="show(1);hide(2)">Link</a></li>
<li><a href="#" onmouseover="show(2);hide(1)">Link</a></li>
<!-- Etc... -->
</ul>

1: Dat kan je oplossen met css: bv met visibility en een "position: relative" op de submenu's, of "display" gebruiken ipv visibility. Beetje prutsen, dat heb je vast wel in no time opgelost.
2: Precies zoals MartijnVe zegt (en ik in de comments bij t scriptje, lezen is ook een vak he )

JavaScript:

function show(int) {
    // Loop door alle submenu's en maak ze hidden met hide(int):
    for (var i = 1; i <= 4; i++){
        hide(i);
    }
    // vervolgens 1 visible maken 
    var submenu = document.getElementById("SubMenu_" + int);
    submenu.style.visibility = "visible";
}

[Verwijderd]

Vreemd nu krijg ik niets van submenu's meer
Ik heb "je-hoogste-menu-nummer" vervangen door 3 want er zijn maar 3 menu's...
Of doe ik iets fout want ik ken niets van Jave.

[ Voor 4% gewijzigd door Verwijderd op 16-06-2008 17:42 ]

[H004]

Zet anders eens je (test-)pagina online, hoe moeten wij nu weten wat er niet meer werkt aan jouw code?

offtopic:
Overigens: het is niet jave, maar java, en java is echt iets totaal anders dan javascript, dus ik neem aan dat je bedoelt: "Of doe ik iets fout want ik begrijp niets van Javascript."...

[Verwijderd]

oké komt voor elkaar


klik !


stylesheet

[ Voor 100% gewijzigd door Verwijderd op 16-06-2008 17:54 ]

[H004]

Er staat een } teveel in je script. Haal die weg en t werkt. Succes ermee.

[Verwijderd]

lol door zo een klein haakje bedankt !!!!!!
Nu er nog voor zorgen dat allé submenu's op dezelfde plek verschijnen. Hoe kan ik daarvoor zorgen ?

[H004]

Verander alle visibility's voor display, alle hiddens voor none, en alle visible's voor block.

[Verwijderd]

ik snap er geen snars van sorry

zo dus

HTML: index

<script type="text/javascript">
function show(int) {
    // Loop door alle submenu's en maak ze hidden met hide(int):
    for (var i = 1; i <= 3; i++){
        hide(i);
    }
    // vervolgens 1 visible maken 
    var submenu = document.getElementById("SubMenu_" + int);
    submenu.style.visibility = "display"; 

}

function hide(int) {
    var submenu = document.getElementById("SubMenu_" + int);
    submenu.style.visibility = "none";
}
</script>

Cascading Stylesheet: index

#SubMenu_1, 
#SubMenu_2,
#SubMenu_3 {
    visibility:block;
 float:left;

}

[ Voor 255% gewijzigd door Verwijderd op 16-06-2008 18:09 ]

[Verwijderd]

het werkt niet

[martijnve]

heb hem verbeterd:

Verwijderd schreef op maandag 16 juni 2008 @ 18:04:
ik snap er geen snars van sorry

zo dus

HTML: index

<script type="text/javascript">
function show(int) {
    // Loop door alle submenu's en maak ze hidden met hide(int):
    for (var i = 1; i <= 3; i++){
        hide(i);
    }
    // vervolgens 1 visible maken 
    var submenu = document.getElementById("SubMenu_" + int);
    submenu.style.display= ""; 

}

function hide(int) {
    var submenu = document.getElementById("SubMenu_" + int);
    submenu.style.display= "none";
}
</script>

Cascading Stylesheet: index

#SubMenu_1, 
#SubMenu_2,
#SubMenu_3 {
    display:none;
 float:left;

}

[Verwijderd]

Eindelijk hartelijk bedankt !!!

[H004]

Alleen moet regel 9 eigenlijk

JavaScript:

submenu.style.display= "block";

zijn...

[Verwijderd]

aangepast thx

[martijnve]

H004 schreef op maandag 16 juni 2008 @ 19:13:
Alleen moet regel 9 eigenlijk

JavaScript:

submenu.style.display= "block";

zijn...

Dan maak je toch alles block? in geval van divs ed niet erg maar ik dacht dat "" alles terug naar default zette?