✔ Menu Overlay

[kosovafan]

Hallo,

ich versuche gerade ein Menu Overlay zu basteln, das Overlay ansich klappt auch nur irgendwie weiß ich
nicht wie ich das ganze schließen soll. Klick auf Menu > Menu erscheint > aber die Links sollten mittig erscheinen und irgendwie bekomme ich es nicht geschlossen.

Site Live: http://gentoo.silviosiefke.com/test_page/
CSS: http://gentoo.silviosiefke.com/test_page/layout.css
JS: http://gentoo.silviosiefke.com/test_page/navi.js

Im CSS ziemlich nach unten Scrollen unter Layout findet sich das relevante.

Vielen Dank für eure Hilfe.

MFG
Silvio

 

[SpiceLab]

Ändere die top-Regel für <nav> wie folgt, damit es zu keinen Überlagerungen kommt, und der Link zum Schliessen des Menüs anklickbar bleibt:

header#main nav {
  ...
  top: 3em; /* entspricht height:3em für header#main */
  ...
}

Desweiteren bedarf es einer kleinen Korrektur im HTML-Code, worin Du zwei </a>-Tags vor den </i>-Tags falsch notiert hast:

<a rel="author" href="https://twitter.com/SilvioSiefke" title="<%= I18n.t(:nav_title_twitter) %>">
  <i class="fa fa-twitter"> Twitter</a></i>
</a>

<a href="https://github.com/sisihagen/silviosiefke.de" title="<%= I18n.t(:nav_title_github) %>">
  <i class="fa fa-github"> Github</a></i>
</a>

 

[kosovafan]

Hallo,

danke für die Info, ja das wollte ich vermeiden ist ja am Ende dann kein Overlay mehr, aber scheinbar ohne Verschachtelung der einzige Weg. Wie kann ich den die Navigationslink mehr in die Mitte des Bildschirmes bringen, oder wird das ohne zusätzliches div nicht funktionieren.

Mfg
Silvio

 

[SpiceLab]

Wie kann ich den die Navigationslink mehr in die Mitte des Bildschirmes bringen, oder wird das ohne zusätzliches div nicht funktionieren.

Ein zusätzliches <div>-Element ist hier nicht erforderlich.

header#main nav {
  ...
  padding-top:22.5% /* Wert von mir frei gewählt */
  }

 

[kosovafan]

Yup Firma dankt hätte ich auch selber drauf kommen. Naja was man nicht im Kopf hat. Sie aber irgendwie nicht so toll aus, oder? Ich habe auch nur zwei Beispiele gefunden im Netz, schade eigentlich finde ich diese Lösung gerade für mobile Endgeräte am besten.

Mfg

 

[SpiceLab]

[...] finde ich diese Lösung gerade für mobile Endgeräte am besten.

Für gewöhnlich werden die Links der Navbar erst bei kleineren Bildschirmen (Tablets, Smartphones, schmal skaliertem Browserfenster) wegen Platzmangel ausgeblendet, und über das sog. Hamburger-Menü-Icon eingeblendet.

Einen Lösungsansatz hierfür bietet zB das CSS-Framework Bootstrap.

http://getbootstrap.com/components/#navbar-default (englische Fassung)
http://holdirbootstrap.de/komponenten/#navbar-default (deutsche Fassung)

 

[kosovafan]

Für gewöhnlich werden die Links der Navbar erst bei kleineren Bildschirmen (Tablets, Smartphones, schmal skaliertem Browserfenster) wegen Platzmangel ausgeblendet

Ja das stimmt, aber erst mobile und dann der Desktop. Die Overlay Lösungen finde ich auch für den Desktop ganz in Ordnung und es ist graphisch auch eine Aufwertung. Allerdings bin ich nicht bekannt für Design Liebe

Einen Lösungsansatz hierfür bietet zB das CSS-Framework Bootstrap

Ich nutze Bourbon, Neat and Bitters. Zurzeit habe ich auch eine Lösung, wie Sie auf silviosiefke.com (Fenster verkleinern) sehen können, allerdings nervt mich das bei aktivierten / desktivierten JavaScript das ganze den ersten Absatz bedeckt, sollte den Content lieber nach unten verschieben.

Mfg