[GELÖST] Menü

brandy · 27. Februar 2012 13:46

Hallo!

Hab hier Link.. eine Lösung gefunden, wie ich mein Menü darstellen möchte.
Ich hab mir mal die Dateien geholt - die sdmenu.js in den lib-Ordner gelegt, im Template mit <script type="text/javascript" src="lib/sdmenu.js"> eingebunden, sowie das andere Script eingebaut...
Dann hab ich noch ein Menütemplate wie erklärt gemacht und meinen Menücontainer "my_menu" getauft.
Was wäre da noch zu machen, dass das Ding wirklich rennt - muss ich das Menütemplate mit divs und spans aufbauen, damit er weiß, was er damit zu tun hat?

Vielen Dank!

Beitrag geändert von brandy (05. April 2012 10:21)

NaN · 27. Februar 2012 14:12

Wieso packst Du irgendwelche Javascripts in einen Systemordner?
Wo steht, dass Du das so machen sollst?

Was wäre da noch zu machen, dass das Ding wirklich rennt

Was genau wäre noch zu machen, damit Ihr Eure Fragen endlich mal von Anfang an so stellt, dass man sie auch beantworten kann?

Was genau funktioniert denn nicht? Bzw. wie sieht Dein Ergebnis aus?

Was hatte Dir denn an dieser Anleitung nicht gefallen?
http://forum.cmsmadesimple.org/viewtopic.php?t=36152
Die lässt sich mit einem der Standard Menü-Templates und wenigen Handgriffen umsetzen.

brandy · 27. Februar 2012 15:00

Danke - die Anleitung ist ja sehr gut...
Aber wie wende ich das auf mein Template an?

Hier klicken, um den Code zum Kopieren zu markieren

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
<script src="uploads/js/jquery.js" type="text/javascript"></script>
<script src="uploads/js/navigation.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div class="container_left">
<!-- start menu -->
<div id="menu">
  {menu}
</div>
<!-- end menu -->
</div>
<div class="container">
<!--<div id="header">
  <h1>{sitename}</h1>
</div>-->

<!-- start content -->
<div id="content">
  {content}
</div>
<!-- end content -->
</div>
<div class="container_bottom">
<div class="bottom_wrapper">
<div class="bcontent_1">
</div>
<div class="bcontent_2">
</div>
<div class="bcontent_3">
</div>
</div>
<img src="/_zimmermann/uploads/images/schatten_unten.jpg">
</div>
</div>
</body>
</html>

Mein Menütemplate sieht ja auch anders aus:

Hier klicken, um den Code zum Kopieren zu markieren

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{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}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" 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="{$node->alias}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="{$node->alias}"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="{$node->alias}"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

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

{else}
<li class="{$node->alias}"><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

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

So sieht die Seite aktuell aus - sie befindet sich aber noch im Aufbau...
Link...

Beitrag geändert von brandy (27. Februar 2012 15:02)

Klenkes · 27. Februar 2012 15:16

Da ich NaNs leichte Reizung gut nachvollziehen kann, versuch ich auch mal etwas zu helfen. Ich mach' dir mal einen Vorschlag.
Schau die mal dieses Menü an, und ob es das ist, was du willst, und ich zeig dir, wie du es einbaust.

brandy · 27. Februar 2012 15:25

Ja genau, so etwas stell ich mir vor...

NaN · 27. Februar 2012 15:34

Aber wie wende ich das auf mein Template an?

Im Prinzip fehlt doch nur noch das CSS.
Und dann musst Du entweder die ID Deines Menüs in '#menu_vert' ändern, oder im Javascript '#menu_vert' in '#menu' ändern.

Klenkes · 27. Februar 2012 15:38

Also gut, dann los...

Schritt 1:
Lade hier das Javascript herunter, entpacke es und speichere es in z.B. /js/

Schritt 2:
Speichere diesen Code als neue Menütemplate in /modules/MenuManager/templates/

Hier klicken, um den Code zum Kopieren zu markieren

