Responsive Webdesign / flexible Webseite erstellen?

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?

HTML: 
 <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>

CSS: 
@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!
 
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
 
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?
Zum Vergrößern anklicken....
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]​
 
Zuletzt bearbeitet:
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?
 
Zuletzt bearbeitet:
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.
Zum Vergrößern anklicken....
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?
Zum Vergrößern anklicken....
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:
HTML: 
<dt><b>Saless</b></dt>
Das Öffnen u. Schließen der Untermenüs erfolgt per jQuery:
Code: 
$(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;
        });
    }
});
 
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück