Navigation Vertical Style Problem?

dalton · 12. Oktober 2011 10:15

Hallo,

ich muss ein spezielles Navigations Menü machen das meiste ist recht simple nur beim letzten teil komm ich nicht drauf wie ich das umsetzen kann.

Hier mal ein Bild des Menüs wie es aussehen sollte:

Hier sieht man diese 2 Striche die zum Unterpunkt führen im Bild z.B. zu "Kompetenzen".

Nur wie setz ich diese Striche mit CSS/Bildern um? Damit es automatisch immer die Striche zum gewählten Unterpunkt führt?

Beste Dank im vorraus für eure Hilfe.

mike-r · 12. Oktober 2011 13:44

Du könntest dem Activeparent als Klasse den Namen/page-alias des Menuactive mitgeben, und darüber dann der Liste (UL) jeweils ein Hintergrundbild verpassen.
Etwa:

Hier klicken, um den Code zum Kopieren zu markieren

<li class="activeparent menu-kompetenzen""><a href="">Integrated...</li>
<ul>
CSS:
[...]
.menukompetenzen ul {background:url(/menu-kompetenzen.png)}
.menu-projektbeispiele ul {background:url(/menu-projektbeispiele.png)}
[...]

(Alternativ reicht eine Linie als Grafik, die Du jeweils per negativer Position verschiebst)

Die Sache hat allerdings einen Haken; Du musst die Schriftgrösse auf Pixel festzurren und wenn jemand im Browser Text skaliert, oder anderweitig abweichende Schriftgrössen nutzt, bekommst Du eine Lücke.
(Günstiger wäre da eine gestrichelte Linie, dann fällt das nicht so auf)

Beitrag geändert von mike-r (12. Oktober 2011 13:47)

mike-r · 12. Oktober 2011 13:55

Mir fällt grad noch eine etwas elegantere Alternativlösung ein, die auch beim Skalieren funktioniert:
Man packt in das Menü komplett eine Linie als Hintergrund rein und überschreibtdeckt die dann bei den nachfolgenden Punkten via:

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]
li.menuactive + * {background:#fff;}

Herrje, ich und meine Edits; Korrekt wäre hier natürlich der Tilde-selektor, also:

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]
li.menuactive ~ * {background:#fff;}

Das machen aber nicht alle Browser mit, dann nehmen wir doch das Plus, nämlich so:

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]
li.menuactive + *,
li.menuactive + * + *,
li.menuactive + * + * + * /* usw. je nachdem wieviel Punkte man maximal abdecken muss */
{background:#fff;}

Beitrag geändert von mike-r (12. Oktober 2011 14:04)

mike-r · 20. Oktober 2011 13:34

Und? Geht's voran?

nicmare · 20. Oktober 2011 14:36

oha, welcher designer denkt sich denn so eine navi aus?
anderer vorschlag:
dem aktiven punkt im menümanager einen <span> zuweisen der im relativ platzierten listenelement widerum absolut positioniert wird und sehr hoch ist. dem dann noch das hintergrund bild geben. damit das ganze dann aber nicht aus dem menü springt, diesem ein overflow:hidden zuweisen. sollte in allen browsern passen wink

dalton · 25. Oktober 2011 15:22

Ich Probier mal eure Vorschläge aus mal schauen was sich ergibt.
Hatte leider noch keine Zeit dafür.

@nicmare ja das hab ich mich auch gefragt smile .

McPaul · 25. Januar 2012 13:23

hilfe- hilfe wink

ich habe aus so ein Problem. Ich mochte, dass meine Aktive Seite z.B. rot im Menü angezeigt wird.

Beim Früheren CMS Version (1.5.1 "San Juan") habe ich es in der CSS hier:

div#menu_vert ul h3 {
background: url(images/cms/arrow-right-active.gif) no-repeat 0.4em center;
/* background-color: #ba1c66; */
display: block;
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #ba1c66; /* this will be link color for all levels */
font-size: 1em; /* instead of the normal font size for <h3> */
margin: 0; /* as <h3> normally has some margin by default */
}

alles super ändern können. Jetzt nach (endlich ich weis) Update auf (1.10.1 "Le Lorrain") finde ich es nirgends. Das einzige was ich gefunden habe, das die Hauptkategorie sich färbt, wenn ich im Untermenü bin. *grrrr* An welcher Stelle stehe ich auf dem Schlauch?!?!

Vielen Dank vorab schon für eure Mühe.

Vir-Cotto · 04. März 2012 17:47

McPaul schrieb:

hilfe- hilfe
ich habe aus so ein Problem. Ich mochte, dass meine Aktive Seite z.B. rot im Menü angezeigt wird.
Beim Früheren CMS Version (1.5.1 "San Juan") habe ich es in der CSS hier:
div#menu_vert ul h3 {
background: url(images/cms/arrow-right-active.gif) no-repeat 0.4em center;
/* background-color: #ba1c66; */
display: block;
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #ba1c66; /* this will be link color for all levels */
font-size: 1em; /* instead of the normal font size for <h3> */
margin: 0; /* as <h3> normally has some margin by default */
}

alles super ändern können. Jetzt nach (endlich ich weis) Update auf (1.10.1 "Le Lorrain") finde ich es nirgends. Das einzige was ich gefunden habe, das die Hauptkategorie sich färbt, wenn ich im Untermenü bin. *grrrr* An welcher Stelle stehe ich auf dem Schlauch?!?!

