# Responsive Webdesign / flexible Webseite erstellen?



## filament (23. Oktober 2016)

Hallo Leute,

ich habe ein neues Projekt, dass ich gerade versuche in die Welt zu setzen. Ich möchte dies möglichst benutzerfreundlich gestalten. Daher soll die Seite für alle Endgeräte optimiert werden. Für die Google Ergebnisseiten kann das auch nicht von Nachteil sein, da ich gelesen habe, dass Google seit 2014 Webseiten, die nicht für mobile Endgeräte optimiert sind, abstraft.

Ich habe mich in das Thema eingelesen und einige Webseiten gefunden, die sich mit der Optimierung beschäftigen. Unter anderem:

https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/
https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign
http://www.lingulo.com/de/tutorials-de/css-tutorials/how-to-build-a-html5-website-from-scratch

Ein wenig hatte ich mich vorher schon mit dem Thema beschäftigt. Unter Anderem habe ich die width Angaben mit Prozenten vorgenommen. Allerdings wusste ich nicht genau, wie ich mit Listenelementen umgehen sollte und Schriftgrößen?

Ich frage mich nun - nachdem ich die obigen Webseiten gelesen habe -, ob es sinnvoller ist das Flexbox Modell zu nutzen, oder ob es sinnvoller ist mit Media Queries zu arbeiten. Bin mir nicht sicher, ob das zwei Paar Schuhe sind oder ob ich beides kombinieren sollte / muss?

Wie gehe ich am sinnvollsten vor? Zumal ich klar sagen möchte, dass ich klar zwischen Desktop Version und Smartphone Version differenzieren möchte. Auf den Smartphones soll es eher wie eine App werden.

Außerdem bin ich mir nicht ganz sicher, wie ich mit der Breite umgehen soll. Wenn jemand eine Auflösung von 19xx hat, dann würden die Webseiten derart verzerrt werden, dass es nicht mehr schön ist. Wenn ich allerdings mit max-width arbeite, wirkt die Webseite auf höheren Auflösungen wie ein abgehakter Teil. Jemand Vorschläge wie man das am besten handeln kann?

Vielen Dank im Voraus.


----------



## MrMurphy (23. Oktober 2016)

Hallo



> Ich frage mich nun - nachdem ich die obigen Webseiten gelesen habe -, ob es sinnvoller ist das Flexbox Modell zu nutzen, oder ob es sinnvoller ist mit Media Queries zu arbeiten.



Beides gleichzeitig, zumal wenn du benutzerfreundliche Webseiten erstellen willst.



> Zumal ich klar sagen möchte, dass ich klar zwischen Desktop Version und Smartphone Version differenzieren möchte. Auf den Smartphones soll es eher wie eine App werden.



Vergiß es. Zumal es mit der von dir propagierten Benutzerfreundichkeit nichts zu tun hat.

Zunächst gibt es keine Möglichkeit Smartphones überhaupt zu erkennen.

Du müsstest jedes Gerät (auch zukünftige) auf dem Markt kennen und einen Weg finden, sie eindeutig zu identifizieren. Die Übergänge zwischen sogenannten Smartphones, Tablets und anderen Geräten werden auch immer fließender. Wann also ist ein Gerät überhaupt ein Smartphone?

Damit wärst du weltweit der erste dem das gelingt.

Und Besucher wollen mit Sicherheit auf ihrem Smartphone nicht für jede Webseite eine App installieren.

Apps sind nur noch dann sinnvoll, wenn sie entweder

a) einen echten  Mehrwert bieten, den eine Webseite technisch nicht bieten kann

oder

b) wenn die Besucher keine andere Wahl haben, wie zum Beispiel häufig bei den absoluten Marktführern.

Aus deinen Beschreibungen  kann ich weder a) noch b) erkennen.

Eine aktuelle responsive Webseite hat zudem für dich den Vorteil, dass du Änderungen nur an einer Stelle vornehmen musst. Damit entsteht eine Win-Win-Situation: Du hast weniger Stress, die Besucher freuts.



