mootoolsnav - click statt mousover --> Einblendeffekt verschwunden

[matthias123]

Hallo,

Ich würde gerne die mootoolsnav einsetzen. Allerdings brauche ich unbedingt, dass die Untermenüpunkte bei einem Klick statt bei Mouseover erscheinen. Ich habe deshalb in dem Template "nav_moomenu.tpl" statt "onmouseover="moomenu_display" "onclick="moomenu_display"" eingefügt.

Es funktioniert zwar, dass die Unterpunkte erst erscheinen, wenn man auf den entsprechenden Menüpunkt in Level 1 klickt, jedoch erscheinen sie einfach und "blenden" sich nicht langsam ein. Das schaut natürlich nicht so elegant aus!

<?php else: /* Mit Untermenüs */ ?>
<li class="<?php if ($item['class']) echo $item['class']; ?> menutoggler"><a href="<?php echo $item['href']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>" onclick="moomenu_display(<?php echo $GLOBALS['accorditem'][$this->level]; ?>)" onmouseover="moomenu_fire()"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<!-- count accorditem -->
<?php $GLOBALS['accorditem'][$this->level]++; ?>
<?php endif; ?>

Kann mir jemand dabei helfen?

[soweit_ok]

Was macht denn die Funktion moomenu_fire()? Guck doch im Script nach, ob das was mit dem Fading zu tun hat. Und falls ja, dann funktioniert es vielleicht, wenn Du den Aufruf im Template statt an mouseouver an das onclick-Event anhängst. Stimmt den überhaupt der Fading wert in dem MooTools-Script? Der ist ja änderbar.

[matthias123]

hab ich probiert, leider ändert sich nichts!

hier der ganze template code:

<?php

  $togglerlevel = 'level_1';
  $menulevel = 'level_2';

?>

<ul class="<?php echo $this->level; if($this->level == $menulevel) echo ' menuaccord" onmouseover="moomenu_stop()" onmouseout="moomenu_fire()'; ?>">
<?php if (!isset($GLOBALS['accorditem'][$this->level])) $GLOBALS['accorditem'][$this->level] = 0; ?>

<?php foreach($this->items as $item): ?>

<?php if ($item['isActive']): ?>

<?php if(empty($item['subitems'])): /* Ohne Untermenüs */ ?>

<li class="<?php if ($item['class']) echo $item['class']; ?><?php if($this->level == $togglerlevel) echo ' nosubmenu'; ?>"><p class="active <?php if ($item['class']): ?> <?php echo $item['class']; endif; ?>"><?php echo $item['link']; ?></p></li>

<?php else: /* Mit Untermenüs */ ?>
<?php if ($this->level == $togglerlevel) $GLOBALS['activemenuaccord'] = $GLOBALS['accorditem'][$this->level]; ?>
<li class="active <?php if ($item['class']) echo $item['class']; ?><?php if($this->level == $togglerlevel): ?> menutoggler<?php endif; ?>"><p class="active <?php if ($item['class']): ?> <?php echo $item['class']; endif; ?>"<?php if($this->level == $togglerlevel): ?> onmouseover="moomenu.accordion.display(<?php echo $GLOBALS['accorditem'][$this->level]; ?>)" onmouseout="moomenu.accordion.display(activemenuaccord)"<?php endif; ?>><?php echo $item['link']; ?></p><?php echo $item['subitems']; ?></li>
<?php $GLOBALS['accorditem'][$this->level]++; ?>
<?php endif; ?>
<?php else: ?>

<?php if ($this->level == $togglerlevel && strpos($item['class'], 'trail') !== false) $GLOBALS['activemenuaccord'] = $GLOBALS['accorditem'][$this->level]; ?>

<?php if($this->level == $togglerlevel): /* Level 1 */ ?>

<?php if(empty($item['subitems'])): /* Ohne Untermenüs */ ?>

<li class="<?php if ($item['class']) echo $item['class']; ?> nosubmenu" onmouseover="moomenu_stop()" onmouseout="moomenu_fire()"><a href="<?php echo $item['href']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a></li>