Vielen Dank vorab schon für eure Mühe.

Tja, irgendwie habe ich ein ähnliches Problem und kann mir nicht vorstellen, dass keiner Probleme hat(t)e beim Upgraden.
Also dieses div#menu_vert ul h3 gibts in 1.10.x gar nicht mehr.

Unter 1.4.1 sah das bei mir ein Menüpunkt im Quelltext so aus:

<ul>

<li class="currentpage"><h3><dfn>Current page is 9.1.1.2.1: </dfn>Menütitel</h3>

unter 1.10.3 jetzt so:

<ul>

<li class="menuactive"><a class="menuactive" href="#"><span>Menütitel</span></a>

und ebenfalls 5. Navigationsebene wohlbemerkt.

Also nutzt es gar nicht in der entsprechenden CSS Datei im Adminbereich zu ändern. Kein Effekt. Ich kann nur den Abstand/Einzug regulieren und welche Hintergrundgrafik allg. verwendet werden soll. Diese ganzen menu_vert Angaben in der CSS werden nicht mehr akzeptiert.

Für active und current pages, die bisher in 1.4.1 gültig waren, gelten nicht mehr. Ich kann das halbe CSS quasi wegradieren, da diese Angaben ignoriert bzw. an andere Stelle reguliert werden, aber WO???

mike-r · 04. März 2012 18:28

Soweit ich weiss gibt's das Menü-template in der Art schon ewig nicht mehr. Solche Probleme hat man übrigens nicht, wenn man sich bei jeder CMS-Installation, das gewünschte Menü in die DB holt und einen eigenen Namen vergibt.
Wenn ich das richtig sehe ist das "alte" Template hier: http://www.cmsmadesimple.de/forum/viewt … 781#p15402
Menü vorher sichern...

Vir-Cotto · 04. März 2012 19:04

mike-r schrieb:

Wenn ich das richtig sehe ist das "alte" Template hier: http://www.cmsmadesimple.de/forum/viewt … 781#p15402
Menü vorher sichern...

Danke. Richtig. Ich habe damals das entsprechende Standard-Template, das ich damals für mein Design/Layout angepasst habe nicht unbenannt, genauso wenig wie die CSS Simple Navigation Vertical. Beim Upgraden über 1.6.7 zu 1.10.3 habe ich eigentlich gar nicht damit gerechnet, dass mein Design/Layout übernommen wird. Bis auf dieses Menütemplate bzw. die nicht funktionierenden CSS Angaben für Active/Current, war mein altes Design/Layout noch brauchbar. Jetzt habe ich diese Templates umbenannt, weil ich selbst durcheinander gekommen bin im Adminbereich, welches Template eigentlich für was verantwortlich ist.

Ok, es geht um ein altes Menü-Template, welches ich aber über den Adminbereich kein Zugriff darauf habe, um diese zu ändern/anpassen? Die entsprechenden neuen Code-Snipplets im Link, finde ich bei der 1.10.3 Installation in der Datenbank unter cms_module_templates 2 Datensätze und 1x unter cms_siteprefs. Also die neue Standard-Version. Muss/Kann ich jetzt, um mein Template wieder wie unter 1.4.1 funktionieren zulassen, den alten Code in einer dieser Tabellen einfügen und quasi das neue mit dem alten ersetzen?

Oder müsste/sollte ich eigentlich nur das HTML-Template anpassen?:

{* Start Navigation *}
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{menu template='simple_navigation.tpl' collapse='1'}
</div>
{* End Navigation *}

wobei die ohne die passenden CSS-Angaben nichts nützt, egal ob die neuen oder alten. Ich will einfach nur diesen simple verticale Navigationsstruktur optisch wieder anpassen können.

Cherry · 04. März 2012 20:47

wenn du auf ein Menütemplate keinen Zugriff hast, dann klick doch mal auf den 'Importieren' Button rechts in der Zeile.
Damit hast du's dann in der Datenbank und kannst es bearbeiten.

Vir-Cotto · 11. März 2012 17:04

Danke. Ich habe zumindest dieses Problem für mich lösen können. Am Ende habe ich einfach das alte Menütemplate / CSS aus 1.4.1 übertragen. Dann ging alles soweit wieder wie vorher.

Forum für CMS/made simple

#1 12. Oktober 2011 10:15

Navigation Vertical Style Problem?

#2 12. Oktober 2011 13:44

Re: Navigation Vertical Style Problem?

#3 12. Oktober 2011 13:55

Re: Navigation Vertical Style Problem?

#4 20. Oktober 2011 13:34

Re: Navigation Vertical Style Problem?

#5 20. Oktober 2011 14:36

Re: Navigation Vertical Style Problem?

#6 25. Oktober 2011 15:22

Re: Navigation Vertical Style Problem?

#7 25. Januar 2012 13:23

Re: Navigation Vertical Style Problem?

#8 04. März 2012 17:47

Re: Navigation Vertical Style Problem?

#9 04. März 2012 18:28

Re: Navigation Vertical Style Problem?

#10 04. März 2012 19:04

Re: Navigation Vertical Style Problem?

#11 04. März 2012 20:47

Re: Navigation Vertical Style Problem?

#12 11. März 2012 17:04

Re: Navigation Vertical Style Problem?

Fußzeile des Forums