> Jemand Vorschläge wie man das am besten handeln kann?



Ich mache mich jetzt nicht über dich lustig, aber: Allein die Frage zeigt dass dein Wissen doch recht veraltet ist.

Also: Responsive Webseiten mit aktuellem HTML5 und CSS3 erstellen. Warum du mit max-width überfordert bist können wir nur an einem konkreten Beispiel nachvollziehen.

Tipp: Wenn du irgendetwas von 960px, 768px und ähnlichem liest - ganz schnell weglaufen / wegklicken. Solche Breiten haben nie Sinn gemacht, wurden von Anfängern aber gerne als unsinniger Ersatz für fehlende Papiergrößen genommen, um überhaupt eine feste Breite zu haben. Webseiten sind aber kein Papier und haben keine festen Breiten.

Siehe zum Beispiel

http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html

Für konkrete Hilfe benötigen wir einen Link zu deiner Webseite.

Gruss

MrMurphy


----------



## filament (23. Oktober 2016)

Du hast mich falsch verstanden. Ich möchte keine App erstellen. Ich möchte, dass die Webseite wie eine App ausschaut auf Smartphones die man horizontal hält.

Du sagst man könne Smartphones nicht erkennen. Aber mit den Queries kann ich doch filtern ob jemand z.B. eine Mindestbreite hat und dementsprechend mit CSS reagieren, oder nicht?

Einen konkreten Link zu meiner Webseite kann ich nicht geben. Ich habe noch nicht viel davon erstellt. Ein grobes HTML Modell mit head, body und ein paar div Containern steht erst. Bin gerade dabei die Navigation zu integrieren via vertikalen Listen. 

Ich wollte mich erst erkundigen, wie ich das responsive Erstellen angehen sollte. Ich möchte nämlich ungern die ganze Webseite später umgestalten, weil ich mir zuvor keine Gedanken gemacht habe.

Du hast geschrieben, ich solle das Flexbox Modell mit Queries kombinieren. Du Meinst bestimmt damit zunächst Queries zu nutzen, um die Boxen dann entsprechend bei kleineren Auflösungen anzupassen, richtig?

Vielen Dank für den Link. Ich werde mir diesen genauer ansehen.


----------



## MrMurphy (23. Oktober 2016)

Hallo



> Ich möchte keine App erstellen. Ich möchte, dass die Webseite wie eine App ausschaut auf Smartphones die man horizontal hält.



Das Problem bleibt: Was verstehst du unter Smartphones und wie willst du sie erkennen? Du wärst weltweit der erste dem das gelingt. Alle  mir bekannten Lösungen können Smartphones (was immer darunter auch verstanden wird) nur ansatzweise erkennen und weisen eine hohe Fehlerquote auf.



> Ich wollte mich erst erkundigen, wie ich das responsive Erstellen angehen sollte.



Dafür hat sich folgendes Vorgehen bewährt:

Zunächst wird der komplette HTML-Teil (also alles im body-Bereich) der Webseite korrekt nach den Regeln vom HTML5 erstellt. Bei HTML5 ist ja ziemlich genau festgelegt, welche Inhalte in welche Elemente/Container gehören. Da kann man also nicht viel falsch machen.

Danach wird das Layout mittels CSS3 gestaltet.



> Du Meinst bestimmt damit zunächst Queries zu nutzen, um die Boxen dann entsprechend bei kleineren Auflösungen anzupassen, richtig?



Ich weiß nicht ob wir etwas aneinander vorbeischreiben.

Beim Layout mittels CSS hat es sich als sinnvoll erwiesen, zunächst das Layout für schmale Bildschirme und dann für immer breitere zu gestalten. Das läuft unter dem Schlagwort "Mobile First".

Gruss

MrMurphy


----------



## filament (23. Oktober 2016)

Naja ich dachte halt dass ich mittels 

