Aufklapp Menu

[sehr-schlecht]

Hallo

ich bin noch recht neu in Contao. Also mein Problem ist, dass ich eine Navigation in diesem Stil machen will:

http://blog.medianotions.de/assets/demos/mootools-nested-accordion_1.2_open/

http://blog.medianotions.de/de/artik...ltes-accordion ist die Anleitung dazu.

Ich habe zunächst das Menu mit Hilfe eines HTML-Code Modules erstellt. Es hat so natürlich funktioniert, aber ich konnte das Menu nicht wie oben in dem Beispiel erkennen lassen, ob der Punkt geöffnet ist oder nicht.

Danach habe ich versucht ein eigenes Navigationstemplate zu erstellen. Das ergebnis ist folgendes:

Kann mir jemand sagen wie ich das ändern kann, damit es funktioniert? Hier sind die Daten:

Navigationstemplate:

<ul class="<?php echo $this->level; ?> accordion_content_<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="accordion_toggler_<?php echo $this->level; ?> active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>" id="open_accordion_entry"><p class="<?php echo $this->level; ?> active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></p><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="accordion_toggler_<?php echo $this->level; ?> <?php echo $item['class']; ?>"<?php endif; ?>><p class="<?php echo $this->level; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a></p><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

functions.js von der Seite (angepasst)

window.addEvent('domready', function() {

   // Anpassung IE6
   if(window.ie6) var heightValue='100%';
   else var heightValue='';

   // Selektoren der Container für Schalter und Inhalt
   var togglerName='li.accordion_toggler_level_';
   var contentName='ul.accordion_content_level_';


   // Selektoren setzen
   var counter=1;   
   var counterx=2;
   var toggler=$$(togglerName+counter);
   var content=$$(contentName+counterx);

   while(toggler.length>0)
   {
      // Accordion anwenden
      new Accordion(toggler, content, {
         opacity: false,
         display: -1,
         alwaysHide: true,
         onComplete: function() { 
            var element=$(this.elements[this.previous]);
            if(element && element.offsetHeight>0) element.setStyle('height', heightValue);         
         },
         onActive: function(toggler, content) {
            toggler.addClass('open');
         },
         onBackground: function(toggler, content) {
            toggler.removeClass('open');
         }
      });

      // Selektoren für nächstes Level setzen
      counter++;
	  counterx++
      toggler=$$(togglerName+counter);
      content=$$(contentName+counterx);
   }
});

CSS Datei für das Menu:

/* @group Reset */
*
{
    margin:0;
    padding:0;
    font:11px/15px verdana, arial, sans-serif;
}
      
/* @group Allgemeine Definitionen */
#left
{
    width:250px;
    padding:20px;
    border: 6px;
    -moz-border-image: url("/tl_files/sehr-schlecht/images/rand.png") 6 repeat;
    -webkit-border-image: url("/tl_files/sehr-schlecht/images/rand.png") 6 repeat;
    -o-border-image: url("/tl_files/sehr-schlecht/images/rand.png") 6 repeat;
    border-image: url("/tl_files/sehr-schlecht/images/rand.png") 6 repeat;
}
      
#left h1
{
    margin-bottom:15px;
    text-align:center;
    font-size:20px;
    line-height:22px;
    font-weight:normal;
    color:#0066CC;
}
      
