Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

HTML - CSS - Dropdownmenü

  • 1
  • 2

Werbeanzeige

Käsekönig

1x Contest-Sieger

  • »Käsekönig« ist der Autor dieses Themas

Beiträge: 343

  • Private Nachricht senden

1

02.03.2015, 16:19

HTML - CSS - Dropdownmenü

Nach langer, langer Zeit wieder mal ein Post von mir. :D
Ich weiß, HTML ist ja keine Programmiersprache, ich hoffe trotzdem, dass der Thread hier halbwegs rein passt.

Ich arbeite aktuell gerade an einer eigenen Website.
Allerdings steh ich aktuell gerade vor einer Hürde, bei der ich leider nicht weiter komme.

Und zwar würde ich gerne eine dritte Ebene in mein Dropdownmenü einfügen.
Das Dropdownmenü ist als unsortierte Liste aufgebaut und mit CSS formatiert.

So soll dies dann in etwa aussehen (bzw. sieht mein Menü so aus, nur mit bisher 2 Ebenen)

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<ul>
    <li>
        <a>Ebene 1 - a</a>
        <ul>
            <li><a>Ebene 2 - a</a></li>
            <li>
                <a>Ebene 2 - b</a>
                <ul>
                    <li><a>Ebene 3 - a</a></li>
                    <li><a>Ebene 3 - b</a></li>
                </ul>
            </li>
            <li><a>Ebene 2 - c</a></li>
        </ul>
    </li>
    <li><a>Ebene 1 - b</a></li>
    <li><a>Ebene 1 - c</a></li>
<ul>


In CSS habe ich dann folgendes (die Liste steht in einem <div id="nav">):

Quellcode

 
1
2
3
4
5

#nav ul { padding:0px; margin:0px; }
#nav ul li { list-style-type:none; float:left; border-right:1px solid #DFDFDF; background-color:#FAFAFA; box-shadow:2px 2px 2px #DFDFDF; }
#nav ul li > a  { text-decoration:none; display:block; padding:14px 34px 14px 34px; color:#030303; transition:background 0.4s ease-out; }
#nav ul li ul   { visibility:hidden; display:inline; position:absolute; padding:0px; }
#nav ul li ul > li { float:none; }


Mit der 1. Zeile definiere ich die Abstände zum nav-Element
Mit der 2. Zeile nehm ich die Aufzählungspunkte weg, lass die Listeneinträge nebeneinander platzieren, mach einen Rahmen, setz die Hintergrundfarbe und mach mir einen Schatten.
Mit der 3. Zeile nehm ich den Standardstyle (unterstrichen, Farbe) für die Links weg, definiere Abstand, Farbe und so einen weichen Übergang - was display:block in diesem Fall bewirkt, weiß ich nicht (das a wird dann zu einem Blockelement, im Gegensatz zu inline, aber was tut es hier?).
Mit der 4. Zeile versteck ich die Liste mit der Ebene 2 (durch hover hol ich das dann wieder hervor), Inlinepositionierung, Positionierung relativ zum nav-Element und kein Abstand.
Mit der 5. Zeile sollen die Listenelemente der Ebene 2 alle wieder untereinander angeordnet werden.

So weit funktioniert alles gut, allerdings komm ich nicht dahinter, wie ich die 3. Ebene dazu bringe, das erste Element rechts neben der 2. Ebene anzuzeigen und die anderen Elemente dann direkt darunter.
Vielleicht kann sich das jemand kurz auf meiner Website ansehen und mir einen Tip geben, was ich in CSS da machen muss, dass es funktioniert.

Vielen Dank im Voruas. :)

Sacaldur

Community-Fossil

Beiträge: 2 301

Wohnort: Berlin

Beruf: FIAE

  • Private Nachricht senden

2

02.03.2015, 16:49

Quellcode

 
1
2
3
4
5
6
7
8

#nav ul li ul li {
    position: relative;
}
#nav ul li ul li ul {
    position: absolute;
    left: 100%;
    top: 0;
}


Am Rande ein paar Hinweise:
  • Die meisten lis könnte man auch auslassen, da auch ohne diese der Code die gleiche Wirkung haben sollte.
  • Es wäre besser, Klassen zu verwenden, die beschreiben, um _was_ (Menüpunkt, Menü-Container, ...) es sich handelt. (An dieser Stelle ist der Unterschied noch relativ gering, aber wenn man erstmal mit Spielereien, wie td > span anfängt, macht man etwas... suboptimal...)
  • Zugunsten der Usability/Barrierefreiheit sollte man nicht auf das Hovern mit dem Mauscursor angewiesen sein, um an entsprechende Informationen zu kommen. Auf Smartphones und Tablets gibt es meist keinen Mauscursor, also würde man die Unterpunkte nicht erreichen können.