@media (min-width: 30em) { /* Kompaktes Layout */ }

Smartphones erkennen könnte. Zumindest suggeriert mir das die Wiki von selfhtml.

Ist dem nicht so?


----------



## MrMurphy (23. Oktober 2016)

Hallo

Du meinst wohl  eher max-width.



> Ist dem nicht so?



Nein. Mit der Media Query werden alle Fensterbreiten über 30em (bzw. bei max-width bis 30em) erkannt. Ob es sich um die komplette Bildschirmbreite, ein Browserfenster im Vollbild-Modus oder einfach ein schmal gezogenes Browserfenster handelt ist damit aber nicht unterscheidbar. Auch nicht, ob es sich um ein Smartphone, ein Tablet, ein Notebook oder ein Desktop-Gerät handelt. Wobei die Übergänge bei der heutigen Vielzahl der Geräte fließend sind.

Auch nicht, ob das Fenster im Hoch-, Querformat oder (der neuste Trend) quadratisch angezeigt wird. Schon gar nicht ob bestimmte, bei einem Smartphone zu erwartende, Techniken, wie ein Touchscreen oder eine Tastatur vorhanden sind.

Es ist überhaupt nicht festgelegt, was ein Smartphone überhaupt ist. Die haben zum Beispiel heutzutage mit den hochauflösenden Displays mehr Pixel als Desktop Bildschirme. Und sind Tablets mit Telefonfunktion auch Smartphones? Oder zählen Smartphones noch zu Smartphones wenn sie höhere Auflösungen als die meisten Tablets haben?

Leg doch einfach mal fest, was für dich ein Smartphone von anderen Geräten unterscheidet. Danach wirst du feststellen, dass du "deine" Smartphones mit CSS nicht gezielt ansprechen kannst, sondern immer auch andere Geräte erwischt.

Gruss

MrMurphy


----------



## filament (4. November 2016)

Hallo nochmal,

ich habe mich jetzt intensiver mit allem beschäftigt und begonnen das "mobile" Layout zu erstellen. Das hat bisher auch ganz gut funktioniert und es wird langsam eine Webseite draus (wenn auch noch nicht vorzeigbar; Habe aufgrund von Arbeit etc. wenig Zeit). Kommt noch einiges an Arbeit auf mich zu in den nächsten Wochen / Monaten. Das Projekt eilt aber auch nicht, von daher ist es in Ordnung, zumal ich mich dann gezielt mit Problemstellungen auseinandersetzen kann, bevor ich mit der Programmierung in PHP / MySQL anfange.

Da gerade bei mobilen Geräten (oder kleinen Fenstern im Browser) viel mit CSS3 gebaut ist, stellte ich mir die Frage, was ich eigentlich mit älteren Browsern machen soll (Auch eine Frage: Welche Browser können z. B. mit display: none; umgehen oder mit :target / :hover. Diese Elemente habe ich vorwiegend genutzt bisher.). Dazu habe ich einfach mal den Begriff CSS3 ältere Browser bei Google eingegeben. Gefunden habe ich einige Seiten, die versuchen mit Javascript und sonstigem Zeug die neuen Befehle zu simulieren. Klingt alles sehr nett und auch plausibel. Auf der anderen Seite habe ich aber auch vereinzelt Autoren gefunden, die der Meinung waren, dass man sich nicht zu sehr auf veraltete Browser fokussieren sollte und die neuen Webstandards nutzen solle. Denn letztendlich soll laut einer Statistik der Anteil von alten Browsern, welche gewisse Sachen nicht verarbeiten können, mittlerweile schwindend gering sein. Gerade bei mobilen Endgeräten seie es doch auch so, dass bereits relativ neue Browser vorinstalliert sind.

Ist dem wirklich so? Kann man auf zusätzliche Prozesse für ältere Browser daher gezielt verzichten?

Hat Jemand mit diesem Thema Erfahrungen?


----------



## MrMurphy (4. November 2016)

Hallo



