aufklappbare menüs

SamElevenFive · 9. August 2010

Hallöchen liebe leuts (und die die es werden wollen =P)

ihr kennt doch bestimmt die seite chip.de !? da würde ich gerne mal wissen, wie ich solche aufklappbaren menüs in eine homepage einbaue, wie es chip am oberen teil der seite macht. bin mir nicht sicher ob das nur html ist oder javascript. glaube aber, dass es javascript ist.

sorry falls das thema schonmal angesprochen wurde, hab nur leider nicht viel zeit zu suchen, da ich gleich weg muss.

mfg
samelevenfive

lauras · 9. August 2010

Solche Menus kann man mit HTML/CSS oder HTML/Javascript erstellen, wobei ich die CSS-Variante empfehlen würde.
Ich hab jetzt nicht nachgeguckt, wie die das auf chip.de machen, aber HTML/CSS/Javascript-Code wird ja angezeigt - schau doch einfach mal in den Code.
Wenn du möchtest, kann ich dir ein einfaches Beispiel für ein CSS-Menu zur Verfügung stellen, welches du dir anpassen kannst.

Gruß

feinshdens · 9. August 2010

lauras

ich würd mich schon für deinen code interessieren^^

hab ich doch so meine probleme mit dem IE bei Drop down menus @.@

wird daran liegen das ich mich noch nicht mit den browserweichen angefreundet habe^^

Gruss

lauras · 9. August 2010

Klar, kein Ding, aber ein paar Anmerkungen:

1. Das Javascript, was den hover-Effekt für den IE nachrüstet, fehlt im Code, das müsstest du dir selber raussuchen oder du wartest noch ne Woche

2. Der Code ist beim Check durch einen Validator invalid, da ich leere IDs im Code hab. Die kann man bei Bedarf verwenden, z.B. wenn man verschiedene Hintergrundbilder/Farben etc. möchte. Wer das nicht möchte, muss die leeren IDs natürlich rausnehmen und kann allgemein über die Klassen ansprechen.

3. Wer mit wechselnden Hintergrundbildern arbeiten möchte, den stört vielleicht die Schrift in den Links. Für Suchmaschinenfreundlichkeit und Barrierefreiheit sollte man die jedoch drinlassen. Lösung: <span> drum und durch die Ansprache des <span> in der CSS rausschieben. Ggf. kann ich da auch noch mal ein Beispiel machen.

Gruß

HTML

<!DOCTYPE html>
<html> 
 
<head> 
    <title>Menu mit reinem HTML und CSS</title> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 
    <meta name="keywords" content="" /> 
 
<style> 
<!-- 
* {
    padding: 0;
    margin: 0;
}
 
body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: small;
}
 
ul#main_menu {
    width: 605px;
    list-style: none;
    margin: 0.5em;
}
 
ul#main_menu li.main_menu_item {
    position: relative;
    line-height: 24px;
    float: left;
    border: 1px solid black;
    margin-right: -1px;
    width: 150px;
}
 
ul#main_menu li a {
    display: block;
    padding: 5px;
    width: 160px;
    w\idth: 150px;


}
 
li ul.sub_menu {
    position: absolute;
    left: -999px;
    width: 162px;
    w\idth: 152px;
    margin-left: -1px;

}
 
ul.sub_menu li.sub_menu_item {
    list-style: none;
    line-height: 24px;
    border: 1px solid black;
    margin-bottom: -1px;
}
 
ul#main_menu li:hover ul.sub_menu {
    left: auto;

}
 
 -->
</style> 
</head> 
 
<body id="index"> 
<ul id="main_menu"> 
    <li class="main_menu_item"><a id="" href="#" title="Link 1">Link 1</a></li> 
    <li class="main_menu_item"><a id="" href="#" title="Link 2">Link 2</a> 
        <ul class="sub_menu"> 
            <li class="sub_menu_item"><a id="" href="#" title="Link 2.1">Link 2.1</a></li> 
 
            <li class="sub_menu_item"><a id="" href="#" title="Link 2.2">Link 2.2</a></li> 
            <li class="sub_menu_item"><a id="" href="#" title="Link 2.3">Link 2.3</a></li> 
        </ul> 
    </li> 
    <li class="main_menu_item"><a id="" href="#" title="Link 3">Link 3</a> 
        <ul class="sub_menu"> 
            <li class="sub_menu_item"><a id="" href="#" title="Link 3.1">Link 3.1</a></li> 
 
            <li class="sub_menu_item"><a id="" href="#" title="Link 3.2">Link 3.2</a></li> 
            <li class="sub_menu_item"><a id="" href="#" title="Link 3.3">Link 3.3</a></li> 
        </ul> 
    </li> 
    <li class="main_menu_item"><a id="" href="#" title="Link 4">Link 4</a></li> 
