Schnellzugriff für mobile/responsive GROSS und UNTEN FIXED

[uwe.ha]

Hallo zusammen,

das mit dem Responsiv Design ist ja sehr lobenswert und ein MUSS ... nur die Ausführung für mobile/smartphones ist (noch) nicht ganz perfekt:
Das "Schnellzugriff"-Menü ist auf einem smartphone:
- viel zu klein
- viel zu weit vom (navigierenden) Daumen weg
... echt umständlich.

Deshalb hätte ich gerne NUR bei der Ansicht durch smartphones:

Die id="page-header" ganz unten am Rand fixiert, so nach dem Muster:

Code: Alles auswählen

#page-header .navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 99%;

... aber halt NUR für mobile.
Wie/wo muss ich also dieses CSS einfügen, damit es NUR mobile aktiv ist?

... und dann darin den BUTTON des Links "Schnellzugriff" DEUTLICH größer.
Wie geht das?

VIELEN DANK!

[Crizzo]

Hi,

versuchs mal in der responsive.css.

Für genauere Anwendungen eben noch den media-Query: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Grüße

[uwe.ha]

Danke für die schnelle Antwort!

In der responsiv.css habe ich jetzt hinter

Code: Alles auswählen

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {

(zeile 164)
folgendes eingefügt:

Code: Alles auswählen

    #page-header .navbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 99%;
	}	

Damit ist das Menü zwar unten, aber nicht dauerhaft, sondern es verschwindet immer wieder.
Genauer: Wenn ich runter scrolle, ist es nie zu sehen, außer ich bin am Seitenende angelangt.
Wenn ich dann vom Seitenende langsam hoch scrolle, bleibt es erst mal, "slidet" aber dann nach unten weg. Manchmal kommt es wieder, aber irgendwie unregelmäßig.

EDIT:
Jetzt habe ich in der responsiv.css in Zeile 73 folgendes eingefügt:

Code: Alles auswählen

#page-header {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 99%;
}

Also nur #page-header ohne .navbar.

Damit bleibt es jetz immer schön unten sichtbar.
Allerdings scheint es Probleme mit der "Ebene" zu geben; eigentlich sollter der DIV page-header ja ÜBER dem Content liegen. Es scheint aber mal so und mal so zu sein.

Wie bekomme ich den page-header nach "vorne"?

Wenn man es jetzt noch ganz "sauber" machen wollte, könnte man NICHT den ganzen page-header anzeigen lassen, sondern NUR einen Button, der dann beim Anklicken alle Links im Pageheader anzeigen würde.

Und auch noch die Frage, wie ich das Schnellzugriff-Icon vergrößern kann.

DANKE!

[Kirk]

Hallo
Probier es mal damit:

Code: Alles auswählen

#quick-links {
    background-color: #94b6d1;
    bottom: 0;
    left: 0px;
    position: fixed;
    width: 99%;
    z-index: 999;
    padding-left: 10px;
}

Damit hast du nur diesen Schnellzugriff fixed und nicht die ganze headerbar, falls dir die Schrift zu klein ist, einfach ein font-size: einfügen.

[Zinalhorn]

Hallo,

da ich die Umstellung auf das Responsiv Design derzeit aus aktuellem Anlass von der Userseite verfolge, habe ich mich hier mal angemeldet. Wenn ich es richtig verstanden habe, dann sorgt ein script bei kleinen Aufösungen dafür, dass der Text "Schnellzugriff" in der Menüleiste nicht mehr dargestellt wird.

Das verbleibende "Icon" kann mit einer einfachen CSS-Erweiterung größer dargestellt werden:

Code: Alles auswählen

  @media only screen and (max-width: 620px), only screen and (max-device-width: 620px) {
    li#quick-links > a.responsive-menu-link {
      padding-left: 28px;
    }

    li#quick-links > a.responsive-menu-link:before {
      width: 26px;
      font-size: 25px;
    }
  }

Dabei muss die Schaltschwelle von 620px nicht zwangsläufig mit dem Entfall des Schriftzugs zusammenfallen. Im Gegenteil, das ist eher unwahrscheinlich.

Besteht die Möglichkeit, in dem übergeordneten Element zusätzlich zu der "data-skip-responsive" Anweisung ein Callback für eine JS-Funktion einzubauen? Die Funktion müsste beim Aufruf einen Parameter mit der Information erhalten, ob das Element dargestellt wird. Dann kann die Funktion die Größe des "Icons" entsprechend verändern oder eine andere Aktion durchführen.

Die technisch einfachere Lösung wäre natürlich, die Steuerung der Schaltfläche für den Schnellzugriff ausschließlich durch CSS zu realisieren. Wobei ich jetzt nicht die Gründe kenne, die zu der jetzigen Lösung geführt haben.

Gruß

Peter