Und wohin nur mit der Navigation?

Geronimo · July 8, 2017 at 12:23 AM

Hallo,

am Stil der Suite bastle ich ja schon eine ganze Weile herum, aber womit ich einfach nicht weiterkomme, das ist jetzt im Header-Menü enthaltene Navigation. Die drei Elemente, Hauptmenü, Benutzermenü und Breadcrumbs sind leider in der Suite sehr unflexibel. Und selbst wenn man sich per CSS ein Bein ausreißt und die Elemente verschiebt, gelingt es nicht so recht eine sinnvolle Anordnung für sie zu finden, denn das Benutzermenü wirkt alleine bspw. recht verloren. Wie habt ihr das bei euch gelöst? Ich hätte die Navigation bspw. gerne unter dem Logo.

Beste Grüße

Gerhard

Gino Zantarelli · July 8, 2017 at 1:20 AM

Die Umpositionierung mit CSS ist wirklich äußerst schlecht umsetzbar in Teilbereichen, da müsstest du evt. schon eher mit Templateanpassungen arbeiten.

aber es kommt auch darauf an wie du deinen Stil gestalten möchtest um Positionen festzulegen, Das "Benutzermenü" sieht einzeln im Grunddesign verloren vor... hast du eine farbliche Abgrenzung zu anderen Elementen siehts schon besser aus - noch mehr kann man zur Füllung des Benutzermenüs auch die Schrift sichtbar machen anstatt nur die Symbole anzuzeigen:

Code

.userPanel > ul > li > a > span:not(.icon):not(.badge) {
    display: inline-block;
}

Das Menu ist im Standard fest am Rand oben positioniert, du kannst dieses aber auch flexibel darstellen (so dass dein Menu mitscrolled):

Code

.pageHeaderPanel {
    position: relative;
}

SwPotsdam · July 8, 2017 at 2:52 AM

Geronimo Das Problem kenne ich nur zu gut.

Gino Zantarelli Das mit den Template Änderungen (header) hab ich auch schon mal versucht aber mir hat es so die Mobile Anischt zerstört.

Geronimo · July 8, 2017 at 5:04 PM

Hallo,

so langsam wird mein Entwurf. Mich stört halt etwas, dass ich die Navigation absolut dorthin verschieben muss, wo ich sie haben möchte, und dadurch jede automatische Anpassung verhindere, bspw. wenn der Header höher wird. Gino ist ja ein wahrer Meister die raffiniertesten Sachen zu zaubern. Seine Designs haben mich motiviert mich auch nochmal dranzusetzen.

Danke für den Tipp mit den Bezeichnungen für die Menüpunkte. So schaut das Benutzermenü schon mal nicht mehr so verloren aus.

Beste Grüße

Gerhard

Geronimo · July 8, 2017 at 6:09 PM

Wie bekommt man das hin, dass zwar das Benutzermenü oben bleibt, aber das Hauptmenü ganz normal mitscrollt? An den Templates möchte ich eigentlich nichts verändern. Aber wäre natürlich das einfachste diese seltsame Verschachtelung aufzulösen.

Gino Zantarelli · July 8, 2017 at 6:15 PM

Um das Usermenü zu fixieren:

Code

.userPanel {
    position: fixed;
    top: 0px;
}

Geronimo · July 8, 2017 at 10:18 PM

Sodale. Ich denke der Zwischenstand kann sich schon mal sehen lassen. Mit dem Hauptmenü kämpfe ich derzeit noch. Und auch die Untermenüs im Benutzermenü klappen noch verkehrtherum aus. Aber das lässt sich sicher noch anpassen. Interessant wäre auch wie man die Tooltips im Benutzermenü entfernt. Die braucht man ja nicht mehr wenn man die Menüpunkte samt Beschriftung anzeigt.

Devon · July 8, 2017 at 10:25 PM

Quote from Geronimo

Interessant wäre auch wie man die Tooltips im Benutzermenü entfernt. Die braucht man ja nicht mehr wenn man die Menüpunkte samt Beschriftung anzeigt.

Ich glaube das wäre mit ein paar Template-Änderungen machbar. Im Template pageHeaderUser wird bei jedem Link ein "jsTooltip" mitgeliefert. Das müsste die Tooltips des Usermenus darstellen. Ich habe das selbst noch nicht ausprobiert, wollte sowas aber auch umsetzen.

Geronimo · July 9, 2017 at 6:24 PM

Auf Template-Änderungen möchte ich möglichst verzichten. Die einzige Änderung die ich vorgenommen habe, war um die Favicons für verschiedene Systeme sauber einzubauen. Hat vielleicht ein CSS-Experte eine Idee, wie ich die Breadcrumbs („pageNavigation“) bündig unter die Navigation bekomme? Die hängen scharf links und bleiben auch hartnäckig dort.

SwPotsdam · July 9, 2017 at 10:30 PM