</ul> 
 
 
</body> 
 
</html>

Alles anzeigen

sejuma · 10. August 2010

http://www.ohne-css.gehts-gar.net/0066.php

feinshdens · 10. August 2010

vielen dank erstmal^^

ein paar fragen, wenns recht ist^^

was bedeutet der backslash in w\idth ?
ist das hier
Code
```
ul#main_menu li:hover ul.sub_menu {
    left: auto;
```
der grund dafür dass das menü aufklappt

Gruss

lauras · 10. August 2010

Sicher

Zitat

was bedeutet der backslash in w\idth ?

Behebt Fehler im Box-Modell. Ich hoffe, dass das ganze irgendwann mal überflüssig wird..

Zitat
ist das hier
Code
ul#main_menu li:hover ul.sub_menu {
    left: auto;
der grund dafür dass das menü aufklappt

Ja. Zur Erklärung musst du allerdings etwas früher im Code gucken. Irgendwo wird das betreffende Menu mal um 999px nach links rausgeschoben.
Beim hovern wird diese Ausrückung rückgängig gemacht, sodass das Menu erscheint.

LG

SamElevenFive · 10. August 2010

dankeschön für den code lauras! hast mir (und bestimmt auch anderen) super geholfen =)

lauras · 10. August 2010

Kein Ding. Wer Fragen zum Einbau oder zur Formatierung hat kann gerne fragen

LG

feinshdens · 29. Oktober 2010

[attachment=0]IE 6.png[/attachment]wenn ich mir das menü im IE6 anseh siehts so aus:

Sören · 29. Oktober 2010

Ich weiß jetzt nicht genau, wie das aussehen soll.

Ich denke mal der Hover-Effekt funktioniert im IE6 nicht, oder?
Wenn ja, das liegt daran, dass IE6 (und niedriger) die Pseudo-Klasse ":hover" nur für Links kennen, also nicht bei Listenelememten. Mit JavaScript kann man, wie weiter oben schon geschrieben, dies nachrüsten.

Hier ist ein JS-Snippet von http://htmldog.com/articles/suckerfish/dropdowns/, nennt sich Suckerfish Dropdown.
Ich habe den JS-Code mal rausgenommen:

Zitat von "http://htmldog.com/articles/suckerfish/dropdowns/"

Code

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Alles anzeigen

Ändern musst du vielleicht noch die ID im JS-Code und in deinem CSS-Code musst du überall zusätzlich zu den entsprechenden Hover-Effekten, das gleiche mit der Klasse ".sfhover" statt ":hover" hinzufügen.
Ich denke, der Code ist selbsterklärend, sonst ist alles nochmal auf der Seite beschrieben

Basi · 29. Oktober 2010

JavaScript ist noch zu häufig nicht aktiviert um ein so wichtiges Element wie eine Steuerung selbigem anzuvertrauen.

Einfach CSS benutzen soweit es geht.

Sören · 29. Oktober 2010

Viele Seiten benutzen aber Dropdown-Menüs, damit vertrauen die bei IE6 oder kleiner die Navigation auch JavaScript an. Man sollte aber zusätzlich noch andere Möglichkeiten anbieten, um auf die auszuklappenden Seiten zu gelangen.

Sarkkan · 29. Oktober 2010

Zitat von "Peter1978"

[attachment=0]IE 6.png[/attachment]wenn ich mir das menü im IE6 anseh siehts so aus:

Wobei nur ungefähr 5% den IE6 verwenden, Tendenz stark fallend (Wenn der Trend so bleibt wird es den IE6 in ungefähr 3-5Monaten kaum noch geben)

Und wenn ich jetzt für jeden Sc**** veralteten Poppelsbrowser irgendeine Ausnahme hinzufüge, kann das nachher nur Probleme in anderen, meist geläufigeren Browsern, verursachen.
Außerdem ist der IE 8 draußen, der wirklich mittlerweile Ordentlich ist und auch der IE 9 hat bei dem Acid3 Test 80pkt!!! (Höchstes Ergebnis für MS EVER!)

Tamolino · 9. Juni 2016

Zitat von lauras

Kein Ding. Wer Fragen zum Einbau oder zur Formatierung hat kann gerne fragen

LG

erstmal: Ich weiss mein Beitrag kommt reichlich spät , aber ich hoffe du kannst mir trotzdem noch antworten

Dein Code ist sehr aufschlussreich und hilfreich Lauras
Ich würde nun aber gerne noch wissen, wie ich die border des Menus verändern kann

LG

aufklappbare menüs

Jetzt mitmachen!

Teilen