> Hat Jemand mit diesem Thema Erfahrungen?



Ja.



> Ist dem wirklich so? Kann man auf zusätzliche Prozesse für ältere Browser daher gezielt verzichten?



Das ist nicht ganz einfach zu beantworten.

Zunächst: Zusätzliche Prozesse gibt es bei HTML / CSS nicht, da es keine Programmiersprache ist.

Es gibt auch bei mobilen Geräten noch veraltete Browser. 

Es gibt aber trotzdem keinen  Grund auf das aktuelle HTML5 und CSS3 zu verzichten, sowie die neuen Möglichkeiten zu verwenden.

Ein einfaches Fallback ist zwar kein muss, aber sinnvoll. Grade beim Ansatz "Mobile First" ist dies auch überhaupt kein Problem.



> Gefunden habe ich einige Seiten, die versuchen mit Javascript und sonstigem Zeug die neuen Befehle zu simulieren.



Die Zeiten sind vorbei. JavaScript sollte nur noch verwendet werden um Lösungen umzusetzen, die nur mit HTML und CSS nicht möglich sind. Und das werden immer weniger. Zur Unterstützung von älteren Browser ist JavaScript nicht sinnvoll.



> Auch eine Frage: Welche Browser können z. B. mit display: none; umgehen oder mit :target / :hover. Diese Elemente habe ich vorwiegend genutzt bisher.



Alle. Das "Problem" sind eher die Touchscreens, da die keinen hover-Effekt kennen. Aus mir nicht nachvollziehbaren Gründen können viele Webseitenersteller das nicht erkennen. So werden immer noch fleißig Navigationen mit hover-Effekt erstellt, die auf Touchscreens nicht oder nur eingeschränkt nutzbar sind. Oder Bilder werden mit dem hover-Effekt vergrößert, obwohl bei Touchscreens dann genau die Sicht auf das Bild durch die Hand verdeckt wird.

Gruss

MrMurphy


----------



## filament (4. November 2016)

Kannst Du mir vielleicht ein paar Seiten / Tutorials für solch ein Fallback zur Hand geben? 

Wie Kann ich mittels CSS erkennen, ob ich es mit einem älteren Browser zu tun habe, um entsprechend den Code anzupassen bzw. zu implementieren?

Das diese Scripte nicht mehr zeitgemäß Sind gerade wegen JavaScript habe ich mir fast gedacht. Gerade weil JS auch nicht auf jedem Gerät aktiviert ist.

Das mit dem Hover und dem Touchscreen habe ich berücksichtigt. Habe die Navigation so gebaut, dass diese durch einen Klick aufklappt und bleibt bis man erneut klickt. Off Canvas mit Hilfe von :target.


----------



## MrMurphy (5. November 2016)

Hallo



> Kannst Du mir vielleicht ein paar Seiten / Tutorials für solch ein Fallback zur Hand geben?



So etwas gibt es nicht. Fallback ist ein Oberbegriff, das Vorgehen ist aber individuell. Ohne deine Seite zu kennen ist eine konkrete Hilfe deshalb nicht möglich.

Im Prinzip wird beim Fallback für Responsive Design mit Mobile First zunächst für schmale Fenster ein Layout mit lange eingeführten CSS-Anweisungen erstellt. Das wird dann bei Bedarf mit modernen CSS-Anweisungen überschrieben.

Wie geschrieben: Bei Bedarf und dann nur die erforderlichen Anweisungen. Die CSS-Anweisungen, die für alle Fensterbreiten passen, müssen und sollten nicht überschrieben werden.

Der Quelltext soll übersichtlich und einfach wartbar bleiben. Es geht dabei nicht darum unstrukturiert und unkontrolliert möglichst viele vermeintlich alte CSS-Anweisungen durch neue zu überschreiben. Dafür gibt es keinen Grund.



> Wie Kann ich mittels CSS erkennen, ob ich es mit einem älteren Browser zu tun habe, um entsprechend den Code anzupassen bzw. zu implementieren?