<?php else: /* Mit Untermenüs */ ?>
<li class="<?php if ($item['class']) echo $item['class']; ?> menutoggler"><a href="<?php echo $item['href']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>" onclick="moomenu_display(<?php echo $GLOBALS['accorditem'][$this->level]; ?>)" onclick="moomenu_fire()"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<!-- count accorditem -->
<?php $GLOBALS['accorditem'][$this->level]++; ?>
<?php endif; ?>

<?php else: /* Level 2 oder höher */ a?>

<li class="<?php if ($item['class']) echo $item['class']; ?>"><a href="<?php echo $item['href']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>

<?php endif; ?>

<?php endif; ?>

<?php endforeach; ?>
</ul>

[matthias123]

So wie sich das Menü jetzt verhält, bräuchte ich eigentlich keine Mootoolsnav, da bei einem Klick sich auch die Seite von dem Level_1 Menüpunkt öffnet. Vielleicht ist das der Key. Wie könnte ich das unterbinden? Weil die Animation kann natürlich nicht kommen wenn eine neue Seite geladen wird.

Also das gewünschte Verhalten wäre:

Klick auf Menüpunkt Level 1: es blenden sich die Untermenüpunkte ein, es wird keine Seite von Menüpunkt Level 1 geladen!
Klick auf Menüpunkt Level 2: Es wird die entsprechende Seite geladen.

Ich weiß dafür gab es schon öfters Anfragen im Forum aber keine wirklichen Lösungen. Vielleicht schaffen wirs diesmal!

[soweit_ok]

Ist schon klar ... das Verhalten, wie z. B. auch die Top-Navi im Firefox. Fände ich an sich auch besser, denn das Aufklappen bei mouseover kann auch lästig sein, insbesondere wenn die Navi nicht ganz oben platziert ist. Leider wüsste ich dafür ad hoc auch keine Lösung und hab aktuell nicht die Zeit, mich näher damit zu befassen, sorry. Falls Du es hinkriegst, wäre es schön, wenn Du die Lösung hier postest. Können andere Contao'ler sicher auch mal brauchen. Einschl. meiner einer. :-)

[GeorgDerks]

In der nav_moomenu.tpl muss die Zeile 35 angepasst werden:

Statt

<li class="<?php if ($item['class']) echo $item['class']; ?> menutoggler"><a href="<?php echo $item['href']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>" onmouseover="moomenu_display(<?php echo $GLOBALS['accorditem'][$this->level]; ?>)" onmouseout="moomenu_fire()"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>

muss es lauten:

<li class="<?php if ($item['class']) echo $item['class']; ?> menutoggler"><a href="<?php echo $item['href']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>" onclick="moomenu_display(<?php echo $GLOBALS['accorditem'][$this->level]; ?>)"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>

Also einfach "onmouseover="moomenu_display..." in "onclick="moomenu_display..." umtaufen und entsprechendes onmouseout dahinter entfernen.

Leider ist das nur die halbe Lösung, denn bevor sich die mootools-Navigation komplett aufgebaut hat, wird die angeklickte (d.h. die dem aufklappenden Baum übergeordnete Seite) schon aufgerufen. Das führt dazu, dass die Navigation "springt". Zu meiner Projektsite HIER KLICKEN.

HIER scheint's dagegen zu funktionieren (Seitenaufrauf erst NACH Aufbau der Navigation). Ich schätze, hier wurde von Hand (per JS?) eine Verzögerung eingebaut (die würde ich in Kauf nehmen). Ist aber nur ein Verdacht. Habe schon gesucht, aber nix gefunden.

Vielleicht hilft aber mein Hinweis weiter. Würde mich über eine Lösung (die andere Hälfte ;-)) oder auch weitere Hinweise freuen.

[Vollpfosten]

Das scheint das Verzögerung-Javascript von der anderen Seite zu sein:

var moomenu_timer;

function moomenu_close()
{
    moomenu.accordion.display(activemenuaccord);
}

function moomenu_fire()
{
    moomenu_timer = window.setTimeout(moomenu_close, 200);
}

