Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

is_detailmenu :: class-Selektor-Schalter

Begonnen von djr, 24. Mai 2012, 16:52:39

« vorheriges - nächstes »

djr

is_detailmenu Plugin
Download
{is_detailmenu} erkennt, ob in der aktuellen Kategorie ein Detailmenü ausgegeben wird oder nicht.
Rückgabewert: mit-detailmenu bzw. ohne-detailmenu

Dieser Rückgabewert kann als class-Selektor z.B. im body-Tag eingesetzt werden:
<body class="{is_detailmenu}">
Fallbeispiel:

Layout: Oben horizontales Menü, darunter zwei Spalten: links Detailmenü, rechts Content.
<!-- s:!: -->:!:<!-- s:!: --> Vorausgesetzte Einstellung im Backend: Inhaltsseiten, die genau wie die Kategorie heißen, werden im Detailmenü versteckt.
Fall: Es existieren Kategorien mit nur einer Inhaltsseite und diese hat den selben Namen wie ihre Kategorie.

Problem: Wird kein Detailmenü gebraucht, ist die linke Spalte leer und der Inhalt nimmt dennoch nur die rechte Seite ein.
Schöner: Der Inhalt dehnt sich bei fehlendem Detailmenü auf die komplette Seitenbreite aus.

Lösung als vereinfachtes Code-Beispiel: ---HTML---

<body class="{is_detailmenu}">
<div class="content">Inhalt</div>
<div class="sidebar">DetailMenu</div>
<body>

---CSS---

div.content {
width: 80%;
}
.ohne-detailmenu div.content {
width: 100%;
}
.ohne-detailmenu div.sidebar {
display: none;
}

...viel Spaß damit!
Feedback erwünscht.

HPdesigner

#1
Zitat von: "djr"Problem: Wird kein Detailmenü gebraucht, ist die linke Spalte leer und der Inhalt nimmt dennoch nur die rechte Seite ein.
Meines Erachtens viel zu umständlich, dafür ein extra Plugin zu nutzen. Geht doch viel einfacher mit CSS float:

.content {
   float:right;
}
.detailmenu {
   float:left;
   width:20%;
}

Wenn das Detailmenü jetzt verschwindet, hat .content wieder die komplette Breite. Oder lieg ich jetz völlig falsch? Ich meine ich hab das so im Einsatz und es funktioniert...
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

djr

#2
@HPdesigner:
Man kann ja nicht immer floaten, z.B. bei fixer Positionierung. Zudem kann im Grunde jedes Element des Templates davon abhängig gemacht werden, ob ein Detailmenü existiert.

Richtig "floaten" ist eine Kunst für sich.
(Dein Codeschnipsel erzeugt bei mir übrigens nicht den gewünschten Effekt.)
Ich kannte bis eben nur spaltenbildende Floats die voneinander abhängige Größen brauchten (width, margin oder height) und nun mit dem Plugin bedient sind. Eine Ausnahme scheint die Kombination mit overflow (siehe hier "Beispiel 3").
(Notiz an mich: recherchieren, hinzulernen.)

HPdesigner

#3
Zitat von: "djr"Man kann ja nicht immer floaten, z.B. bei fixer Positionierung
Da ich fixe Positionierung höchstens mal bei nem Hintergrundbild verwendet hab, ist das für mich nicht von belang. Kannst du ein Beispiel nennen, wo fixed und float sich beißen?

Zitat von: "djr"Zudem kann im Grunde jedes Element des Templates davon abhängig gemacht werden, ob ein Detailmenü existiert.
Das ist natürlich nicht zu verachten, zumal es sich ja nichtmal auf die Styles begrenzt!

Zitat von: "djr"Dein Codeschnipsel erzeugt bei mir übrigens nicht den gewünschten Effekt.
Hast du ne Testseite?
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

djr

#4
Zitat von: "HPdesigner"
Zitat von: "djr"Man kann ja nicht immer floaten, z.B. bei fixer Positionierung
(...) Kannst du ein Beispiel nennen, wo fixed und float sich beißen?
Elemente die "absolute" oder "fixed" positioniert sind, liegen außerhalb des normalen Textflusses, daher können sie nicht um-float-et werden.

Zitat von: "HPdesigner"... zumal es sich ja nichtmal auf die Styles begrenzt!
Was schwebt Dir vor?

Zitat von: "HPdesigner"Hast du ne Testseite?
Diese Frage reiche ich vorerst zurück.
Wo hast Du das den so im Einsatz?

HPdesigner

#5
Zitat von: "djr"Elemente die "absolute" oder "fixed" positioniert sind, liegen außerhalb des normalen Textflusses, daher können sie nicht um-float-et werden.
Dem entnehme ich, dass du dein detailmenu absolut oder fixed positionierst, in dem Fall ist float tatsächlich sinnlos. Da ich das aber nie verwende, ist für mich die float variante einfacher.

Zitat von: "djr"Was schwebt Dir vor?
Alles, was auf Klassen zugreift. Man könnte zB ein Javascript bauen, was die Klasse ausliest und wenn ein detailmenu gesetzt ist anbietet, es einzuklappen oder so.

Zitat von: "djr"Wo hast Du das den so im Einsatz?
Wie gesagt, ich habs nicht getestet, weil ich dafür keine Anwendung hab.
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

djr

#6
bzgl. Code-Schnippsel:
Zitat von: "HPdesigner"Wie gesagt, ich habs nicht getestet, weil ich dafür keine Anwendung hab.
vorher:
Zitat von: "HPdesigner"Ich meine ich hab das so im Einsatz und es funktioniert...
:?:

Weil ich jetzt auch kein Bsp. online habe:
Zitat von: "HPdesigner".content {
   float:right;
}
.detailmenu {
   float:left;
   width:20%;
}
Ergibt (logischerweise):
Content nimmt sich so viel Breite wie er braucht. Braucht Content weniger als 80% der Breite, floatet das Menü daneben.

HPdesigner

#7
Zitat von: "djr":?:
Da haben wir wohl aneinander vorbei geredet - Ich meinte, ich hab dein Plugin nicht getestet, weil ich keine Anwendung dafür hab. Und dass ich es so im Einsatz hab, damit meinte ich mein float code schnipsel. Ich hab nochmal geschaut, aber ich benutz das doch nicht so. Wenn bei mir die Seitenbox fehlt, ist mein Inhalt immer noch so breit wie vorher - das ist allerdings durchaus gewollt.

Also um es nicht unnötig auszudehnen: Dein is_detailmenu Plugin ist definitiv sinnvoll, wenn man genau diese Funktionalität für seine Page möchte. Vlt finde ich auch nochmal Anwendung dafür - dann lass ich es dich wissen  ;)
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

djr

#8
;)

wasp

#9
Hmmm. überhaupt ...  :roll:
(Ziemlich verstrickt euer "Forenchat" ...)

HPdesigner

#10
Zitat von: "wasp"Ziemlich verstrickt euer "Forenchat" ...
Wenn niemand anders mitdiskutiert...
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack