Navigations-Template für SmartMenus jQuery anpassen

[Nina]

Hier kam die Frage auf, wie man das Navigations-Template nav_default modifizieren kann, damit es mit dem SmartMenus jQuery-Script zusammen passt. Die Anforderung des Scripts ist, dass das erste UL die ID #main-menu hat und die CSS-Klassen "sm sm-clean" (wenn man das Clean-Theme davon einsetzt, sonst die entsprechend anderen Klassen einfügen). Außerdem benötigt das Script die Einstellung das Links auch immer Links bleiben (und sich nicht wie bei Contao üblich in SPAN ändern, wenn sie gerade aktiv sind).

Hier das modifizierte Template:

<ul <?php if(strpos($this->level, 'level_1')!==false): ?>id="main-menu" <?php endif; ?>class="<?php echo $this->level; ?><?php if(strpos($this->level, 'level_1')!==false): ?> sm sm-clean<?php endif; ?>">
  <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
      <li class="<?php echo $item['class']; ?>"><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><?php echo $item['subitems']; ?></li>
    <?php else: ?>
      <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><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><?php echo $item['subitems']; ?></li>
    <?php endif; ?>
  <?php endforeach; ?>
</ul>

Und noch ein kleiner Tipp, weil daran immer wieder viele Nutzer verzweifeln:
Damit die Dropdowns in Contao nicht abgeschnitten werden, müsst ihr den "overflow: hidden"-Befehl aufheben, den Contao durch die "block"-Klasse automatisch auf das umliegende NAV-Element legt.
Wenn eure Navigation z.B. im #header liegt, müsst ihr einfach nur dieses CSS ergänzen:

#header nav.block { overflow: visible; }

[Nina]

Ich kann übrigens die folgenden Einstellungen für das Menü empfehlen:

$(function() {
  $('#main-menu').smartmenus({  
    keepInViewport: true,         
    markCurrentItem: true,
    hideTimeout: 1500,
    mainMenuSubOffsetX: -1,
    mainMenuSubOffsetY: 0,
    subMenusSubOffsetX: 1,
    subMenusSubOffsetY: -1
  });
});

keepInViewport: wenn ein Untermenü seitlich aus dem Browserfenster herausragen würde, switcht das Script es automatisch in die andere Richtung (behält es im Viewport)

markCurrentItem: Markierung des aktiven Navpunktes

hideTimeout: kleine Verzögerung, bevor das Untermenü schließt (Usability-Verbesserung, damit nicht sofort alles einklappt, wenn Nutzer mit der Maus o.ä. mal verrutschen)

Der Rest sorgt dafür, dass die Untermenüs leichte Überlappungen haben und dadurch imho "stabiler" anvisiert werden können.

[Nina]

Wenn ihr jQuery und Mootools parallel einsetzt, müsst ihr in den noConflict-Mode gehen.
Das macht ihr am besten so:

Im Seitenlayout bei den zusätzlichen Head-Tags das einfügen:

<script>jQuery.noConflict();</script>

Und den Aufruf für das Menü statt z.B. bisher:

$(function() {
  $('#main-menu').smartmenus({  
    keepInViewport: true,         
    markCurrentItem: true,
    hideTimeout: 1500,
    mainMenuSubOffsetX: -1,
    mainMenuSubOffsetY: 0,
    subMenusSubOffsetX: 1,
    subMenusSubOffsetY: -1
  });
});

neu abändern auf:

jQuery( document ).ready(function( $ ) {
  $('#main-menu').smartmenus({ 
    keepInViewport: true,         
    markCurrentItem: true,
    hideTimeout: 1500,
    mainMenuSubOffsetX: -1,
    mainMenuSubOffsetY: 0,
    subMenusSubOffsetX: 1,
    subMenusSubOffsetY: -1
  });
});

[Spooky]

Wenn ihr jQuery und Mootools parallel einsetzt, müsst ihr in den noConflict-Mode gehen.
Das macht ihr am besten so:

Im Seitenlayout bei den zusätzlichen Head-Tags das einfügen:

<script>jQuery.noConflict();</script> 

Das sollte gar nicht notwendig sein. Es reicht auch diese Änderung:

neu abändern auf:

jQuery( document ).ready(function( $ ) {
  $('#main-menu').smartmenus({ 
    keepInViewport: true,         
    markCurrentItem: true,
    hideTimeout: 1500,
    mainMenuSubOffsetX: -1,
    mainMenuSubOffsetY: 0,
    subMenusSubOffsetX: 1,
    subMenusSubOffsetY: -1
  });
}); 

Oder alternativ:

(function($){
  $(document).ready(function(){
    $('#main-menu').smartmenus({ 
      keepInViewport: true,         
      markCurrentItem: true,
      hideTimeout: 1500,
      mainMenuSubOffsetX: -1,
      mainMenuSubOffsetY: 0,
      subMenusSubOffsetX: 1,
      subMenusSubOffsetY: -1
    });
  });
})(jQuery); 

[dragon]

Hallo,

habe eben die neue Extension drmonty/smartmenus testweise per Paketverwaltung installiert. Nur ist leider völlig unklar wie sie eingebunden wird. Es gibt kein neues Modul, im Navigationmodul kein neues Template und auch keinen neuen Elementtypen, einfach nichts...

Hat das jemand schonmal ausprobiert?

Beste Grüße

[Spooky]

drmonty/smartmenus ist keine Contao Extension, daher erscheint da auch nichts. Du musst das Script nach der Installation entsprechend selbst einbinden und anwenden.

[dragon]

Ok, besten Dank.