Das ist weder möglich noch sinnvoll. Das Responsive Design wird an die Fensterbreite angepasst. Alles andere hat sich als Irrweg / Sackgasse erwiesen. 

Gruss

MrMurphy


----------



## filament (12. November 2016)

Hab mal eine Frage zu dem Off Canvas Menü.

Habe es jetzt etwas erweitert mit Menüpunkten. Aufgrund der Menge an Unterpunkten etc. ist die Navigation ziemlich lang geworden. (Ich möchte eigentlich nicht nur die Überpunkte als Links anbieten) Nun kommt es zum Problem, dass ich weder am Rechner noch am Handy / Tablet scrollen kann. 

Wie passe ich die Off Canvas Navigation denn so an, dass ein User nach unten scrollen kann? Oder ist das nicht möglich?


```
<div id="navwrapper">
  <div class="navmenu">
   <form action='eingeloggt.php' method='post'>
    <div class="mobillogo"></div>
    <div class="eingabe"><input type='text' name='name' class='form' size='20' value='Benutzer' onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></div>
    <div class="eingabe"><input type='password' name='pwd' size='20' class='form' value='Passwort' onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></div>
    <div class="divbutton"><button>Login</button></div>
    <div class="headline">Beispiel Überschrift</div>
    <div class="underline"><a href="#">Beispiel Unterpunkt</a></div>
    <div class="underline"><a href="#">Beispiel Unterpunkt</a></div>
    <div class="underline"><a href="#">Beispiel Unterpunkt</a></div>
    <div class="underline"><a href="#">Beispiel Unterpunkt</a></div>
    <div class="headline">Beispiel Überschrift</div>
    <div class="underline"><a href="#">Beispiel Unterpunkt</a></div>
    <div class="underline"><a href="#">Beispiel Unterpunkt</a></div>
    <div class="underline"><a href="#">Beispiel Unterpunkt</a></div>
    <div class="underline"><a href="#">Beispiel Unterpunkt</a></div>
   </form>
  </div>
  <div id="menu">
   <a href="#openNav" id="openBtn">Menü</a>
   <a href="#" class="register">Kostenlos Registrieren</a>
   <a href="#closeNav" id="closeBtn">Schließen</a>
  </div>
  <br class="clear"/>
</div>
```


```
@media (max-width: 500px)
{
#navwrapper
{
    height:2em;
    overflow-x:hidden;
}
.navmenu, #menu
{
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navmenu
{
    width: 50%;
    height: 100%;
    position: fixed;
    left: -50%;
    top: 0;
    background: #252525;
}

.navmenu div
{
    height: 1.5em;
    border-bottom: solid 1px #777777;
    color: white;
    padding: 3px;
}

.headline
{
    margin-top: 2em;
    background: #05425e;
    height: 1.5em;
    border-top: solid 1px #777777;
    border-bottom: solid 1px #777777;
    color: white;
    padding: 3px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
    text-align: center;
}

.underline
{
    height: 1.5em;
    border-bottom: solid 1px #777777;
    color: white;
    padding: 3px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
    text-align: center;
}

.underline a
{
    text-decoration: none;
    color: white;
}

.underline:hover
{
    background: #444444;
}

.divbutton div
{
    padding: 0;
}
.divbutton
{
    background: #444444;
    padding: 0;
}

.divbutton:hover
{
    background: #4d764e;
}

.navmenu input
{
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    background: #252525;
    border: 0;
    color: #ffffff;
    font: bold 0.8em Arial, Helvetica, sans-serif;
}

.navmenu button
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    background: #444444;
    border: 0;
    color: #ffffff;
    font: bold 0.8em Arial, Helvetica, sans-serif;
}

.navmenu .eingabe:hover, .navmenu input:hover
{
    background: #444444;
}
.navmenu button:hover
{
    width: 100%;
    height: 100%;
    background: #4d764e;
    padding: 0;
}

#menu
{
    width: 100%;
    background: #252525;
    border-bottom: solid 1px white;
    position: fixed;
    top: 0;
}

#openBtn
{
    float: left;
    text-align: center;
    width: 3em;
    background: #444444;
    display: block;
    text-decoration: none;
    color: white;
    padding: 5px;
    border-right: solid 1px white;
    font: bold 0.8em Arial, Helvetica, sans-serif;
}

#openBtn:hover
{
    background: #05425e;
}

.register
{
    margin-left: 3em;
    text-align: center;
    width: 12em;
    background: #ea2525;
    display: block;
    text-decoration: none;
    color: white;
    padding: 5px 5px 5px 8px;   
    border-right: solid 1px white;
    font: bold 0.8em Arial, Helvetica, sans-serif;
}

.register:hover
{
    background: #6f0d0d;
}

#closeBtn
{
    text-align: center;
    width: 5em;
    display: none;
    text-decoration: none;
    color: white;
    padding: 5px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
}

/* wenn nav geöffnet */

#openNav:target .navmenu
{
    left: 0;
}

#openNav:target #menu a
{
    margin-left: 50%;
    position: fixed;
}

#openNav:target #openBtn
{
    display: none;
}

#openNav:target .register
{
    display: none;
}

#openNav:target #closeBtn
{
    display: block;
    background: #05425e;
    position: fixed;
    top: 1px;
}

#openNav:target #closeBtn:hover
{
    background: #4d764e;
}

#openNav:target #login, #primarynavi, #secondarynavi
{
    display: none;
}
}
```

