Forum für CMS/made simple

Sommerwolke

Gast

[GELÖST] Senkrechte Striche (|) im Menütemplate einfügen

Hallo liebe CMS-Gemeinde,

ich nutze schon viele Jahre CMS MS, setze mir auch eigene Templates zusammen und komme damit auch ganz gut zurecht (bin weder professionell dabei noch sonst was, just for fun). Jetzt gestalte ich für einen Bekannten ein Template nach seinem Wunsch und komme erstmalig total an die Grenze meines Könnens und hoffe, ihr könnt mir helfen.

Ich habe ein horizontales Aufklappmenü mit CSS, das funktioniert auch wunderbar. Was mir Kopfschmerzen bereitet, ist die Frage, wie ich zwischen die obersten Menüpunkte (also die Links, wo man zum Aufklappen drüberfährt) senkrechte Striche bekomme. Natürlich soll hinter dem letzten Menüpunkt kein senkrechter Strich stehen. Ist so gewünscht.

Beispiel:
Startseite | Link 1 | Link 2 | Link 3 | Letzter Link

Meine Frage ist nun: Wo setze ich den senkrechten Strich hin, damit er wie gewünscht eingefügt wird? Ich hab schon jede Stelle ausprobiert und komme einfach nicht weiter.

Mein Menütemplate sieht so aus:

 Hier klicken, um den Code zum Kopieren zu markieren

[== html ==]
{* 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></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}
  <li class="{$classes}"><a class="{$classes}"
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent"><span class="sectionheader">{$node->menutext}<span style="margin-left:7px;">|</span></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') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a> 
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

Zur Info: CMS MS 1.9.4.1, PHP 5.2, MYSQL 5.1.49

Ich freue mich riesig über Hilfe!

Mit freundlichem Gruß,
Sommerwolke*

antibart

Server-Pate

Registriert: 14. Dezember 2010

Beiträge: 880

Re: [GELÖST] Senkrechte Striche (|) im Menütemplate einfügen

zB über css-border:

#menu ul {
padding: 0;
margin: 0;
overflow: hidden;
}

#menu li {
border-left: 1px solid #000;
margin-left: -1px;
}

die -1px und overflow: hidden ist nötig, damit am Anfang des Menüs der Strich verschwindet.

Beitrag geändert von antibart (26. Oktober 2011 16:00)

jeff1980

Server-Pate

Ort: Dortmund

Registriert: 26. November 2010

Beiträge: 630

Re: [GELÖST] Senkrechte Striche (|) im Menütemplate einfügen

Hi,

es gibt da auch einen Trick mit lastitem (den kannst Du z.B. im original Template sehen - dort wird er für das Dropdown-Menü genutzt). Du könntest dann z.B. immer einen border-right zuweisen und dem lastitem eben nicht.

Ich helfe mir allerdings immer so, dass ich zusätzliche "Seiten" einfüge - allerdings nicht mit "Inhalt" sondern als "Trenner" bzw. "Separator". Diese lassen sich dann im Menütemplate gezielt ansprechen:

 Hier klicken, um den Code zum Kopieren zu markieren

[== smarty ==]
{elseif $node->type == 'separator'}   <li style="list-style-type: none;"> <hr class="menu_separator" />

steht z.B. bei Dir drin. Den <hr ... /> kannst Du z.B. einfach durch | (alt-gr-Taste und </>-Taste) ersetzten. Dann noch eine Klasse zuweisen und dieser den Abstand nach links/rechts zuweisen:

 Hier klicken, um den Code zum Kopieren zu markieren

[== smarty ==]
{elseif $node->type == 'separator'}   <li class="separator">|

[== css ==]
.separator {
padding: 0px 10px;
}

Damit bin ich bisher immer super gefahren - vor allem kann man so im sehr einfach alles zwischen den Menüpunkten einfügen, was man möchte, u.a. auch Grafiken.

Beitrag geändert von jeff1980 (28. Oktober 2011 07:16)

Andynium

Moderator

Ort: Dohna / SN / Deutschland

Registriert: 13. September 2010

Beiträge: 7.018

Webseite

Re: [GELÖST] Senkrechte Striche (|) im Menütemplate einfügen

Gelöst?

Zur Info: CMS MS 1.9.4.1

Du solltest aufgrund von Sicherheitslücken schnellstmöglich auf die 1.9.4.3 aktualisieren  .

---

1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms

Sommerwolke

Gast

Re: [GELÖST] Senkrechte Striche (|) im Menütemplate einfügen

Hallo zusammen,
danke für die Infos. Da das Forum Ende der Woche nicht erreichbar war und mein WE internetfrei (soll es noch geben), kann ich erst jetzt antworten.

Ich habe mir jetzt ganz anders beholfen. Da ich nicht mit dem border-Tag arbeiten konnte, weil ich ein gewisses Maß an padding oben und unten brauche, border damit ja aber immer länger als die Schrift wird, fiel das raus. Mit overflow:hidden war mir auch nicht geholfen, da der Strich immer wieder auftauchte, wenn man das Gesamtlayout verkleinerte.
Ich habe jetzt ein Hintergrundbild ohne repeat an gezielter Stelle positioniert. Beim ersten Link in der Reihe soll und ist natürlich kein Hintergrundbild. Warum nicht, ist mir leider auch nicht ganz klar. Ich glaube, es liegt daran, dass der erste Link (zur Indexseite) kein "Kinder" (children) hat, die ausgeklappt werden.

Den lastitem-Trick probiere ich dann bei Gelegenheit aber auch mal aus.

Danke auch für den Hinweis mit der Aktualisierung.

Mit freundlichem Gruß
Sommerwolke*