Forum für CMS/made simple

plank0o.

Gast

[GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

hallo,

hat jemand einen tip bzw. anleitung, wie man die hauptnavigationspunkte in einem (vertikalen) menu mit  bildern hinterlegt ?
dabei soll jeder menupunkt ein eigenes "mouseover gif" oder auch ein eigenes jpg erhalten.

die untermenupunkte koennen dann auch wieder als normale schrift erscheinen.

danke!

plank0o.

otter24

kennt CMS/ms

Ort: Hamburg

Registriert: 12. Januar 2011

Beiträge: 339

Re: [GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

meinst Du so ???
ich meine die Navigation links.

---

Ich bin war  kein Klugscheißer, ich weiß wusste es wirklich nicht besser.

plank0o.

Gast

Re: [GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

fast. nur mit unternavigationspunkten drunter, wenn man auf den punkt geht.
die sind bei dir ja an der seite und haengen wahrscheinlich nicht in der navigation, die sich aus dem seitenaufbau (seite als untermenupunkt hinzufuegen im adminbereich) ergibt, oder ?

sieht auf den ersten blick so aus als haettest du die unterpunkte als seiten, die unabhaengig von der (haupt) navigation sind angelegt...?
falls nicht koennte man sie ja auch direkt unter den hauptmenupunkten aufklappen lassen?

hmmm...

hmmmm...

otter24

kennt CMS/ms

Ort: Hamburg

Registriert: 12. Januar 2011

Beiträge: 339

Re: [GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

Also der Spaß läuft bei mir ungefähr wie folgt ab.

Das Menü links, nennen wir es einmal Produktmenü wird separat von den gelben Untermenüpunkten aufgerufen. Es erfolgen also 2 Menüaufrufe im Template.

<div id="submenu">
{menu loadprops='1' template='submenu' start_level='3'  number_of_levels='2' collapse='0'
includeprefix='_sub}
</div>
und weiter unten im Template in der linken Spalte
<div id="produktmenu">
{menu loadprops='1' template='produkte' start_level='2'  number_of_levels='1' collapse='0' includeprefix='_produkte'}
</div>

Der Rest ist CSS. Damit ich die einzelnen Menüpunkte per CSS stylen kann muss ich sie natürlich noch Individualisieren
damit Photovoltaik ein anders Hintergrundbild bekommt als Windenergie... Also füge im Menütemplate "produkte" eine class bestehend aus dem Seitenalias dazu. Das sieht denn im Menütemplate  so <a href="{$node->url}"class="{$node->alias}".......  aus.

Dann weiß Du also wie der Menüpunkt "heißt" und kann per CSS das Hintergrundbild zuweisen. Das geht sicher auch für Unterpunkte.

Das CSS sieht dann so aus:

#produktmenu li a.Solaranlagen_produkte {background: url(../../uploads/images/layout/navigation/navi_solar_normal.png) no-repeat transparent;}

Ich weiß nicht ob es auch noch "elegantere" bzw. einfachere Möglichkeiten gibt, aber dies ist zunächst mal ein Weg.

Gruß aus HH.

---

Ich bin war  kein Klugscheißer, ich weiß wusste es wirklich nicht besser.

plank0o.

Gast

Re: [GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

ok liest sich gut. ich versuchs mal ! d a n k e und gruss aus muc.

plank0o.

Gast

Re: [GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

so. hier mal ein template fuer den menumanager mit dem sowohl die haupt- als auch unternavigation ueber css mit bildern hinterlegt werden kann (aufruf ueber {$node->alias}).
im css entspricht der name der class dem namen des seitenalias bein anlegen einer seite. zum copypasten:

 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></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=''}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:''}
  {/if}
  <li><a class="{$node->alias}" 
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="{$classes}"><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a class="{$node->alias}"><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="{$node->alias}" 
{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}" class="{$node->alias}">{$node->menutext}</a>

{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

gruss, plank0o.

Sarahsahni

Gast

Re: [GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

Hallo zusammen,

ich möchte meine "alte" Homepage, die rein auf HTML gebastelt ist mit CMSMadeSimple in ein "neues" Kleid verpacken. Das Layout will ich aber behalten (Wiedererkennungswert etc.).

Ich würde auch gerne bebilderte Menü-Unterpunkte bzw. bebilderte Links setzen. Aber leider bin ich mit den Templates und MenuManager etc. ein wenig überfordert. Vielleicht würdet Ihr mir helfen.

Könntet Ihr mir mal ein konkretes Beispiel basteln, damit ich weiß, was ich wann wie wo einbauen muss?

Vielen Dank schon mal vorab.

Liebe Grüße,
Anette

www.sarahsahni.de

NaN

Moderator

Ort: Halle (Saale)

Registriert: 09. November 2010

Beiträge: 4.437

Re: [GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

Hallo und willkommen im Forum.

Was genau willst Du denn haben?
Der Pfeil zeigt auf "Kuvasz Sarah".
Und nun?
Versuch mal etwa genauer zu erklären wie es am Ende aussehen soll bzw. womit Du Probleme hast.
Dann können wir Dir auch konkretere Antworten geben.

---

Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Sarahsahni

Gast

Re: [GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

Hallo,

ich möchte diese drei Menütasten (mit den 3 Bildern) weiterverwenden und sie so in die neue Navigationsleiste integrieren. Alle übrigen Seiten werden über die Textmenüs angesteuert.

Es ist gar nicht so einfach zu beschreiben, was man möchte. Sorry.

Zur Zeit bastele ich noch am Layout herum und es sieht momentan so aus:

Diese drei Bildtasten können gerne ganz oben im Menu oberhalb von "START" angesiedelt werden.

Aber ich verstehe nicht so viel von dieser Programmiererei, so dass ich lieber Euch frage, als mich in tagelangen Probierstudien zu verzetteln.

Dankeschön.

Liebe Grüße,
Anette

PS: Hier habe ich meine CMS-Bastelstube eingerichtet, falls Ihr mal schauen wollt:

http://dog.sarahsahni.de/cms

Beitrag geändert von Sarahsahni (30. Juli 2011 22:37)

Willi W.

hat von CMS/ms gehört

Ort: Glashütte

Registriert: 05. März 2011

Beiträge: 10

Re: [GELÖST] hauptnavigationspunkte in einem (vertikalen) menu mit bildern

Nach meinem bescheidenen Wissen zum CMS müsstest du ein zweites Menü im Template anlegen, wenn du die drei Punkte oberhalb von Start haben willst. Im CSS dieses Menüs legst du dann die jeweiligen Bilder als Hintergrund des Listenpunkts an.