Danke im Voraus!


----------



## MrMurphy (12. November 2016)

Hallo

An Hand deiner Quellcodeschnipsel kann ich dein Problem leider nicht nachvollziehen.

Über 500px Fensterbreite ist der Inhalt überhaupt nicht formatiert.

Unter 500px erscheint eine Leiste "Menü", "Kostenlos registrieren" und ein schwarzer Balken, die sich aber überhaupt nicht ausklappen lässt.

Gruss

MrMurphy


----------



## SpiceLab (12. November 2016)

filament hat gesagt.:


> Aufgrund der Menge an Unterpunkten etc. ist die Navigation ziemlich lang geworden. (Ich möchte eigentlich nicht nur die Überpunkte als Links anbieten) Nun kommt es zum Problem, dass ich weder am Rechner noch am Handy / Tablet scrollen kann.
> 
> Wie passe ich die Off Canvas Navigation denn so an, dass ein User nach unten scrollen kann? Oder ist das nicht möglich?


Mit der *position:fixed*-Regel nimmst Du *.navmenu* nicht blos aus dem normalen Textfluß, sondern fixierst sie auch im Viewport, wenn die Seite (mit entsprechendem Inhaltsumfang) gescrollt wird.

-> https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position#position:_fixed

Gibt's neben der Navigation überhaupt keinen, oder zu wenig Seiteninhalt, der gescrollt werden könnte, löst der (Inhalts)Umfang solch eines fixiert positionierten Elements keine Scrollbalken im Browserfenster aus.

Eine denkbare Alternative: *position:absolute*.

Die Navigation wird weiterhin aus dem Textfluß genommen (siehe Startposition *left:-50%*), und kann bei Bedarf vom Nutzer gescrollt werden.

-> https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position#position:_absolute

Aber..., was mich schon noch interessieren würde:

Wenn Du schon so großen Wert auf zeitgemäße Techniken und Benutzerfreundlichkeit legst, warum verwendest Du die allgemeinen *<div>*-Blockelemente, die keine explizite semantische Bedeutung besitzen, die mit Hilfe diverser CSS-Klassennamen definiert werden muss, und an einem gewissen Punkt der HTML-Code in einer sog. DIV-Suppe enden wird, anstatt die Bestandteile der Navigation (nichts anderes, als eine Liste von Überschriften u. Links) mit einer verschachtelten Listenstruktur auszuzeichnen, wie es für Navigationsmenüs (mit mehreren Menüebenen) gängige Praxis ist?

