[GELÖST] Advanced Content .. Stylesheet Menü

pedro100 · 29. August 2012 13:26

Hallo zusammen

Ich verwende Advanced Content. Um das Menü azuzeigen wurde im Stylesheet zusätzlich noch folgende Einträge gemacht:

#mainNav ul li.sectionheader,
#mainNav ul li.sectionheader:hover,

Wenn alle Haupt- und Unterseiten mit "erweiterter" Inhalt" erstellt wurden funktioniert es tip top. Sobald aber Seiten die mit "Abschnittsüberschrift" erstellt wurden funktioniert's nicht mehr.

Siehe hier

Hat jemand eine Idee wie man das Menü inkl. Abschnittsüberschriften korrekt darstellen kann?

Stylesheet des Menüs:

/* Main Menu Dropdown
------------------------------------------------- */
#mainNav {
width: 950px;
margin: 0 auto;
height:46px;
padding: 0;
background: #007035;
z-index:100;
}
#mainNav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
z-index:10;
}

#mainNav ul li.sectionheader,
#mainNav ul a {
display:block;
padding: 14px 22px 14px 22px;
font-size:12px;
font-weight:bold;
text-decoration: none;
color: #dedede; /* default link color */
text-transform:uppercase;
margin:0;
transition: background-color .2s;
-moz-transition: background-color .2s;
-webkit-transition: background-color .2s;
-o-transition: background-color .2s;
}

#mainNav ul li.sectionheader:hover,
#mainNav ul a:hover {
background-color:#008742;
color:#fff;
}

/* first level */
#mainNav ul li {
float:left;
position:relative;
padding:0;
border-right: 1px solid #025B13;
border-left:1px solid #008742;
}
#mainNav ul li:last-child a {
border-right: 1px solid #025B13;
}
#mainNav ul li:last-child {
border-right: 1px solid #007035;
}
#mainNav ul li.parent {
background:url(/uploads/tpl-buddy-005/activeparent.png) no-repeat right center;
}
#mainNav ul li.parent a {
padding-right:30px;
}
#mainNav ul li.parent a:hover {
background:#008742 url(/uploads/tpl-buddy-005/activeparent-hover.png) no-repeat right center;
}
#mainNav ul li.menuactive {
background:#025B13;
}
#mainNav ul li.menuactive a {
color:#fff;
}
#mainNav ul li.parent a.menuactive {
background:#025B13 url(/uploads/tpl-buddy-005/activeparent-hover.png) no-repeat right center;
}
#mainNav ul li.menuactive li a {
color: #dedede;
}

/* second level */

#mainNav ul ul {
position:absolute;
display:none;
width:20em;
top:3.8em;
z-index:9;
}
#mainNav ul li ul a {
width:14em;
height:auto;
float:left;
font-weight:normal;
text-transform:inherit;
background-image:none;
background:#007035;
border-bottom:1px solid #025B13;
border-top:1px solid #008742;
padding: 11px 22px 11px 22px;
}
#mainNav ul li.parent li a:hover {
background:#008742;
}
#mainNav ul li.parent li.parent a {
background:#007035 url(/uploads/tpl-buddy-005/arrow-right.png) no-repeat right center;
}
#mainNav ul li.parent li.parent a:hover {
background:#008742 url(/uploads/tpl-buddy-005/arrow-right-hover.png) no-repeat right center;
}
#mainNav ul li.menuactive li a:hover {
color: #fff;
}
#mainNav ul li.parent li a.menuactive {
background:#025B13;
color:#fff;
font-weight:bold;
}
#mainNav ul li li:last-child,
#mainNav ul li:last-child li {
border-right: none;
}

#mainNav ul li.parent li.parent a.menuactive {
background:#025B13 url(/uploads/tpl-buddy-005/arrow-right-hover.png) no-repeat right center;
}

/* third level */
#mainNav ul li.parent li.parent li a {
background:#007035e;
}
#mainNav ul li.parent li.parent li a:hover {
background:#008742;
}
#mainNav ul li.parent li.parent li a.menuactive {
background:#025B13;
}
#mainNav ul ul ul{
top:auto;
}
#mainNav ul li ul ul {
left:18.3em;
margin:0;
border-left:1px solid #025B13;
}
#mainNav ul li:hover ul ul, #mainNav ul li:hover ul ul ul, #mainNav ul li:hover ul ul ul ul{
display:none;
}
#mainNav ul li:hover ul, #mainNav ul li li:hover ul, #mainNav ul li li li:hover ul, #mainNav ul li li li li:hover ul{
display:block;
}
#mainNav li.currentpage h3 {
display:block;
padding: 16px 22px 16px 23px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
background: #025B13;
font-weight:bold;
text-decoration: none;
color: #fff;
text-transform:uppercase;
margin:0;
}