{if $count > 0}
<ul id="accordion-1">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li>\n</ul>\n" times=$node->prevdepth-$node->depth}</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->children_exist == true && $node->parent == true}
<li class="activeparent" ><a class="activeparent" href="{$node->url}">{$node->menutext} &#187;</a><!-- parent current -->
{elseif $node->children_exist == true}
<li><a href="{$node->url}">{$node->menutext} &#187;</a>
{elseif $node->current == true}
<li><a href="{$node->url}" class="currentpage">{$node->menutext}</a><!-- current -->
{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"><a href="{$node->url}" class="activeparent">{$node->menutext}</a><!-- parent current -->
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a href="{$node->url}">{$node->menutext} </a>{/if}{/foreach}{repeat string="</li>\n</ul>\n" times=$node->depth-1}</li>
</ul>
{/if}

Schritt 3:
Füge dies in den HEAD deiner Seitenpemplate ein:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   
<script type="text/javascript" src="/js/jquery.dcjqaccordion-min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie-min.js"></script>

Schritt 3a:
Aufruf des Menüs:

Hier klicken, um den Code zum Kopieren zu markieren

{menu template="wie_du_es_genannt_hast.tpl"}

... und das vor den schliessenden BODY:

Hier klicken, um den Code zum Kopieren zu markieren

{literal}
<script type="text/javascript">
$(document).ready(function () {
  
$('#accordion-1').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: true,
disableLink: true,
showCount: false,
speed: 'fast'
});

});
</script>
{/literal}

Schritt 4:
CSS für das Menü:

Hier klicken, um den Code zum Kopieren zu markieren

#accordion-1{margin-bottom:15px;width:100%;font-size:0.8em;}
#accordion-1 a{text-decoration:none;cursor:pointer;}
#accordion-1 li{list-style-type:none;}
#accordion-1 ul{width:100%;margin:0 0 8px 0;padding:0;}
#accordion-1 ul ul{width:100%;}
#accordion-1 li{width:100%;}
#accordion-1 li a{padding:4px 0 3px 0;display:block;color:#777;}
#accordion-1 a{text-indent:15px;}
#accordion-1 ul a{text-indent:30px;}
#accordion-1 ul ul a{text-indent:40px;}
#accordion-1 a{border-bottom:1px solid #CCC;}
#accordion-1 ul a{}
#accordion-1 ul ul a{}
#accordion-1 a:active, #accordion-1 a:focus{color:#333;font-weight:bold;}
#accordion-1 a:hover{color:#76B13A;}
#accordion-1 a span{font-weight:bold;}
dfn{display:none;}
#accordion-1 a.activeparent, #accordion-1 a.currentpage{font-weight:bold;color:#61971E;}
#accordion-1 a.activeparent{border-bottom:1px dashed #61971E;}
#accordion-1 li.activeparent ul a{border-bottom:1px dashed #61971E;}
#accordion-1 li.activeparent a.currentpage{font-weight:bold;color:#61971E;}

Achtung:
Pfade und CSS musst du natürlich noch an deine Bedürfnisse anpassen.
Aber die Technik sollte so funktionieren.

NaN · 27. Februar 2012 15:58

Auch nicht schlecht.

Schritt 2:
Speichere diesen Code als neue Menütemplate in /modules/MenuManager/templates/

Hier würde ich aber eher /module_custom/MenuManager/templates/[templatename].tpl oder ein Datenbank-Template verwenden. (Layout->MenuManager->Neues Template erstellen - Name ohne .tpl am Ende)

Klenkes · 27. Februar 2012 16:05

NaN schrieb:

Auch nicht schlecht.
Hier würde ich aber eher /module_custom/MenuManager/templates/[templatename].tpl oder ein Datenbank-Template verwenden. (Layout->MenuManager->Neues Template erstellen - Name ohne .tpl am Ende)

Vollkommen richtig.
Da ich am Liebsten und Besten mit meinem Lieblingseditor arbeite, speichere ich meine Menütemplates als Dateien ab, und gebe ihnen einen Kundenpräfix. So überschreibe ich beim Update nicht.

Was wäre denn performanter? DB oder TPL?