Wenn man weiß was man machen muss kommt schon was gutes bei raus. Zumindest hab ich jetzt ein Darstellung gefunden die mir gefällt.

Bei deinem Problem musst du ein paar Sachen ändern so wie ich das jetzt getestet habe bei dir am Stil.

1. .pageNavigation - position: absolut & top: 255px entfernen

2. .mainMenu - top: xx auf 200px ändern

3. .main - padding anpassen wegen abstand nach oben

4. div#pageHeaderFacade {padding-bottom: 50px;} einfügen

Beim ändern von 2. musste auch 4 anpassen und umgekehrt.

Alle Angaben ohne Gewähr!

Hitman · July 10, 2017 at 12:01 AM

Geronimo

Quote from Geronimo

Hat vielleicht ein CSS-Experte eine Idee, wie ich die Breadcrumbs („pageNavigation“) bündig unter die Navigation bekomme? Die hängen scharf links und bleiben auch hartnäckig dort.

CSS

@includescreen-lg {
    .pageHeaderFacade > .layoutBoundary {
        padding-bottom: 80px;
    }
}
.pageNavigation {
    min-width: 1000px;
    max-width: 1400px;
    padding: 5px;
    margin: 0 auto;
    width: 100%;
}
.main {
    padding: 60px 0px 30px 0px;
}

Display More

Mit Gewähr

Geronimo · July 10, 2017 at 12:14 AM

Funktioniert. Vielen Dank für deine Hilfe. Da habe ich wohl was die Formatierungen angeht etwas den Überblick verloren. Mit float komme ich klar aber mit den neuen Anordnungsmöglichkeiten muss ich mich erst noch anfreunden. Das Benutzermenü verwendet beispielsweise eine Eigenschaft bei der ich erst mal nachlesen musste, was das ist, display:flex, nur konnte ich noch nicht herausfinden, wie ich den letzten Menüpunkt, also die Suche, rechtsbündig anordne.

Das Benutzermenü wie bei dir „freischwebend“ anzuordnen, finde ich auch eine schöne Idee, und erinnert ein wenig ans WBB 3.x.

Geronimo · July 10, 2017 at 12:17 AM

Hitman, danke für deine Lösung, deine „bewaffnete“ Variante (mit Gewehr...) habe ich leider zu spät gesehen. Aber ich habe es auch schon mit der Anleitung von Mahiro hinbekommen. Was macht denn da das @includescreen-lg? Oh, die mobile Ansicht muss ich auch noch reparieren, aber das hat Zeit bis morgen.

SwPotsdam · July 10, 2017 at 12:22 AM

https://docs.woltlab.com/view_css.html#media-breakpoints

Das sorgt dafür das der CSS Code nur bei einer bestimmten Screengröße angewendet wird und nicht bei jeder. Glaube bei meinem Code ist die Mobile Ansicht zerschossen deswegen.

Hitman · July 10, 2017 at 12:24 AM

Quote from Geronimo

Was macht denn da das @includescreen-lg?

Das steht für ehemals @includescreen-lg = Desktop PC (min-width: 1025px) oder auch @media

Dokumentation dazu findest du hier https://docs.woltlab.com/view_css.html

Hitman · July 10, 2017 at 2:03 AM

Geronimo

warum hast du die Frage wieder gelöscht mit dem Suchpanel nach rechts verschieben

Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Geronimo (Vor 2 Stunden)

CSS

.userPanel {
    flex: 1;
}
.userPanel > ul > li:not(:first-child) {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

Geronimo · July 10, 2017 at 9:12 PM

Man könnte jetzt sagen meine Wege wären unergründlich, aber tatsächlich war es nur ein der späten Stunde geschuldetes Versehen. Das Ergebnis ist nicht so ganz was ich wollte, aber durchaus auch interessant, aber 1 bis 4 links und 5 rechts wäre mir lieber.

Hitman · July 10, 2017 at 10:16 PM

So war das natürich nicht gedacht .

Leider sehe nur das Suchfeld als Gast.

Wenn du dich abmeldest müsste es passen

Evtl. kannst du mir über Konversation einen User-Account zuschicken, dann schaue ich noch mal nach

Geronimo · July 11, 2017 at 11:02 PM

Muss ich mir bei Gelegenheit nochmal anschauen. Hab' allerdings schon wieder eine nervige Formatierung entdeckt: Irgendwie ist in der mobilen Ansicht der dreispaltige Bereich bereiter als der Inhaltsbereich. Das sorgt für Scrollbalken. Ich finde aber nicht wo die Breite des dreispaltigen Bereichs definiert wird...

Geronimo · August 5, 2017 at 9:42 PM

Neues Wochenende neues Problem: Mal angenommen ich möchte das Benutzermenü ins Hauptmenü verlagern, also ganz so wie es standardmäßig ist, nur ein gutes Stück weiter unten und nicht oben angepinnt, dann ist das mit Photoshop kein Problem, aber wie drücke ich das in CSS aus?

Vorher

Nachher

Participate now!