[GELÖST] "Vertikales Menü" vertikal oder horizontal ?

Dancer62 · 03. Juli 2014 12:10

Ich wollte ein Hauptmenü einbinden, das auf der obersten Ebene horizontal nebeneinander die Menüpunkte anzeigt. Beim Drüberfahren über einen Menüpunkt werden dessen Menüpunkte der zweiten Ebene angezeigt, mit einem kleinen Dreieck bei den (Unter-)Menüpunkten, die einen weiteren Untermenüpunkt haben (dieser würde wiederum rechts ausgeklappt werden). Das Ganze soll so aussehen, wie im Template "CSSMenu top + 2 columns".

Nun zu meinem Problem :
Bei mir wird die oberste Ebene korrekt dargestellt (siehe Beispiel):

Überfahre ich allerdings mit der Maus einen Menüpunkt, dann wird der Untermenüpunkt auf dem Menüpunkt dargestellt, so dass keiner der Einträge mehr richtig zu lesen ist. Die Menüpunkte der dritten Ebene werden wiederum korrekt neben bzw. untereinander dargestellt. Achso - das kleine Dreieck steht auch direkt auf dem Menüpunkt anstatt rechts daneben. Beispiel: das passiert, wenn ich mit der Maus über den vierten Menüpunkt drüberfahre :

Ich habe die Stylesheets "Navigation: CSSMenu - Horizontal", "Accessability and cross-browser tools" und "Navigation: FatFootMenu" (in dieser Reihenfolge) mit meinem Template verknüpft und den Code

Hier klicken, um den Code zum Kopieren zu markieren

                        <div id="menu_vert">

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

aus dem Template "CSSMenu top + 2 columns" in mein Template integriert.

Andynium · 03. Juli 2014 21:53

Bist du sicher, dass du die CSS genau so übernommen hast wie im Original Template?

Klingt mir stark nach einem Fehler in der CSS.

Dancer62 · 16. Juli 2014 19:47

Ja, ziemlich sicher. Zur Verdeutlichung habe ich hier mal die (meiner Meinung nach) relevante Codepassage aus meinem Template kopiert:

Hier klicken, um den Code zum Kopieren zu markieren

...
{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
   <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
   </ul>
{* end accessibility skip links *}

   <hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}

...
{* jetzt kommen im Code mehrere geschachtelte <div>-Anweisungen *}
...

                           {* Start Navigation *}
                           <nav>

 {cms_module module="menumanager"}

                              <div id="menu_vert">

{* stylesheet  "Navigation: CSSMenu - Horizontal" *}
                                 <h2 class="accessibility">Navigation</h2>
                                 {menu loadprops=0 template='cssmenu.tpl'}
                                 <hr class="accessibility" />
                              </div>
                              <div id="breadcrumbs">
                                 {cms_breadcrumbs} <!-- Show breadcrumbs pagelinks -->
                              </div> 
                           </nav>
{* End Navigation *}

Im Original-Template "CSSMenu top + 2 col" werden diverse CSS-Dateien eingebunden (in dieser Reihenfolge):

Layout: Top menu + 2 columns,
Navigation: CSSMenu - Horizontal,
Module: News,
Accessibility and cross-browser tools,
Print und
Navigation: FatFootMenu.

In meinem Template binde ich folgende CSS-Dateien ein (ebenfalls in dieser Reihenfolge):

<mein_Template>_reset,
<mein_Template>_style,
<mein_Template>_ie6,
li-scroller,
Navigation: CSSMenu - Horizontal,
Accessibility and cross-browser tools und
Navigation: FatFootMenu.

Die CSS-Datei "Module: News" habe ich nicht explizit eingebunden, da im Code die Anweisungen

Hier klicken, um den Code zum Kopieren zu markieren

{cms_module module="news"}

{* Start News, stylesheet  "Module: News" *}
                                <div id="news">
                                  <h2>Nachrichten</h2>
                                  {news number='5' detailpage='news'}
                                </div>
{* End News *}

stehen.

Liegt es vielleicht an der Reihenfolge, in der ich die CSS-Dateien eingebunden habe ? Ich habe mir sogar die Mühe gemacht, den Code aus dem Original-Template weitestgehend in mein Template zu integrieren (alles ging nicht, da ansonsten die Darstellung arg gestört wurde hmm ).

Oder beißt sich die Anweisung

Hier klicken, um den Code zum Kopieren zu markieren

{cms_module module="menumanager"}

mit den restlichen Anweisungen im Code ?

Beitrag geändert von Dancer62 (17. Juli 2014 16:58)

Andynium · 05. August 2014 07:58

Hast du mal einen Link?

Dancer62 · 05. August 2014 16:22

Hier ist der Link auf die Website. Nicht wundern, dass da noch keine Inhalte sind bzw. zweimal 'Home' auftaucht; das dient der Vorbereitung für die spätere "Live"-Schaltung der Website. Auch sind die Unterseiten lediglich die mitgelieferten Beispielseiten - ich habe sie aus Vereinfachungsgründen für mich so belassen (werden in der endgültigen Version natürlich entfernt...).
Wie Du feststellen wirst, funktioniert die Darstellung der Menüs nicht so, wie ich mir das eigentlich vorstelle (siehe Seite "Default Templates Explained" --> "CSSMenu Top + 2 columns").

Falls Du Zugriff auf die Administration benötigst, dann lass' es mich wissen - ich würde Dich dann als Nutzer eintragen und Dir (ausnahmsweise !!!) die Daten per eMail zuschicken.

Klenkes · 05. August 2014 20:26

Ich kenne mich mit den Standardtemplates und Standard-CSS von CMSMS nicht so aus, aber für mich sieht es aus als ob du das vertikale Menü nimmst. Also Navigation in 1 Spalte links - denn du hast ein DIV #menu_vert
Uns so klappt es auch auf! Nach rechts!

Schau noch mal, dass du die richtige Menütemplate mit dem richtigen CSS verwendest.

Klenkes · 06. August 2014 07:41

mhh... bei einem zweiten Blick sehe ich, dass es im Standardtemplate auch #menu_vert ist.

Auf deiner Unterseite funktioniert es.
Es muss also von den anderen Sachen der Startseite kommen.

Dancer62 · 06. August 2014 07:44

Genau : das Problem daran ist, dass die Seite "CSSMenu top + 2 columns" den Seiten-Alias "cssmenu_horizontal" trägt und mit dem Stylesheet "Navigation: CSSMenu - Horizontal" verknüpft ist. Und in genau diesem ist der Selektor "# menu_vert", der vom Template "CSSMenu top + 2 columns" aufgerufen wird, auch definiert. Ich vermute, dass ich beide Arten von Navigation benötige - zuerst zum Aufklappen nach unten und danach (auf der nächsten Ebene) nach rechts.

Und genau das war ja auch der ursprüngliche Grund für das Öffnen dieses Threads..., denn ich weiß nicht ob sich der Begriff "vertikales Menü" auf die Anordnung der ersten Ebene bezieht (alle Menüpunkte untereinander) oder auf das Verhalten beim Hovern mit der Maus über einem Menüpunkt (Aufklappen der Untermenüpunkte nach unten).

Hinzu kommt, dass ich befürchte, dass einige Deklarationen in den Stylesheets doppelt vorkommen und sich damit gegenseitig überschreiben - nur weiß ich zum Einen nicht, welche das sind (und wie ich das herausfinden kann) und zum Anderen, welche davon ich stehen lassen kann bzw. welche ich löschen muss (um die korrekte Reihenfolge und damit den gewünschten Erfolg zu erzielen). Ich habe z.B. auch das Stylesheet "Layout: Top menu + 2 columns" noch nicht verknüpft (obwohl es vom Template "CSSMenu top + 2 columns" benötigt wird), da es mir mein bisheriges Layout "zerschießt"

Beitrag geändert von Dancer62 (06. August 2014 07:47)

Klenkes · 06. August 2014 08:06

Das Problem liegt in dieser CSS Deklaration:

Hier klicken, um den Code zum Kopieren zu markieren

header nav ul li a {
 text-decoration:none;
 color:#fff;
 float:left; /* Das muss weg */
 padding:30px 10px 28px 10px;
}

Das float:left; muss raus.

Auf deinen Unterseiten konnte ich es nicht finden, deshalb glaube ich, dass es von dir kommen muss.
Suche mal danach und kommentiere es so aus: /* float:left; */

Dancer62 · 06. August 2014 08:32

GENIAL - es funktioniert lol . Danke Dir Klenkes, jetzt kann ich endlich produktiv weiterarbeiten (zumindest bis zum nächsten Problem... wink ).

Forum für CMS/made simple

#1 03. Juli 2014 12:10

[GELÖST] "Vertikales Menü" vertikal oder horizontal ?

#2 03. Juli 2014 21:53

Re: [GELÖST] "Vertikales Menü" vertikal oder horizontal ?

#3 16. Juli 2014 19:47

Re: [GELÖST] "Vertikales Menü" vertikal oder horizontal ?

#4 05. August 2014 07:58

Re: [GELÖST] "Vertikales Menü" vertikal oder horizontal ?

#5 05. August 2014 16:22

Re: [GELÖST] "Vertikales Menü" vertikal oder horizontal ?

#6 05. August 2014 20:26

Re: [GELÖST] "Vertikales Menü" vertikal oder horizontal ?

#7 06. August 2014 07:41

Re: [GELÖST] "Vertikales Menü" vertikal oder horizontal ?

#8 06. August 2014 07:44

Re: [GELÖST] "Vertikales Menü" vertikal oder horizontal ?

#9 06. August 2014 08:06

Re: [GELÖST] "Vertikales Menü" vertikal oder horizontal ?

#10 06. August 2014 08:32

Re: [GELÖST] "Vertikales Menü" vertikal oder horizontal ?

Fußzeile des Forums