Spieleentwickler in Berlin? (Thema in diesem Forum)
---

Zitat von »Jonathan_Klein«

Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].

phptroll

Frischling

Beiträge: 5

Beruf: FIAE

  • Private Nachricht senden

3

02.03.2015, 19:15

Semantik ist der Schlüssel ...

Zunächst muss ich mich meinem Vorredner anschließen. Auf mobilen Endgeräten wirst du damit Probleme haben.
Solche Navigationen sollte man nach meiner Erfahrung immer mit Javascript basteln. (Wer heutzutage Javascript deaktiviert hat, weiß warum er das macht und ist in der Regel auch in der Lage, es wieder zu aktivieren. Zur Not ein No-Script-Hinweis) Das kannst du auch ganz bequem mit einem Framework wie JQuery machen.

Falls du aber bei deiner Lösung bleiben möchtest:
Setze doch ganz einfach ein weiteres ul in eines deiner "unter"-li. Dann passt du diese uls und lis einfach per CSS wieder an.

Noch ein Tipp (der Vorredner hatte es z. T. erwähnt), baue das ganze semantisch auf. Mit HTML5 haben wir zusätzliche Tags wie, nav und header erhalten.
Und verteile fröhlich CSS-Klassen. Mit IDs sollte man eigentlich immer eher sparsam umgehen, da sie später schwer zu kaskadieren sind.

Käsekönig

1x Contest-Sieger

  • »Käsekönig« ist der Autor dieses Themas

Beiträge: 343

  • Private Nachricht senden

4

02.03.2015, 20:07

Vielen Dank, das funktioniert so wie ich es wollte. :)

Meinst du, das ganze nicht als Liste aufzubauen, sondern mit <div class ...> oder den Listen Klassen zuzuweisen?

Das mit dem Hovern und Smartphone ist mir schon aufgefallen. Ich dachte, dass man da dann im Regelfall sowieso eine mobile Version anbietet und wollte mir mal eine Version basteln, die auf dem PC halbwegs anzuschauen ist.
Ich muss dazu sagen, ich bin mit der ganzen Thematik noch nicht sehr weit. Ich hab erst jetzt in diesem Jahr mit HTML und CSS angefangen. Zu Javascript bin ich noch gar nicht gekommen bisher.

Zitat von »phptroll«

Mit HTML5 haben wir zusätzliche Tags wie, nav und header erhalten.

Die sind mir schon untergekommen, ja. Ich hab mir dazu auch ein paar Websites angesehen und da wurde auch großteils mit <div id="..."> gearbeitet. Da hat man dann ein nav, ein header, ein footer gebastelt. Ich dachte, damit wäre ich flexibler und nicht "nur" auf die vorhandenen Elemente <nav>, <header>, ... beschränkt. Ist also nicht das selbe, wie wenn ich es mit <div id="nav"> mache!? Vom Verhalten her ist ja <nav> genauso ein Blockelement, dem ich genauso alle Werte zuweise wie dem <div> Element.

phptroll

Frischling

Beiträge: 5

Beruf: FIAE

  • Private Nachricht senden

5

02.03.2015, 20:46

Ich meinte damit dass du den Listenelementen semantische Klassen geben kannst/darfst/sollst. Z. B.: <li class="subnavi">.
Das liegt aber in deinem ermessen (solange du alleine entwickelst). Wenn du so klar kommst, ist das natürlich gut und prinzipiell ja nicht schlecht.
Das mit den semantischen Tags geht etwas weiter und ist zum Teil natürlich auch eine philosophische Frage. <div id="nav"> und <nav> scheinen auf den ersten Blick das selbe zu sein, allerdings wirst du beim kaskadieren des nav-Elements weniger Probleme haben als bei einer id. Außerdem ist es aus semantischem Aspekt ansprechender. Zu guter Letzt freut sich auch Google immer über semantisch aufgebaute Seiten und das kommt deinem Pagerank zugute. Und das waren nur die Punkte, die mir spontan einfallen.
Es gibt natürlich Gründe warum du auch die andere Version so oft findest. Viele uralt-Browser wie der IE6 haben einfach Probleme damit diese Tags zu interpretieren (aber diese Browser sind fast ausgestorben. Persönlich und auch bei mir in der Firma unterstützen wir solche Browser nur noch auf expliziten Kundenwunsch). Natürlich geistern auch noch extrem viele HTML4.1 und XHTML-Seiten durchs Netz. Manchmal ist es aber auch nur Unwissenheit.