/* @group Ebene 1 */
ul.level_1 li.accordion_toggler_level_1
{
    height:20px;
    position:relative;
    margin-bottom:15px;
    padding:5px 0 2px 25px;
    background-image:url("tl_files/sehr-schlecht/images/icon_accordion_closed.png");
    background-repeat:no-repeat;
    font-weight:bold;
    color:#99FF99;
    color: white;
    cursor: pointer;
    background: #6bba70; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiYmE3MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YmJhNzAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #6bba70 0%, #6bba70 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6bba70), color-stop(100%,#6bba70)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #6bba70 0%,#6bba70 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6bba70 0%,#6bba70 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6bba70 0%,#6bba70 100%); /* IE10+ */
    background: linear-gradient(top,  #6bba70 0%,#6bba70 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bba70', endColorstr='#6bba70',GradientType=0 ); /* IE6-8 */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
      
/* @group Ebene 1 */
ul.level_1 li.open
{
    height:20px;
    position:relative;
    margin-bottom:10px;
    padding:5px 0 2px 25px;
    background-image:url("tl_files/sehr-schlecht/images/icon_accordion_open.png");
    background-repeat:no-repeat;
    font-weight:bold;
    color:#99FF99;
    color: white;
    cursor: pointer;
    background: #006e2e; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNmUyZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDZlMmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #006e2e 0%, #006e2e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006e2e), color-stop(100%,#006e2e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #006e2e 0%,#006e2e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #006e2e 0%,#006e2e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #006e2e 0%,#006e2e 100%); /* IE10+ */
    background: linear-gradient(top,  #006e2e 0%,#006e2e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006e2e', endColorstr='#006e2e',GradientType=0 ); /* IE6-8 */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
      
* html ul.level_1 li
{
    cursor: hand;
}
      
/* @group Inhalt */
ul.level_1 li.accordion_toggler_level_2
{
}
      
ul.level_2
{
    padding:0 10px 0 25px;
}
      
li.accordion_toggler_level_2
{
    margin-bottom:10px;
    margin-left:20px;
    padding:5px 0 7px;
    text-align:center;
    font-size:12;
    font-weight:bold;
    color:#ffffff;
    background: #eab92d; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #eab92d 0%,#c79810 100%); /* IE10+ */
    background: linear-gradient(left,  #eab92d 0%,#c79810 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=1 ); /* IE6-8 */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
      
ul.level_1 a:link
{
    font-weight:bold;
    text-decoration:none;
    color:#ffffff;
}
      
ul.level_1 a:hover
{
    font-weight:bold;
    text-decoration:underline;
    color:#336699;
}
      
ul.level_1 a:active
{
    font-size:14px;
    font-weight:bold;
    text-decoration:underline;
    color:#CC0000;
}
      
ul.level_1 a:focus
{
    border-style:dotted;
    border-color:#333333;
    font-size:12px;
    font-weight:bold;
    text-decoration:underline;
    color:#CC3333;
    border-width:thin;
}

Ich habe auch schon einmal versucht mit der Erweiterung Mootoolsnav das ganze zu lösen. Da bekomme ich aber die folgenden Javascript Fehlermeldungen:

index.php:77Uncaught ReferenceError: moomenu_stop is not defined
(anonymous function)index.php:77
onmouseoverindex.php:78
index.php:77Uncaught ReferenceError: moomenu_fire is not defined
(anonymous function)index.php:77
onmouseoutindex.php:78
index.php:77Uncaught ReferenceError: moomenu_stop is not defined
(anonymous function)index.php:77
onmouseoverindex.php:78
index.php:77Uncaught ReferenceError: moomenu_fire is not defined
(anonymous function)index.php:77
onmouseoutindex.php:78
index.php:76Uncaught ReferenceError: moomenu is not defined
(anonymous function)index.php:76
onmouseoverindex.php:77
index.php:76Uncaught ReferenceError: moomenu is not defined
(anonymous function)index.php:76
onmouseoutindex.php:77
index.php:76Uncaught ReferenceError: moomenu is not defined
(anonymous function)index.php:76
onmouseoverindex.php:77
index.php:76Uncaught ReferenceError: moomenu is not defined
(anonymous function)index.php:76
onmouseoutindex.php:77

Ich hoffe, mir kann einer helfen.

Mit freundlichen Grüßen

Sehr-schlecht

[MiTsch]

Hallo sehr-schlecht,

herzlich Willkommen in der Contao-Community.

Zu dem Menü was Du umsetzen möchtest findest Du hier im Forum unter MenuMatic jede Menge Beiträge. Unter anderen auch einen von MacKP in dem die Umsetzung sehr gut erklärt wird.

Dies sollte Dir weiter helfen: http://www.contao-community.de/showt...ght=Menu+Matic


Viele Grüße
MiTsch


EDIT: Video-Tutorial
Hallo sehr-schlecht ich bin zufällig noch über diese Anleitung "gestolpert".
Viel Erfolg damit!

[sehr-schlecht]

Vielen Dank für deine Hilfe MiTsch, aber ich glaube das ist nicht genau das was ich mir vorstelle.
Ich versuche es mal genauer zu beschreiben und habe auch eine online demo davon, wie ich es gerne in Contao umsetzen würde :

So nun zur Erklärung:

Ich bezeichne jetzt mal die Obernavigationspunkte mit Großbuchstaben (A,B,C,...) und die Menu Unterpunkte mit Zahlen (1. 2. 3. ...)

Prinzipiell soll es so aussehen:

geschlossen:

[COLOR="#FF0000"]A
B
C[/COLOR]
...

Es sind nur die Hauptmenupunkte zu sehen.

auf A geklickt:

[COLOR="#FF0000"]A[/COLOR]
[COLOR="#0000FF"]   1
   2
   3[/COLOR]
 ...
[COLOR="#FF0000"]B
C[/COLOR]

Die Untermenupunkte 1 2 3 fahren aus.

Wenn man jetzt auf B klickt, Verschwinden die Unterpunkte von A wieder und die Unterpunkte von B erscheinen.


Das ist KEIN Hover effekt, sondern bleibt so

Davon hab ich mal eine Demo erstellt (funktioniert mit allen Browsern außer IE): http://milchbubie.bplaced.net/navigation/normal/

Der Zusatz, der denke ich mit Contao ohne Problem machbar sein müsste ist, dass die Submenu Gruppe geöffnet ist, die gerade aktiv ist.
Da wird nämlich dem übergeordneten Element nur die id open_accordion_entry zugeordnet.

Demo: http://milchbubie.bplaced.net/navigation/open/

Wenn das mit Menu_Matic funktionieren sollte dann nehme ich alles zurück, aber ich habe keine Option gefunden, mit der es wie beschrieben funktioniert. Menu_Matic erinnert mich sehr stark an das Cool_Menu und hat eigentlich die gleichen funktionen (vielleicht etwas moderner)

MFG

Sehr-schlecht

[jscholtysik]

Hallo sehr-schlecht,


das ist genau die Funktion, die die Mootools-Navigation von Andreas Schempp bietet:

http://www.contao.org/erweiterungsliste/view/mootoolsnav.10000009.de.html

[legalstuff]

Aufklapp Menü -> Motoolsnav 2.9.1

jscholtysik, die Mootoolsnav, sind noch nicht für 2.10.x geeignet sondern NUR für 2.9.1.

Ich weiß nicht, ob sich da noch mal etwas ändert und auf 2.10.. bzw. schon auf 2.11 angepasst wird.

Das ist immer das Problem, da wird die Core-Version verbessert und kritische Bugs entfernt, aber die Erweiterungen kommen da nicht nach.
Gerade Und er steht hier nur stellvertretend und nicht persönlich gemeint, so tolle aktive Coder wie Andreas Schempp, die viele Erweiterungen gemacht haben (aber auch Andere), haben das Problem, dass sie dann eigentlich alles noch mal anpassen oder zumindest für die neue Version freigeben müßten.

Da sind natürlich Neulinge (wie ich mich auch noch sehe) manchmal verunsichert, ob die Erweiterung wirklich eingesetzt werden kann.