Netter Nebeneffekt: die Links in Untermenüs gruppiert, könn(t)en zunächst versteckt, und mit einem Klick auf die Überschriften eingeblendet werden.

Idealerweise schließt sich das aktuell geöffnete Submenü, wenn der Nutzer ein anderes auswählt.

Beispiel: http://www.stunicholls.com/menu/jquery-slide-1.html

Platzsparender geht's kaum noch 

[edit]Tipp-Ex[/edit]​


----------



## filament (14. November 2016)

Ich habe jetzt dem Menü Div Element die Eigenschaft overflow: Auto; gegeben und nun ist das Scrollen möglich.

Zu Deiner Frage:

Aufgrund dessen, dass ich ein Formularfeld habe, hatte ich mich für die Divs entschieden. Ich werde das aber demnächst noch verändern.

Danke für den Hinweis!

Achso und eine Nachfrage:

Ich benutze ja schon das Off Canvas Menü. Wenn ich jetzt die Unterpunkte per Klick anzeigen will bzw. ausblenden, dann müsste ich das selbe Modell ja nochmal aufnehmen. Dann dürfte ich mit den Ankerpunkten doch aber für Probleme sorgen, oder nicht? Schließlich muss ich ja weitere verschiedene Anker setzten. Oder Kann ich das Einblenden / Ausblenden via Klick auch anders gestalten?


----------



## SpiceLab (14. November 2016)

filament hat gesagt.:


> Ich benutze ja schon das Off Canvas Menü. Wenn ich jetzt die Unterpunkte per Klick anzeigen will bzw. ausblenden, dann müsste ich das selbe Modell ja nochmal aufnehmen.


Wozu?


filament hat gesagt.:


> Dann dürfte ich mit den Ankerpunkten doch aber für Probleme sorgen, oder nicht? Schließlich muss ich ja weitere verschiedene Anker setzten. Oder Kann ich das Einblenden / Ausblenden via Klick auch anders gestalten?


Von welchen Ankerpunkten sprichst Du?

In Deinem gezeigten Formularbereich ist kein einziger Anker enthalten, wie auch in meinem empfohlenen Beispiel http://www.stunicholls.com/menu/jquery-slide-1.html , wo die klickbaren "Überschriften" wie folgt ausgezeichnet sind:

```
<dt><b>Saless</b></dt>
```
Das Öffnen u. Schließen der Untermenüs erfolgt per jQuery:

```
$(document).ready(function(){
    if($("#nav")) {
        $("#nav dd").hide();
        $("#nav dt b").click(function() {
            if(this.className.indexOf("clicked") != -1) {
                $(this).parent().next().slideUp(500);
                $(this).removeClass("clicked");
            }
            else {
                $("#nav dt b").removeClass();
                $(this).addClass("clicked");
                $("#nav dd:visible").slideUp(500);
                $(this).parent().next().slideDown(500);
            }
            return false;
        });
    }
});
```


----------



## filament (14. November 2016)

Ich möchte aber kein jQuerie nutzen, generell kein JavaScript. Viele Besucher haben JavaScript nicht aktiviert.

Anker siehe Div Element menu. Dort habe ich mit #openNav und #closeNav die Steuerung des Ein und Ausklappens vorgenommen.


----------



## SpiceLab (14. November 2016)

filament hat gesagt.:


> Ich möchte aber kein jQuerie nutzen, generell kein JavaScript. Viele Besucher haben JavaScript nicht aktiviert.
> 
> Anker siehe Div Element menu. Dort habe ich mit #openNav und #closeNav die Steuerung des Ein und Ausklappens vorgenommen.


Und wie regelst Du diese Steuerung ohne JavaScript?


----------



## filament (14. November 2016)

Über die Pseudoklasse :target 

https://blog.kulturbanause.de/2013/03/die-css-pseudoklasse-target-funktion-beispiele/


----------