Vielen Dank

Pedro

mike-r · 29. August 2012 20:27

Das Einfachste wäre, Deine Eigenschaften auf die Spans zu setzen statt auf die Links.
(Logischerweise ist eine Abschnittsüberschrift kein Link zu einer Seite, sodass Dein Problem erwartungsgemäss auftreten muss)

pedro100 · 29. August 2012 21:41

Bitte um Nachsicht, da Anfänger ... was müsste ich ändern um von "links" ?? auf "Spans" ?? zu wechseln?

Ich habe vorher kurz das Template auf die Navi von "Layout: Top menu + 2 columns" umgestellt. Dieses Stylesheet hat alles korrekt dargestellt ... ausser dem Zeiger bei mouse over über die "Abschnittsüberschrift" ( = Texteingabe Symbol anstatt die Hand)

mike-r · 30. August 2012 22:23

das müsste #mainNav ul li.sectionheader>span sein. Das auf display:block setzen könnte schon reichen um das breitzuziehen. (ungetestet)
Dass das Submenü verschoben ist, ist mir grad zu hoch, könnte ich mir morgen nochmal anschauen, falls niemand anders Langeweile hat... (unter Umständen löst sich das Problem durch block auch von selbst, da die Proportionen wieder stimmen müssten)

pedro100 · 30. August 2012 23:27

Wenn ich umstelle auf #mainNav ul li.sectionheader>span anstelle von #mainNav ul li.sectionheader, .... dann funktioniert's sogar im Menü "Ohne Abschnittsüberschrift" nicht mehr.

mike-r · 30. August 2012 01:06

Du sollst auch nicht umstellen, sondern die Regel hinzufügen.
Wahrscheinlich:

Hier klicken, um den Code zum Kopieren zu markieren

#mainNav ul li.sectionheader>span {display:block}

Beitrag geändert von mike-r (30. August 2012 01:06)

pedro100 · 30. August 2012 08:44

Bringt auch nichts ... wird noch schlimmer, siehe hier

mike-r · 30. August 2012 11:41

Kannst du das mal auf den Stand von gestern bringen?

pedro100 · 30. August 2012 12:13

ist wieder der alte Stand ..

mike-r · 30. August 2012 16:43

Ersetze:

Hier klicken, um den Code zum Kopieren zu markieren

#mainNav ul li ul a

durch:

Hier klicken, um den Code zum Kopieren zu markieren

#mainNav ul li ul a, #mainNav ul li ul .sectionheader

Das bringt die unterschiedlichen "Buttons" auf die selben Eigenschaften (und "zieht" den Sectionheader breit...)

Die Verschiebung nach unten kommt daher, dass sich bei sectionheader das Top:3.8em auf den Unterpunkt bezieht und nicht aufs komplette Menü.
Abhilfe: bei

Hier klicken, um den Code zum Kopieren zu markieren

#mainNav ul li ul ul

top:0 hinzufügen

Die seitliche Verschiebung kommt daher, dass die Haupt-Buttons unterschiedlich breit sind. Solche Probleme kommen immer auf, wenn man feste Breiten, Höhen und Schriftgrössen verwendet und diese munter miteinander vermischt, so dass man am Ende gar nicht mehr weiss, welche Maße jetzt eigentlich gültig sind.
Schmutziger Hack dafür:

Hier klicken, um den Code zum Kopieren zu markieren

#mainNav ul li.sectionheader ul ul {
	left:17.3em;
}

Bessere Lösung wäre eigentlich, das Menü-CSS wegzuwerfen und komplett neu zu machen.

Hier mal ein Code-reduziertes Testcase incl. dem Hack:
http://jsfiddle.net/KFHf4/

Wie man das Aufklappmenü bündig unter den Sectionheader bekommt habe ich jetzt nicht geschaut, sollte aber anhand des Testcases erkennbar werden.

Tip: für .sectionheader würde ich an Deiner Stelle den Mauscursor noch ändern

Beitrag geändert von mike-r (30. August 2012 16:46)

pedro100 · 31. August 2012 22:43

Vielen Dank ... den ersten Eintrag habe ich auch schon gemacht, wenn auch etwas anders, der Effekt war gleich, ich habe es sogar mit einem weiteren "sectionheader" geschafft, den third level ins top zu bringen (weiss aber nicht mehr wo ich ihn gesetzt habe) aber der Rest wie Seitenverschoben, Pfeile usw. blieb bestehen.

Wenn ich deine Anleitung step by step anwende ergibt sich dieses Resultat, wobei zusätzlich der funktionierende Teil "Ohne Abschnittsüberschrift" auch abgeschossen wird.