function moomenu_stop()
{
    window.clearTimeout(moomenu_timer);
}

function moomenu_display(accordionitem)
{
    moomenu_stop();
    moomenu.accordion.display(accordionitem);
}

[GeorgDerks]

Dieses standardmäßig eingebunde moomenu.js unter system/modules/mootoolsnav/html/ hatte ich schon im Blick. Der einzige Unterschied hier zum Standard-JS ist die Zeitangabe bei function moomenu_fire (200ms statt 1500ms). Die Funktion wird hier aber garnicht aufgerufen. Hmm ...

[decon]

So wie sich das Menü jetzt verhält, bräuchte ich eigentlich keine Mootoolsnav, da bei einem Klick sich auch die Seite von dem Level_1 Menüpunkt öffnet. Vielleicht ist das der Key. Wie könnte ich das unterbinden? Weil die Animation kann natürlich nicht kommen wenn eine neue Seite geladen wird.

Also das gewünschte Verhalten wäre:

Klick auf Menüpunkt Level 1: es blenden sich die Untermenüpunkte ein, es wird keine Seite von Menüpunkt Level 1 geladen!
Klick auf Menüpunkt Level 2: Es wird die entsprechende Seite geladen.

Ich weiß dafür gab es schon öfters Anfragen im Forum aber keine wirklichen Lösungen. Vielleicht schaffen wirs diesmal!

Es gibt ein Wiki, wie die Verlinkung einzelner Menüpunkte deaktiviert werden kann. Dazu muß eine Kopie der "nav_default.tpl" modifiziert werden. Das könnte man gleichermaßen mit der "nav_moomenu.tpl" machen.
Kann hier ein Programmierer helfen?

[FRAD]

Hallo,

hat sich in dieser Sache etwas getan? Ich möchte auch gerne ein "klickbares" Menü und kein MouseOver...

Viele Grüße

[oliver.schroth]

Vielleicht bringt meine Lösung zumindest denjenigen etwas, die - so wie ich - keine Verlinkung der level-1 Navigation brauchen. Damit ist dann das "Springen" weg, da es keine Seite gibt, die an der Stelle aufgerufen wird.

Ich bin mir allerdings nicht sicher, ob das auch für Menues mit mehr als einer Unterkategorie funktioniert.

Dazu muss man den Block ab Zeile 35 in der nav_moomenu.tpl:

<li class="<?php if ($item['class']) echo $item['class']; ?> menutoggler"><a href="<?php echo $item['href']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>" onclick="moomenu_display(<?php echo $GLOBALS['accorditem'][$this->level]; ?>)"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>

komplett ersetzen durch:

<li class="<?php if ($item['class']) echo $item['class']; ?> menutoggler"><?php echo $item['link']; ?><?php echo $item['subitems']; ?></li>

Das Ding bekommt jetzt von mir noch eine Klasse und einen cursor: pointer verpasst und funktioniert dann zumindest für mich perfekt.

[barney]

Hallo,

ich möchte den thread nochmals hervorholen.

Ich hätte auch gerne die "Click-Variante", brauche aber die Verlinkung im Level1.

Im Prinzip genauso, wie in der Beispielseite aus Antwort 6 von GeorgDerks: http://www.joba-dienstleistungen.de/leistungen.html

Der Klick funtioniert, aber es springt halt, wie schon beschrieben.


Kann da jemand (inzwischen) helfen?


Viele Grüße, danke schon einmal im voraus
Barney

[wsa]

Hallo zusammen!

Habe dieselbe Anforderung und wäre auch an einer (Standard-)Lösung interessiert.
Hat denn jetzt schon jemand eine Lösung gefunden, die er hier der Allgemeinheit zur Verfügung stellen kann und will?

Vielen Dank im Voraus und GLG
wsa

[lex83]

Nehmt das "mootoolsnav"-script (bis contao 2.11 möglich) und installiert außerdem die Erweiterung "backboneit_scripts". Hier im Seitentemplate einfach "moo_links" aktivieren und der Klicküberschrift die klasse "disabled" mitgeben (z.B. in der Seitenstruktur).
Bitte auch alle onmouseover/out mit "onclick" austauschen (nav_moomenu.tpl/html5).
Dann sollte das Klappen
Getestet mit contao 2.11.11 (.tpl zu .html5 geändert der mootoolsnav)