NaN · 27. Februar 2012 16:12

Datei-Templates sollten performanter sein.

brandy · 28. Februar 2012 13:45

@Klenkes:
Vielen Dank für deine Schritt für Schritt-Anleitung. Habs jetzt lt. deinen Vorgaben abgearbeitet. Menü steht jetzt gut da, bewegt sich aber nicht...

NaN · 28. Februar 2012 14:48

roll
Blind Copy & Paste hat ja bekanntlich schon immer geholfen.
Aber in diesem Fall sollte man es auch wirklich 1:1 so machen, wie beschrieben.

Klenkes schrieb:

Schritt 1:
Lade hier das Javascript herunter, entpacke es und speichere es in z.B. /js/

Klenkes schrieb:

Schritt 3:
Füge dies in den HEAD deiner Seitenpemplate ein:
[...]
<script type="text/javascript" src="/js/jquery.dcjqaccordion-min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie-min.js"></script>

Dein HEAD Bereich:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="/uploads/js/jquery.dcjqaccordion-min.js"></script>
<script type="text/javascript" src="/uploads/js/jquery.cookie-min.js"></script>

(Sorry, wenn ich hier etwas genervt wirke, aber den Fehler zu finden hat keine 3 Sekunden gedauert. Und Firebug wurde ja nun schon ... ich weiß nicht mehr genau wie oft, aber oft genug erwähnt wink )

brandy · 28. Februar 2012 15:22

So jetzt gehts - vielen Dank euch beiden. Hab nicht gewusst, dass ich diesen Pfad nicht ändern darf - schätze wird nochwo eine Abhängigkeit gewesen sein.

Ich kann sehr gut verstehen, dass du genervt bist, wenn ständig die gleichen Fragen und Probleme kommen, und diesmal hab ich mich auch auf das Niveu von "Hab das eingebaut und es geht nicht..." heruntergelassen - tut mir auch leid...
Werd in meinen zukünftigen Posts drauf achten!

Vielen Dank nochmal...

NaN · 28. Februar 2012 16:14

Du darfst den Pfad schon ändern, aber du musst eben darauf achten, dass Ort auf dem Server und Pfad im Template übereinstimmen.

Klenkes · 28. Februar 2012 17:14

Sieht aus als würdest du auf der Startseite jquery 2x laden.
1x im HEAD und 1x durch Simpleslider. Deshalb ist das Menü vermutlich auch aufgeklappt.

Einen Aufruf davon würde ich raus nehmen.

brandy · 05. März 2012 09:23

Interessant:

Entferne ich die Zeile:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

ist das komplette Menü immer aufgeklappt.

Entferne ich jedoch diese Zeile:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="js/jquery.cookie-min.js"></script>

ist es beim Aufruf der index.php aufgeklappt, jedoch bei Klick auf einen Unterpunkt klappt es zusammen.

Welches sollte ich jetzt entfernen, so dass es immer eingefahren ist?
Vielen Dank!

Klenkes · 05. März 2012 10:38

Es ist das jquery aus diesem Bereich:

Hier klicken, um den Code zum Kopieren zu markieren

<!-- Wenn's geht, dieses hier weg: -->
<script src="lib/jquery.js" type="text/javascript"></script>

<!-- Das bleibt: -->
<script src="lib/s3Slider.js" type="text/javascript"></script> 
<script type="text/javascript">
	$(document).ready(function() {
	   $('#simpleslider').s3Slider({
	      timeOut: 2000	   });
	});
</script>

Das es diesen Slider auf den anderen Seiten nicht gibt, funktionert dort auch das Menü.

brandy · 05. März 2012 11:12

Ok jetzt hab ichs gecheckt - ich hab das falsche angeschaut!

Was mach ich mit dem:

Hier klicken, um den Code zum Kopieren zu markieren

$('#accordion-1').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: true,
disableLink: true,
showCount: false,
speed: 'fast'
});

NaN · 05. März 2012 12:11

Das gehört zum Menü und könnte eigentlich auch direkt ins Menü-Template (am Besten nach unten).

brandy · 05. März 2012 13:09