Wenn ich deine verkürzte Lösung vom Link (die ja funzt) en block kopiere, funktionierts natürlich auch nicht, da einiges an Code fehlt.

Irgendwie geht mir als Laie die Logik nicht auf ... es ist ja, wenn man den "erweiterten Inhalt" nutzen will zwingend, dass man die Seiten unter "erweiterten Inhalt" erstellt, also wenn man dies nun unter "Abschnittsüberschrift" erstellt muss es doch logischerweise Probleme geben (ist ja alles im gleichen Dropdown, man hat ja keine Doppelauswahl , entweder erweiterter Inhalt oder Abschnittsüberschrift) ... oder sehe dies falsch. Nach meiner Meinung müsste nach Auswahl "erweiterten Inhalt" nebst den Feldern "Inhaltgstyp", "Titel", "Menütext", "Übergeordnete Seite" auch noch zusätzlich die restlichten Möglichkeiten (Fehlerseite,Weiterleitungs Link,interner Seitenlink, Abschnittsüberschrift,Trenner) als Zusatz-Auswahl oder Option angezeigt werden anstelle im Dropdown "Inhaltstyp".

Beitrag geändert von pedro100 (31. August 2012 22:50)

nockenfell · 31. August 2012 04:52

Deine Ansicht ist nicht ganz korrekt. Die Menüprobleme haben mit AC direkt nichts zu tun.

Grundsätzlich ist es dem System egal welcher Inhaltstyp eine Seite hat. Du kannst also Problemlos als Hauptseite eine Weiterleitung, ein Sectionheader, ein Interner Link oder eine Seite haben.

Das Darstellungsproblem entsteht einzig im Zusammenspiel zwischen HTML und Stylesheet des Menüs. Ein Problem des Sectionheaders ist es, dass hier kein Link <a href... generiert wird. Das Stylesheet ist jedoch dafür geschrieben nur mit einem Link zu funktionieren.

pedro100 · 31. August 2012 12:48

Da es scheinbar für dieses Menü keine Lösung gibt bliebt mir also nichts anderes übrig als das mitgelieferte CSSMenu - Horizontal zu benutzen. Nach einfügen von "cursor: pointer" funktioniert auch das Mouse-over bei den Abschnittsüberschriften.

Ich bin da nicht gross bewandert in css, möchte nun aber das Menü in der Höhe um ein paar Px vergrössern. Wenn ich dies mit "height: 55px;" versuche, stimmt die Position des Untermenü und der Beschriftung nicht mehr. Wie gehe da am besten vor.

#menu_vert {
margin: 0;
padding: 0;
cursor: pointer
}
.clearb {
clear: both;
}
#menuwrapper {
background-color: #007035;
width: auto;
border-top: 1px solid #;
margin: 0;
padding: 0;
}
ul#primary-nav, ul#primary-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#primary-nav {
padding-top: 0px;
}
ul#primary-nav ul {
position: absolute;
top: auto;
display: none;
border-top: 1px solid #007035;
border-right: 1px solid #025B13 ;
border-bottom: 1px solid #007035;
border-left: 1px solid #025B13 ;
}
ul#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
ul#primary-nav li {
float: left;
margin: 0px;
padding: 0px;
}
#primary-nav li li {
width: 220px;
margin-left: 1px;
margin-top: -1px;
float: none;
position: relative;
}

ul#primary-nav li a {
font-size:1em;
font-weight: normal;
color: #fff;
padding: 12px 15px 15px;
display: block;
text-decoration: none;
}
ul#primary-nav li a:hover {
background-color: #008742;

}
ul#primary-nav li li a:hover {
color: #FFF;
}
ul#primary-nav li a.menuactive {
color: #FFF;
font-weight: bold;
background: url([[root_url]]/uploads/ngrey/nav1.png) repeat-x left 0px;
}
ul#primary-nav li a.menuactive:hover {
color: #FFF;
font-weight: bold;
background: url([[root_url]]/uploads/ngrey/nav3.png) repeat-x left 0px;
}
#primary-nav li li a.menuparent span {
display: block;
background: url([[root_url]]/uploads/ngrey/parent.png) no-repeat 98% center;

}

* html #primary-nav li li a.menuparent span {
background: url([[root_url]]/uploads/ngrey/parent.gif) no-repeat 98% center;
}
ul#primary-nav li ul a {
text-align: left;
margin: 0px;
position: relative;
padding: 6px 3px 6px 15px;
font-weight: normal;
color: #FFF;
border-top: 0 none;
border-right:0 none;
border-left: 0 none;
}
ul#primary-nav li ul {
background: #007035;
margin: 0px;
padding: 0px;
position: absolute;
width: auto;
height: auto;
display: none;
position: absolute;
z-index: 999;
border-top: 1px solid #025B13 ;
border-bottom: 1px solid #025B13;
opacity: 0.95;

}
ul#primary-nav li ul ul {
opacity: 95;
}

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {

background: url([[root_url]]/uploads/ngrey/nav3.png) repeat-x left center;
color: #000

}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE6 Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}