Anhang: Auf mobile Webseiten bin ich gerade gar nicht eingegangen. Ja, es gibt die Möglichkeit ein Gerät zu erkennen und entsprechend eine mobile Webseite zu schalten. Du meinst Webseiten die statt mit www. mit m. beginnen oder? Das ist in meinen Augen die weniger schöne Variante. Besser finde ich es, das Augenmerk von Anfang an auf Responsive Design (google das mal) zu legen. Aber das ist auch wieder so ne Geschmackssache (Auch die des Verbrauchers).

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »phptroll« (02.03.2015, 20:54)

Käsekönig

1x Contest-Sieger

  • »Käsekönig« ist der Autor dieses Themas

Beiträge: 343

  • Private Nachricht senden

6

05.03.2015, 22:58

Danke für den vielen Input. :D
Werde also bei Gelegenheit mal das <div id="nav">, etc. auf <nav>, <footer>, etc ändern.

Bezüglich mobile Websiten (Responsive Design) werd ich mich da also noch schlau machen.

drakon

Supermoderator

Beiträge: 6 513

Wohnort: Schweiz

Beruf: Entrepreneur

  • Private Nachricht senden

7

05.03.2015, 23:41

Mal so generell: Benutz irgendein CSS Framework, wie Bootstrap. Das nimmt dir sehr viel von den ekligen Aufgaben ab und du kannst dich darauf konzentrieren eine schöne Seite zu machen anstatt all die Probleme und Kniffe zu lernen, die es braucht um eine moderne Seite zu machen.

Es macht einfach keinen Spass mehr ohne solche Hilfsmittel.

Also: Probier noch mal ein wenig damit rum das selbst zu machen. Wenn du glaubst, dass dus vernünftig hingekriegt hast, dann:
1. Wechlse mal auf einen anderen Browser (& oder älteren)
2. Wechsle auf ein anderes Betriebssystem
3. Wechsle mal auf ein mobiles Betriebssystem/Browser

Dann merke, dass es doch noch nicht hingekriegt hast ein einfaches responsive Dropdown hinzukriegen und dann probier mal ein Framework aus, und mach die obigen Punkte nochmal. Dann verstehst du den Nutzen sehr schnell.

Update:
Und achja. Anstatt einen Counter benutzt man Heute Google Analytics o.ä. ;)
http://www.drakon.ch | Weltweit 31. Bester Solitär Spieler (Standard XP)

DeKugelschieber

Community-Fossil

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

8

06.03.2015, 09:25

Zitat von »drakon«

Es macht einfach keinen Spass mehr ohne solche Hilfsmittel.

Naja Spaß macht das schon, wenn man Zeit dafür hat.
Ich verkaufe meinen Kunden inzwischen einfach Wordpress Themes, die ich dann anpasse. Aber wenn es gefordert ist macht mir das doch auch mal wieder Spaß.

Um eine moderne Seite zu schreiben braucht man eigentlich auch nicht so viel. Ein CSS Grid System vielleicht, ein paar Effekte die jQuery mitliefert und dann hat man schnell was schickes.
Grüße, Kugel

GitHub Meine Firma Pirsch Analytics

drakon

Supermoderator

Beiträge: 6 513

Wohnort: Schweiz

Beruf: Entrepreneur

  • Private Nachricht senden

9

06.03.2015, 12:04

Zitat von »DeKugelschieber«

Ein CSS Grid System vielleicht, ein paar Effekte die jQuery mitliefert und dann hat man schnell was schickes.

Genau mein Punkt. ;)
Also ein CSS Grid ist schon sehr viel Wert. Dann auch mal die ganzen Grundelemente, die schon relativ gut aussehen (Spacing, etc. darf auch nicht unterschätzt werden).
http://www.drakon.ch | Weltweit 31. Bester Solitär Spieler (Standard XP)

phptroll

Frischling

Beiträge: 5

Beruf: FIAE

  • Private Nachricht senden

10

06.03.2015, 17:16

Für den professionellen Einsatz lohnen sich Frameworks natürlich, machen wir im Betrieb auch (Bootstrap lässt grüßen). Aber zum erlernen der Materie macht es Sinn erst einmal reines CSS zu schreiben. Der direkte Einstieg mit Bootstrap könnte überfordern oder eben verhindern, dass CSS verstanden wird. Ich weiß, dass ich mich mit dieser Aussage angreifbar mache, da ich weiter oben empfehle, dass er sich jQuery anschauen möge :P
So schlimm ist das mit den verschiedenen Browsern außerdem gar nicht mehr, ich erinnere mich an Zeiten von IE 6 :D

Werbeanzeige

  • 1
  • 2

Ähnliche Themen