So, habs jetzt einfach gelöst:
Da ich den Slider eh über das Gallerymodul laufen lassen möchte, hab ich ihn einfach rausgeschmissen...

Vielen Dank!

brandy · 13. März 2012 16:04

Wieso ist das Menü auf der Startseite ausgeklappt und erst auf Klick auf einen Menüpunkt klappt es zusammen?
Hat es was mit dem Aufruf des Javascripts zu tun?

Klenkes · 13. März 2012 16:25

brandy schrieb:

Wieso ist das Menü auf der Startseite ausgeklappt und erst auf Klick auf einen Menüpunkt klappt es zusammen?
Hat es was mit dem Aufruf des Javascripts zu tun?

Im HEAD wird dies eingefügt:

Hier klicken, um den Code zum Kopieren zu markieren

<!-- Gallery/Slider -->
<link rel="stylesheet" href="modules/Gallery/templates/css/Slider.css" type="text/css" media="screen" />
</style>
<script src="lib/jquery.js" type="text/javascript"></script>
...

...und jquery nochmal geladen, nachdem weiter oben im HEAD das Goopleapi-Jquery geladen wurde.

Kannst du nur auf der Startseite den Googleapi Aufruf rausschmeissen?

brandy · 13. März 2012 21:03

Naja ich könnte es aus dem Template schmeißen bzw. ein eigenes Template machen, wo ich die Zeile rausschmeiß. Dieses würde ich dann der Startseite zuweisen...
Wäre ja eine Lösung, oder?

Klenkes · 14. März 2012 23:00

Oder du notierst im Template

Hier klicken, um den Code zum Kopieren zu markieren

{if $page_alias ne "startseite"}<script src="http://google...."></script>{/if}

Wobei startseite dein $page_alias der Startseite sein sollte.
Erscheint dann überall, außer auf der Startseite.

brandy · 14. März 2012 09:32

An sowas hab ich auch gedacht, hab aber nicht gewusst wie ich das zusammenbau...

Jetzt hab ich den Code schon mal eingebaut, wird auch überall, ausgenommen der Startseite, angezeigt...
Aber aufgeklappt ist es zu beginn immer noch...

Forum für CMS/made simple

#1 27. Februar 2012 13:46

[GELÖST] Menü

#2 27. Februar 2012 14:12

Re: [GELÖST] Menü

#3 27. Februar 2012 15:00

Re: [GELÖST] Menü

#4 27. Februar 2012 15:16

Re: [GELÖST] Menü

#5 27. Februar 2012 15:25

Re: [GELÖST] Menü

#6 27. Februar 2012 15:34

Re: [GELÖST] Menü

#7 27. Februar 2012 15:38

Re: [GELÖST] Menü

#8 27. Februar 2012 15:58

Re: [GELÖST] Menü

#9 27. Februar 2012 16:05

Re: [GELÖST] Menü

#10 27. Februar 2012 16:12

Re: [GELÖST] Menü

#11 28. Februar 2012 13:45

Re: [GELÖST] Menü

#12 28. Februar 2012 14:48

Re: [GELÖST] Menü

#13 28. Februar 2012 15:22

Re: [GELÖST] Menü

#14 28. Februar 2012 16:14

Re: [GELÖST] Menü

#15 28. Februar 2012 17:14

Re: [GELÖST] Menü

#16 05. März 2012 09:23

Re: [GELÖST] Menü

#17 05. März 2012 10:38

Re: [GELÖST] Menü

#18 05. März 2012 11:12

Re: [GELÖST] Menü

#19 05. März 2012 12:11

Re: [GELÖST] Menü

#20 05. März 2012 13:09

Re: [GELÖST] Menü

#21 13. März 2012 16:04

Re: [GELÖST] Menü

#22 13. März 2012 16:25

Re: [GELÖST] Menü

#23 13. März 2012 21:03

Re: [GELÖST] Menü

#24 14. März 2012 23:00

Re: [GELÖST] Menü

#25 14. März 2012 09:32

Re: [GELÖST] Menü

Fußzeile des Forums