[webster]

Also, ich habe zwar noch nicht mit dem Script gearbeitet, aber für mich sieht es so aus, als würde eine kleine Erweiterung des Templates reichen, um den Seitenaufruf aus Level 1 heraus zu unterbinden. Das ehemalige onmouseover wurde ja durch onclick ersetzt. Hinter dem Funktionsaufruf moomenu_display einfach ein return false einfügen und schon sollte es gehen:

[...]
onclick="moomenu_display(<?php echo $GLOBALS['accorditem'][$this->level]; ?>); return false;">
[...]

Außerdem gab es ja bereits ein onclick-Attribut (this.blur() usw...), das würde ich mal vorsichtshalber auskommentieren / entfernen. Ich weiß grad nicht, ob das überhaupt "erlaubt" ist.

[lavite-machine]

Hallo zusammen,

ich habe ein Menü in der Sidebar und möchte ebenfalls von dem Aufklappen des Untermenüs bei mouseover auf Aufklappen bei Klicken umschalten. Kann ich das über CSS lösen?

Das aktuelle CSS dazu nachfolgend.

Vielen Dank im Voraus!

Tobias

tyle sheet mainbackup
.mod_mootoolsnav li {
    display:block;
    margin:0 5;
    padding:0 0 0 10px;
    border-style:hidden;
}



.mod_mootoolsnav a:hover,
.mod_mootoolsnav a:focus {
    color:#3d566e;
    background: #eeeeee;
}



.mod_mootoolsnav a.trail,
.mod_mootoolsnav a.active,
.mod_mootoolsnav li > span.trail,
.mod_mootoolsnav li > span.active {
    color:#636363;
    background: #fefefe;
}


.mod_mootoolsnav a,
.mod_mootoolsnav li > span {
    float:none;
    display:block;
    margin-right:10px;
    margin-left:0;
    padding:.75em 1.375em;
    text-decoration:none;
}



.mod_mootoolsnav ul,
 {
    display:block;
    margin:0;
    padding:5px 0 0 20px;
}



.mod_mootoolsnav ul,
 {
    display:block;
    margin:0;
    padding:5px 0 0 20px;
}


.mod_mootoolsnav {
    margin-right:3.55556em;
    padding-left:2%;
    font-size:.88889em;
    color:#636363;
    /* clearfix */	overflow: hidden;
    font-weight: 600;
}

.mod_mootoolsnav {
    position:relative;
    clear:both;
    border:1px solid #e6e6e6;
    background: #f6f6f6;
    background: -webkit-linear-gradient(#fbfbfb, #f1f1f1);
    background: -moz-linear-gradient(#fbfbfb, #f1f1f1);
    background: -o-linear-gradient(#fbfbfb, #f1f1f1);
    background: linear-gradient(#fbfbfb, #f1f1f1);
    -webkit-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}



.mod_mootoolsnav a,
.mod_mootoolsnav li > span {
    float:none;
    display:block;
    padding:.35em 1.375em .35em .25em;
    border-left:0px solid #b8b6b6;
    text-decoration:none;
    color: inherit;
    -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.5);
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.5);
}


nav ul.level_2 {
    margin:0;
    padding:0 0 0 15px;
    border-top:0;
    /* clearfix */	overflow: hidden;
    -webkit-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}



nav li.home.sibling.first
nav li.submenu.new.sibling
nav a.submenu.new.sibling {
    margin:0;
    padding:0;
    border-top:0;
    /* clearfix */	overflow: hidden;
    -webkit-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}



nav li,
ul,
ol,
level_2 {
    display:block;
    margin:0;
    padding:0;
    text-align:left;
    border-top:0;
    /* clearfix */	overflow: hidden;
    -webkit-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}


sidebar li,
ul,
ol,
level_2 {
    display:block;
    margin:0;
    padding:0;
    text-align:left;
}