[DEV] Responsive HeaderBar - NavigationsLeiste oben

[HabNurNeFrage]

Hi,

nun will ich mich auch mal an einer kleinen Extension versuchen.
Da ich es immer schön finde, wenn ganz oben ein Menü ist, soll es ein feststehendes Menü am oberen Seitenrand werden.

----

Responsive HeaderBar Extension für phpBB 3.1.x

Titel: Responsive HeaderBar
Version: 0.0.4
Autor: HabNurNeFrage

Beschreibung: Ergänzt ein zusätzliches, responsivers Menü am oberen Seitenrand

Responsiv-Eigenschaften:
Wenn nicht alle Menüpunkte und der Seitenname in die HeaderBar passen, wird ein Menü-Icon anstelle der Menüpunkte angezeigt.
Wenn Menü-Icon und Seitenname nicht mehr in die Headerbar passen, wird nur noch das Menü-Icon angezeigt.
Wenn das Menü-Icon angezeigt wird, werden die Menüpunkte so ähnlich wie beim Schnellzugriff angezeigt.
Die Längen der Linktexte und die Anzahl der Menüpunkte sind beliebig veränderbar.
Die Gesamtbreite aller Menüpunkte wird vom Script berechnet und dient als Grundlage, ob bereits responsiv angezeigt werden muss.


Demo: http://bild4.bplaced.net/phpbb31/viewtopic.php?f=2&t=1

Bilder:
Ansicht komplettes Menü
Ansicht responsive Menüauswahl

Voraussetzung: phpBB 3.1.x

Download: http://bild4.bplaced.net/phpbb31/Respon ... derBar.zip

Installation:
Runterladen, Entpacken und den Ordner /ext/ per FTP ins Forumroot laden.
Administrations-Bereich => Tab "Anpassen" => Menüpunkt "Erweiterungen verwalten" => hinter "Responsive HeaderBar" auf "aktivieren" klicken

ToDo-Liste:
- Menüpunkte samt Verlinkungen im ACP anlegen (z.Zt. müssen Tester die HTML-Datei bearbeiten)
- Verhalten des responsiven Menüs für TouchScreen-Gesten optimieren
- eventuell: Farben im ACP veränderbar


Die Extension funktioniert mit IE8/9/10/11 sowie mit Browsern.
Um das Menü anzupassen, muss man derzeit noch HTML-Kenntnisse besitzen.

Anmerkung zur Technik:
Um es live in der Demo zu sehen, muss nach dem Ändern der Fenstergröße die Seite neu geladen werden, da der Viewport nur onload berechnet wird.
Der Listener für Live-Resizing-Erkennung hat mir zu viel Performance gekostet.

LG

[Crizzo]

Hi,

schau dir mal diese Lösungen an. Deine Navi hängt momentan aus dem #res_nav_wrapper raus: http://xhtmlforum.de/40267-faq-h-ufig-g ... .html#faq2

PS:

Die Extension funktioniert mit IE8/9/10/11 sowie mit Browsern.

Sehr coole Formulierung.

[HabNurNeFrage]

Hi.

ihh, im IE hatte ich es noch nicht resized - danke für die Info.
Hab nur IE8 hier. Tritt das auch bei höheren IE auf?

LG

[Crizzo]

Hi,

das hab ich im Firefox 33.1.1 gesehen, von den IE war keine Rede.

Grüße

[HabNurNeFrage]

Hi.

Hmmm, bei mir sieht es mit Chrome, Opera und FF wie auf dem responsiven Screenshot aus...

Wie genau äußert sich dieses "Heraushängen" denn? Steh grad aufm Schlauch

LG

[Crizzo]

So:

Ext-Responsive-Headerbar-HabNurNeFrage.PNG (2.05 KiB) 2333 mal betrachtet

Was jetzt nicht besonders gut aussieht, auch wenn man es fast für Absicht halten könnte.

Unter:
Windows 7 Home Premium
Firefox 33.1.1
@1920x1080px

Grüße

[Kirk]

Hi
Die responsive Ansicht im FF 33.1.1 passt auch noch nicht ganz.

responsive_beaderbar.jpg (16.93 KiB) 2327 mal betrachtet

[HabNurNeFrage]

Hi.

@BlackHawk: Diesen kleinen Versatz habe ich nicht - hmm.
Kommt daher, dass ich die UL-Liste zur Breitenberechnung als Inline-Block darstelle und den Wrapper-Container nicht exakt auf die selbe Höhe bekomme.
Da muss ich mir wohl nochmal was für einfallen lassen. Ggf. kann ich die passende Höhe des Wrapper-Containers mit JavaScript berechnen.
Schaumerma

@Kirk: Wenn Du die Fenstergröße veränderst, musst Du danach neu laden. Mein JavaScript berechnet nur einmal onload die Breite des Viewportes.

LG

[Crizzo]

@Kirk: Wenn Du die Fenstergröße veränderst, musst Du danach neu laden. Mein JavaScript berechnet nur einmal onload die Breite des Viewportes.

Dafür bietet sich die CSS-Lösung als Backup an:

Code: Alles auswählen

<link href="responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />

o.ä.

Siehe: http://wiki.selfhtml.org/wiki/CSS/Media_Queries
http://www.heise.de/ix/artikel/Allen-recht-1058764.html
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[HabNurNeFrage]

Hi,

ist der Versatz bei Dir noch zu sehen, wenn Du die Demo aufrufst?
Ich habe einfach den Wrapper-Container 0.1em höher gemacht

Eine sofortige Anpassung der Elemente bei Fenstergrößenänderung halte ich nicht für so wichtig.
Außer zum Testen ist das praxisfern, denn die Viewport-Größe ändert man eher selten.

LG