Ankündigung

Einklappen
Keine Ankündigung bisher.

Responsive Bootstrap Layout mit zwei Hauptnavigationen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Responsive Bootstrap Layout mit zwei Hauptnavigationen

    Hallo,

    ich möchte für meinen Blog ein Responsive Layout auf Grundlage von Bootstrap bauen. Dieses Layout soll zwei Hauptnavigationen besitzen. Sprich: Eine für die allgemeinen Links (Home, Archiv, Themenbereiche, About und Impressum) und eine für die Kategorien. Ich werde voraussichtlich nicht mehr als 10 Kategorien haben.

    Meine Frage ist nun, wo packe ich design-technisch die Kategorie Navigtion hin?
    Wenn ich mir das Bootstrap Beispiel von der Doku ansehe, dann haben die in ihrem Beispiel Blog Layout die Navigation rechts am Rand. Wenn ich jetzt aber diese Seite von einem Mobilgerät abrufe, dann rutscht diese Navigation nach ganz unten. Das ist eher weniger schön, denn die Kategorien sollten schon etwas mehr im Blickwinkel des Betrachters liegen, als irgendwo ganz unten, wo sie niemand findet (oder erst, wenn es zu spät ist).

    Bitte bedenkt auch, dass ich keine Lösung möchte, die nur funktioniert, sondern eine, die schön aussieht und an dessen Ansicht die meisten Benutzer gewohnt sind. Ich meine damit typische Design Patterns, wie zum Biespiel, dass der Logout Button immer rechts oben steht, sollte das Layout schon haben.
    Also ich möchte im Prinzip eine Lösung, wie es schon zig andere Blogs auch machen. Nur leider kenne ich nicht viele Blogs, bei denen das Design eher schlicht und übersichtlich gehalten ist und die eine solche zweite Hauptnavigation haben. Vielleicht hat da jemand von euch den ein oder anderen nützlichen Link für mich parat?

    Würde mich über Tipps, Hilfe und Anregungen freuen. Gerne auch konkrete Code Beispiele.


    Vielen Dank!


    derwunner

  • #2
    Du hast hier glaub ich 2 widersprüchliche Ansätze. "Möglichst Nutzerfreundlich (selbsterklärend)" und "2 Navigationen".
    Für mich sieht der erste von dir beschriebene Teile "Archiv", "About", "Impressum" usw. wie ein typischer Footer aus, das in einer "Hauptnavigation" halte ich für ziemlich überflüssig, wieviele Leute lesen sich schon regelmäßig dein Impressum durch?

    Kommentar


    • #3
      ChromOxid Ja, prinzipiell gebe ich dir recht, ich sollte die beiden Navis anders aufteilen. Ein Problem gibt es jedoch noch bei Deinem Ansatz: Und zwar ich habe eingangs vergessen zu erwähnen, (sorry) dass es ein Corporate Design sein muss. Denn ich möchte für Blog und die Firmenrepräsentationsseite den gleichen Auftritt haben. Und bei einer Firmenrepräsentationsseite steht schließlich das "Über uns" und "wer wir sind / was wir machen" im Vordergrund. Das ganze dann im Footer zu platzieren wäre weniger sinnvoll bzw. nicht zweckmäßig. Hast Du vielleicht noch eine derartige zündende Idee? Wäre echt cool

      PS: Ich habe bisher auch keine Möglichkeit gesehen, in Bootstrap 2 static top navbars (die ganz oben auf der Seite sind, jedoch nicht mit scrollen) zu haben. Das geht anscheinend nicht, weil man dann auf der mobilen Ansicht ja zwei Menüleisten hätte, die sich in zwei Buttons verkleinern. Hat das schon jemand mal gemacht, bzw. kennt jemand einen Trick, wich doch zwei top Navbars haben kann?

      Kommentar


      • #4
        Hallo

        Wenn ich jetzt aber diese Seite von einem Mobilgerät abrufe, dann rutscht diese Navigation nach ganz unten.
        Mit dem neuen Bootstrap 4 wird sich die Reihenfolge von Elementen mittels Flexbox in gewissen Rahmen entsprechend anpassen lassen und die Navigation kann in solchen Fällen oberhalb des Inhalts angezeigt werden.

        Das aktuelle Bootstrap ist eigentlich schon veraltet und sollte deshalb nicht mehr für neue Seiten verwendet werden. Grade auch was Responsive Design angeht. Grade gewerbliche Webseiten werden häufig nach der Erstellung einer neuen Webpräsentz jahrlang nicht mehr aktualisiert. Von daher sollten Lösungen verwendet werden, die noch lange Zeit aktuell sind und noch jahrlang unterstützt werden.

        Aber zu deinem Problem:

        Hat das schon jemand mal gemacht, bzw. kennt jemand einen Trick, wich doch zwei top Navbars haben kann?
        Was spricht dagegen einfach mit Bootstrap-Mitteln zwei Zeilen innerhalb der Navigation zu erzeugen? Entweder durch zwei rows oder indem die Buttons so breit gemacht werden (bzw. der entsprechende Leerraum zugewiesen wird), dass nur noch die gewünschte Anzahl in eine Zeile passt?

        Gruss

        MrMurphy

        Kommentar


        • #5
          MrMurphy Danke für Deinen Tipp mit den zwei Zeilen innerhalb einer Navigation. Das werde ich definitiv auch nochmal in Erwägung ziehen.

          Also, denke das Thema hat sich erledigt. Denn ich habe mich jetzt dazu entschieden, die Kategorien in ein Dropdown, also in eine 2. Ebene der Navbar zu packen. Damit ist es schön aufgeräumt, und man sieht auch auf mobilen Endgeräten die Kategorien nur, wenn man explizit nochmal drauf Klickt. Ein paar Sachen wie Kontant, Impressum & Co. werde ich redundand nochmal direkt im Footer anzeigen. Das ist dann auch mit Hinblick auf die Firmenrepräsentationsseite gleich aussehend. Wie gesagt möchte ich ja Corperate Identity betreiben, das heißt die Seiten müssen vom Geschmacksmuster her gleich sein. Das heißt gleiches Layout, gleiche Elementsaufteilung und gleiche Farben. Ich denke das habe ich damit ganz gut gelöst. Die Links werden zwar logischerweise nicht dieselben sein, aber anstatt der Kategorie kommen halt dann in die Firmenseite die Produkte und der Rest ist gleich. Außerdem wird der graue About Block rechts dann durch eine kurze Zusammenfassung oder ähnliches ersetzt auf der eigentlichen Firmenseite, wo im Blog halt Infos über den Autor stehen würden.


          Vielen Dank an alle, hat mir sehr geholfen. Besonders, da ich ohne fremde Hilfe nicht auf solche tollen Ideen gekommen wäre. Ich bin leider selber nicht der kreativste...

          Kommentar

          Lädt...
          X