Contao-Camp 2024
Ergebnis 1 bis 16 von 16

Thema: mootoolsnav - click statt mousover --> Einblendeffekt verschwunden

  1. #1
    Contao-Nutzer
    Registriert seit
    05.03.2010.
    Beiträge
    94

    Standard mootoolsnav - click statt mousover --> Einblendeffekt verschwunden

    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-Code:
    <?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?

  2. #2
    Alter Contao-Hase Avatar von soweit_ok
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    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.

  3. #3
    Contao-Nutzer
    Registriert seit
    05.03.2010.
    Beiträge
    94

    Standard

    hab ich probiert, leider ändert sich nichts!

    hier der ganze template code:

    PHP-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>

  4. #4
    Contao-Nutzer
    Registriert seit
    05.03.2010.
    Beiträge
    94

    Standard

    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!

  5. #5
    Alter Contao-Hase Avatar von soweit_ok
    Registriert seit
    07.05.2011.
    Beiträge
    1.199

    Standard

    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. :-)

  6. #6
    Contao-Nutzer Avatar von GeorgDerks
    Registriert seit
    20.01.2010.
    Ort
    47906 Kempen
    Beiträge
    70
    Partner-ID
    6516

    Standard Die (leider nur halbe) Lösung ...

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

    Statt
    PHP-Code:
    <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:
    PHP-Code:
    <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.
    Herzlichen Gruß,

  7. #7
    Contao-Fan
    Registriert seit
    07.07.2011.
    Ort
    Kiel
    Beiträge
    254
    User beschenken
    Wunschliste

    Standard

    Das scheint das Verzögerung-Javascript von der anderen Seite zu sein:
    Code:
    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);
    }

  8. #8
    Contao-Nutzer Avatar von GeorgDerks
    Registriert seit
    20.01.2010.
    Ort
    47906 Kempen
    Beiträge
    70
    Partner-ID
    6516

    Standard

    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 ...
    Herzlichen Gruß,

  9. #9
    Contao-Nutzer
    Registriert seit
    26.05.2010.
    Beiträge
    11

    Standard

    Zitat Zitat von matthias123 Beitrag anzeigen
    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?

  10. #10
    Contao-Nutzer
    Registriert seit
    04.10.2011.
    Beiträge
    27

    Standard

    Hallo,

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

    Viele Grüße

  11. #11
    Contao-Nutzer
    Registriert seit
    10.04.2010.
    Ort
    Stuttgart
    Beiträge
    25

    Standard

    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:

    Code:
    <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:
    Code:
    <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.

  12. #12
    Contao-Nutzer
    Registriert seit
    05.11.2010.
    Ort
    Ruhrgebiet
    Beiträge
    8

    Standard

    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

  13. #13
    Contao-Nutzer Avatar von wsa
    Registriert seit
    27.10.2009.
    Ort
    Augsburg
    Beiträge
    128

    Frage

    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

  14. #14
    Contao-Nutzer
    Registriert seit
    12.02.2010.
    Ort
    Berlin
    Beiträge
    19

    Standard Mögliche Lösung

    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)

  15. #15
    Contao-Fan Avatar von webster
    Registriert seit
    15.09.2010.
    Ort
    Kiel
    Beiträge
    460

    Standard

    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:

    HTML-Code:
    [...]
    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.
    Was ist das? - Blaues Licht - Und was macht es? - Es leuchtet blau...

  16. #16
    Contao-Nutzer
    Registriert seit
    20.09.2013.
    Ort
    Karlsruhe
    Beiträge
    4

    Standard Sidebar

    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



    Code:
    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;
    }

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •