Bräuchte bitte mal Hilfe bei meinem Menü. :)

Trabant500 · 18. April 2012 15:49

Hallo liebe Community.

Ich habe mir ein Template erstellt und an CMSMS angepasst. Das funktioniert alles auch wunderbar, aber mit dem Menü hab ich ein paar Probleme.

Und zwar möchte ich ein horizontales Dropdown-Menü erstellen, welches beim 'Hovern' eines Menüpunktes das Untermenü anzeigt. Soweit ist das eigentlich auch absolut kein Problem, aber das ist ja leider noch nicht alles.
Das Untermenü soll aus 3 Grafiken bestehen. Eine Grafik oben, welches einfach nur ein Bild mit abgerundeten Ecken darstellt, dann darunter die eigentlichen Menüpunkte mit einer kachelbaren Hintergrundgrafik und unten dran dann die dritte Grafik wieder mit abgerundeten Ecken.

Vom Prinzip her bin ich recht firm was Html und CSS angeht, aber dabei seh ich gerade den Wald vor lauter Bäumen nicht.
Ich habe erst versucht eins der mitgelieferten Menüs anzupassen, aber das hat irgendwie nicht richtig hingehauen. Wobei ich diese Vorlage sehr unübersichtlich fand und deswegen nicht wirklich durchgesehen habe. Ich habe auch schon probiert das Menü komplett neu zu erstellen, aber da weiß ich nicht so richtig wie ich es anpassen muss, damit es in CMSMS auch richtig funktioniert. Das liegt wohl daran, daß ich noch nicht so richtig kapiert habe wie CMSMS arbeitet und da ich da jetzt schon seit einigen Tagen rumbastle hab ich mittlerweile irgendwie eine Denkblockade.

Die zweite Frage wäre, wie ich einige der Menüpunkte 'auslagern' kann, da das eigentliche Menü unter dem Header dargestellt werden soll, aber solche Punkte wie Kontakt, Impressum etc. oberhalb des Headers.

Weiß jemand wie ich das umsetzen könnte und kann mir jemand irgend einen Denkanstoß geben ?

mike-r · 18. April 2012 20:40

Trabant500 schrieb:

Das Untermenü soll aus 3 Grafiken bestehen. Eine Grafik oben, welches einfach nur ein Bild mit abgerundeten Ecken darstellt, dann darunter die eigentlichen Menüpunkte mit einer kachelbaren Hintergrundgrafik und unten dran dann die dritte Grafik wieder mit abgerundeten Ecken.

Kannst Du das mal aufmalen? so richtig kann ich mir da nix drunter vorstellen.
Möglicherweise hilft: http://themes.cmsmadesimple.org/Image_menu.html

Die zweite Frage wäre, wie ich einige der Menüpunkte 'auslagern' kann, da das eigentliche Menü unter dem Header dargestellt werden soll, aber solche Punkte wie Kontakt, Impressum etc. oberhalb des Headers.

Die Punkte findest Du in der Hilfe von {menu}
Excludeprefix und includeprefix werden da wahrscheinlich helfen, es gibt aber noch etliche andere Möglichkeiten, je nachdem wie Deine Struktur und/oder Dein Menü aufgebaut ist.

Beitrag geändert von mike-r (18. April 2012 20:43)

faglork · 18. April 2012 20:49

Trabant500 schrieb:

Und zwar möchte ich ein horizontales Dropdown-Menü erstellen, welches beim 'Hovern' eines Menüpunktes das Untermenü anzeigt. Soweit ist das eigentlich auch absolut kein Problem, aber das ist ja leider noch nicht alles.
Das Untermenü soll aus 3 Grafiken bestehen. Eine Grafik oben, welches einfach nur ein Bild mit abgerundeten Ecken darstellt, dann darunter die eigentlichen Menüpunkte mit einer kachelbaren Hintergrundgrafik und unten dran dann die dritte Grafik wieder mit abgerundeten Ecken.

--> abgerundete Ecken mit border-radius: http://border-radius.com/
--> fallback für IE: http://www.html.it/articoli/niftycube/index.html

Voila ...

Servus,
Alex

Trabant500 · 18. April 2012 21:20

Vielen Dank für die Antwort.
Ich kann natürlich ein Bild hochladen, aber ich glaube das brauch ich gar nicht. Schau Dir mal das obere Menü auf der von Dir verlinkten Seite an. Wenn Du da mit der Maus zum Beispiel über den Menüpunkt 'Home' fährst, dann klappt sich das Untermenü aus. Zum Verständnis: Mir gehts auch nur um das Untermenü, die Hauptmenüpunkte sind kein Problem.

Wenn Du Dir nun besagtes Untermenü anschaust, dann siehst Du das es erst die Menüpunkte darstellt und unten noch ein Stückchen dran ist, was das Menü mit abgerundeten Ecken abschliest.

Im Prinzip möchte ich auch so ein Menü machen, aber das über dem ersten Untermenüpunkt auch solche abgerundeten Ecken sind. Ich möchte sozusagen daß das Untermenü aussieht wie ein Rechteck mit abgerundeten Ecken.

@faglork
Ich kenne 'border-radius' und weiß das man damit abgerundete Ecken machen kann. Aber ich möchte das mit Hintergrundgrafiken machen, weil ich das für flexibler halte.

mike-r · 19. April 2012 23:20

Ah, verstehe.

Um das flüssig und Breitenunabhängig zu machen musst Du das mit Divs lösen:
http://www.andreas-kalt.de/webdesign/tu … unde-ecken
(mindestens ein Div kann man sich dabei sparen, indem man stattdessen das ul (und das erste LI) formatiert.)

wenn Du sicherstellen kannst, dass das Menü immer eine bestimmte Breite hat (doofes Konzept) kannst Du es auch direkt formatieren:
li:first-child BG oben
li BG links
li span (oder li a, je nach Menüart) BG rechts
ul: BG unten

Beitrag geändert von mike-r (19. April 2012 23:28)

Trabant500 · 19. April 2012 23:30

Über Divs habe ich auch schon nachgedacht, aber ich versteh nicht richtig wie ich dazu das Menü-Template anpassen muss !?

Momentan sieht meins so aus:

Hier klicken, um den Code zum Kopieren zu markieren

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
  {repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
  {repeat string='</li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>' times=$node->prevdepth-$node->depth}
  </li>
  {elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  {if $node->type == 'sectionheader'}
    <li class="{$classes}"><a class="{$classes}"><span class="sectionheader">{$node->menutext}</span></a>
  {else}
    <li class="{$classes}"><a class="{$classes}"
  {/if}
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent" 
{else}
  <li>
  <a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

Beitrag geändert von Trabant500 (19. April 2012 23:32)

Trabant500 · 26. April 2012 19:44

Ich habe jetzt schon alles Mögliche ausprobiert, aber ich habs leider immernoch nicht hinbekommen. cry

Zuerst hatte ich das Menü welches ich haben möchte 'offline' erstellt. Also rein mit Html und CSS. Hier mal ein Pseudogerüst des Offlinemenüs:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="menu_wrap>
    <div id="navi">
        <ul>
          <li><a href="#">Menüpunkt 1</a>
            <ul>
              <div id="menu_dropdown_top"></div>
                <div id="menu_dropdown_middle">
                    <div id="inhalt">
                      <li><a href="#">Menüpunkt 1.1</a></li>
                      <li><a href="#">Menüpunkt 1.2</a></li>
                      <li><a href="#">Menüpunkt 1.3</a></li>
                    </div>
                </div>
              <div id="menu_dropdown_bottom"></div>
              <div id="clearing"></div>
            </ul>
          </li>
        </ul>
    </div>
</div>

Das funktioniert auch ohne Probleme und genau so wie es soll. Allerdings weiß ich nicht wie ich das in ein Menütemplate einpassen soll.

Wenn ich die Struktur des Menütemplates richtig verstanden habe, dann wird eine Foreach-Schleife ausgeführt, die alle Einträge in der Menütabelle ausliest. Innerhalb dieser Schleife wird dann abgefragt zu welchem Type der aktuell abgefragte Menüpunkt gehört. Und genau da seh ich nicht durch.

Hier noch mal ein Pseudogerüst wie es, meiner Meinung nach, funktionieren sollte:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="menu_wrap>
    <div id="navi">
        <ul>
            {foreach} --> Alle obersten Menüpunkte
              <li><a href="#">{Aktueller Menüpunkt (Parent)}</a>
                <ul>
                  <div id="menu_dropdown_top"></div>
                    <div id="menu_dropdown_middle">
                        <div id="inhalt">
                            {foreach} --> Alle Untermenüpunkte des aktuellen Parents
	                      <li><a href="#">{Aktueller Menüpunkt (Child)</a></li>
                            {/foreach}
                        </div>
                    </div>
                  <div id="menu_dropdown_bottom"></div>
                  <div id="clearing"></div>
                </ul>
              </li>
            {/foreach}
        </ul>
    </div>
</div>

Aber kann mir jemand sagen wie ich das umsetzen kann ?

Beitrag geändert von Trabant500 (26. April 2012 19:44)

antibart · 27. April 2012 07:36

Ich habe leider noch nicht genau verstanden, wo es hakt. Verzeih mir also, wenn ich das falsche Thema anspreche.

Im Menütemplate musst du nicht unbedingt was ändern.

Wenn die abgerundeten Menüpunkte keine weiteren Hintergundbilder benötigen, würde ich es so versuchen:

Erstmal ne verschachtelte Bulletliste ohne extra div:

#navi li ul li {background: url(img/rundecke-links.gif) no-repeat left;}

#navi li ul li a {background: url(img/rundecke-rechts.gif) no-repeat right;}

Die "Zwischenbilder" vor und nach dem Submenu könntest Du über den Inhaltstyp Sectionheader / Abschnittsüberschrift realisieren.

.sectionheader {background: url(img/hintergrundbild.jpg) no-repeat;}

Obwohl die von mike-r vorgeschlagene Lösung über first/last.child eleganter ist.

Edit: ich seh gerade: die Menüpunkte haben ne Kachel. Dann braucht es noch ne Klasse.

Nicht getestet, aber vielleicht funtioniert es damit:

#navi li ul li a:link {background: url(...);}

oder

#navi li ul li:link {background: url(...);}

Trabant500 schrieb:

Die zweite Frage wäre, wie ich einige der Menüpunkte 'auslagern' kann, da das eigentliche Menü unter dem Header dargestellt werden soll, aber solche Punkte wie Kontakt, Impressum etc. oberhalb des Headers.

Zwei Möglichkeiten:

1. Impressum etc. Einfach statisch als globalen Inhaltsblock und manuell verlinken. In den Seitenoptionen dann "nicht im Menü anzeigen" wählen.

2. Wenn es dynamisch sein muss: auch hier greift Sectionheader. Ich habe so etwas gerade gemacht:

http://www.cmsmadesimple.de/forum/viewtopic.php?id=2090

Beitrag geändert von antibart (27. April 2012 08:07)

Trabant500 · 29. April 2012 05:58

Vielen Dank für die Hilfe. Ich habe das mit dem firstchild/lastchild gar nicht ausprobiert, da ich dachte es sei nur symbolisch gemeint. Ich wusste nicht, daß das tatsächlich eine Class-Eigenschaft sein kann. wink
Jetzt hab ich es allerdings ausprobiert und es hat mich meinem Ziel schon sehr nahe gebracht. Also eigentlich funktioniert es, aber das Gelbe vom Ei ist es trotzdem noch nicht. Schlecht ist zum Beispiel daß das Menü dann eine feste Breite braucht. Das ist eigentlich nicht so schlimm, da eine feste Breite bei meinem Menü völlig ok wäre, aber besser wäre natürlich eine dynamische Breite.

Am allerbesten wäre es, wenn man die einzelnen Ebenen des Menüs direkt auslesen könnte. Zum Beispiel über verschachtelte IF/ENDIF-Anweisungen.
Hier nochmal ein Pseudocode:

Hier klicken, um den Code zum Kopieren zu markieren

<- Erste Ebene ->
VON {Erster Parentmenüeintrag} BIS {Letzter Parentmenüeintrag}
{Zeige aktuellen Parentmenüeintrag}

    WENN ({Aktueller Parentmenüeintrag hat Childs}==WAHR) DANN
	<- Zweite Ebene ->
	VON {Erstes Child vom aktuellen Parent} BIS {Letztes Child vom aktuellen Parent}
        {Zeige aktuelles Child vom aktuellen Parent}

            <- Dritte Ebene ->
            WENN ({Aktuelles Child hat Childs}==WAHR) DANN
            	Etc.
            /WENN
            
        /VON
    /WENN

/VON

Ist sowas in Planung oder sogar schon möglich ?

Andynium · 14. Mai 2012 22:17

Schon möglich wink ... schau mal in die Hilfe des MenüManagers.

Forum für CMS/made simple

#1 18. April 2012 15:49

Bräuchte bitte mal Hilfe bei meinem Menü. :)

#2 18. April 2012 20:40

Re: Bräuchte bitte mal Hilfe bei meinem Menü. :)

#3 18. April 2012 20:49

Re: Bräuchte bitte mal Hilfe bei meinem Menü. :)

#4 18. April 2012 21:20

Re: Bräuchte bitte mal Hilfe bei meinem Menü. :)

#5 19. April 2012 23:20

Re: Bräuchte bitte mal Hilfe bei meinem Menü. :)

#6 19. April 2012 23:30

Re: Bräuchte bitte mal Hilfe bei meinem Menü. :)

#7 26. April 2012 19:44

Re: Bräuchte bitte mal Hilfe bei meinem Menü. :)

#8 27. April 2012 07:36

Re: Bräuchte bitte mal Hilfe bei meinem Menü. :)

#9 29. April 2012 05:58

Re: Bräuchte bitte mal Hilfe bei meinem Menü. :)

#10 14. Mai 2012 22:17

Re: Bräuchte bitte mal Hilfe bei meinem Menü. :)

Fußzeile des Forums