pedro100 · 31. August 2012 13:42

Tja, nun läuft das Menü, dafür der News Slider und Gallerie nicht. Wenn ich wieder ins alte Menü zurückwechsle, funktioniert alles wieder wieder.

Kann es vielleicht an diesem Eintrag im Stylesheet des Menüs liegen:

}
.clearb {
clear: both;
}

Aufruf der Menüs:

Slider funktioniert:

<div id="mainNav">
<h2 class="accessibility">Navigation</h2>
{menu template="tpl-buddy-005 : simple_navigation" number_of_levels="3"}
<hr class="accessibility" />
</div>

Slider funktioniert nicht:

{* Start Navigation *}
<div id="menu_vert">
{* stylesheet "Navigation: CSSMenu - Horizontal" *}
<h2 class="accessibility">Navigation</h2>
{menu loadprops=0 template='cssmenu.tpl'}
<hr class="accessibility" />
</div>
{* End Navigation *}

Beitrag geändert von pedro100 (31. August 2012 14:29)

mike-r · 31. August 2012 15:51

Der Slider geht hier - zumindest, wenn ich ABP deaktiviere. Tip: günstiger ist, die Scripte auf der Domain zu hinterlegen und nicht von extern zu holen.
In der Galerie ist mindestens ein Script falsch eingebunden: http://www.green-ag.ch/modules/Gallery/ … el.pack.js
Weitere Probleme kannst Du in der JS-Konsole und/oder im Netzwerktab von Firebug finden.

pedro100 · 31. August 2012 16:10

Im Moment läuft wieder die original Version in der Slider u. Gallerie funzen, aber eben, das Menue im erweiterten Modus nicht. Bin immer noch gleichweit, wie am Anfang. ggrrrr...

pedro100 · 31. August 2012 21:35

nockenfell schrieb:

Das Darstellungsproblem entsteht einzig im Zusammenspiel zwischen HTML und Stylesheet des Menüs. Ein Problem des Sectionheaders ist es, dass hier kein Link <a href... generiert wird. Das Stylesheet ist jedoch dafür geschrieben nur mit einem Link zu funktionieren.

Hhhmm, was heisst das jetzt? ... war der ganze Aufwand mit Advanced Content für die Katz?

Ich wäre ja bereit auf das mitgelieferte CSS Menü horizontal zu wechseln, das ja auch funktioniert, nur der Nachteil ist, dass News Slider und Gallerie abgeschossen werden !!??

Gibt es da wirklich keine Lösung für eine der beiden Varianten?

nockenfell · 31. August 2012 21:36

Ich schaue es mir an. Allerdings frühestens morgen oder Sonntag abend

pedro100 · 31. August 2012 21:42

Vielen Dank .... für mich als Laie ist es einfach unverständlich, dass es mit Erstellung "erweiterter Inhalt" funktioniert und mit "Abschriftsüberschrift" eben nicht.

pedro100 · 01. September 2012 11:17

nockenfell schrieb:

Das grösste Problem ist, dass die Navigation relativ fix auf den <a href Link aufgebaut ist.
Beim Sectionheader gibt es dies jedoch nicht, was auch die Probleme verursacht hat.
Ich habe nun jedem Sectionheader anstelle des <a href Tags ein <h3> verpasst. (Anpassung des Menütemplates) und das Stylesheet mit h3 angepasst.

Vielen herzlichen Dank an nockenfell.

Menü Template

Menü Stylesheet

Forum für CMS/made simple

#1 29. August 2012 13:26

[GELÖST] Advanced Content .. Stylesheet Menü

#2 29. August 2012 20:27

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#3 29. August 2012 21:41

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#4 30. August 2012 22:23

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#5 30. August 2012 23:27

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#6 30. August 2012 01:06

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#7 30. August 2012 08:44

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#8 30. August 2012 11:41

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#9 30. August 2012 12:13

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#10 30. August 2012 16:43

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#11 31. August 2012 22:43

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#12 31. August 2012 04:52

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#13 31. August 2012 12:48

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#14 31. August 2012 13:42

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#15 31. August 2012 15:51

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#16 31. August 2012 16:10

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#17 31. August 2012 21:35

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#18 31. August 2012 21:36

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#19 31. August 2012 21:42

Re: [GELÖST] Advanced Content .. Stylesheet Menü

#20 01. September 2012 11:17

Re: [GELÖST] Advanced Content .. Stylesheet Menü

Fußzeile des Forums