Aktive Menüpunkte - welche Lösungen gibt es? Das Modul "Menu Trails" vs jQuery.
Das Modul "Menu Trails"
Das Modul "Menu Trails" kann dabei helfen einzelnen Menüpunkten den Status aktiv zu geben. Soll heißen Menüpunkte erhalten die CSS Klasse active und damit bleiben solche Menüpunkte als aktiv markiert wenn zu ihnen gehörende Inhalte angezeigt werden.
- Man muss nicht zwingend das Modul "Menu Trails" verwenden.
- Auch kann es passieren das mittels "Menu Trails" einzelne "auf aktiv gesetzte" Menüpunkte nicht als aktiv angezeigt werden.
Die Alternative - jQuery
Alternativ bietet sich jQuery an um bei einzelnen Menüpunkten die CSS Klasse active einzufügen.
Beispielhaft möchte ich dies kurz an meiner eigenen Website am Menüpunkt Kontakt und dem Kontaktformular erläutern.
Hier der HTML Quellcode des Menü:
<div class="header-links">
<ul class="links secondary-links">
<li class="first menu-1-1-68"><a href="/qt/home" class="menu-1-1-68">Start</a></li>
<li class="menu-1-2-68"><a href="/qt/folio" title="Portfolio, Referenzen" class="menu-1-2-68">Folio</a></li>
<li class="menu-1-3-68"><a href="/qt/referenzen" class="menu-1-3-68">Referenzen</a></li>
<li class="last menu-1-4-68"><a href="/qt/kontakt" class="menu-1-4-68">Kontakt</a></li>
</ul>
</div>Der Menüpunkt <li class="last menu-1-4-68"> soll die CSS Klasse active erhalten. Genauer gesagt muss diese Klasse dem a Tag hinzugefügt werden.
Der jQuery Code
Dies wird mit folgendem jQuery Code erreicht:
$code =
'$(document).ready(function(){
$(".secondary-links li.menu-1-4-68 a").addClass("active");
});
';
drupal_add_js($code, 'inline');Entscheidend ist also die bereits existierende Klasse im li Tag um dieses HTML Element mit jQuery gezielt ansprechen zu können.
Nun ist aber das Kontaktformular etwas schwierig zu erreichen und es entsteht die Frage wo man den jQuery Code platzieren kann.
Im Falle der Kontaktformular-Seite kann man ein Minimodul erstellen. In diesem Minimodul wird aber nicht ein Formelement geändert - könnte man wenn man schon ein Minimodul hat auch gleich machen - sondern es wird lediglich der jQuery Code platziert.
Der Code für das Minimodul
Das Minimodul heisst "contact_mail_page".
Hinweis: Minimodul ist fuer Drupal 5
Die Datei "contact_mail_page.info":
; $Id: contact_mail_page.info, v 1.0 2008/08/10 17:24:58 quiptime Exp $
name = Contact Mail Page
description = Enables jQuery features to the contact mail page.
dependencies = contact
package = Mini modules
version = VERSION
; Information added by drupal.org packaging script on 2008-01-29
version = "5.7"
project = "drupal"
datestamp = "1201565404"Die Datei "contact_mail_page.module":
<?php /* $Id: contact_mail_page.module, v 1.0 2008/08/10 17:29:50 quiptime Exp $ */
function contact_mail_page_form_alter($form_id, &$form) {
if($form_id == 'contact_mail_page') {
$code =
'$(document).ready(function(){
$(".secondary-links li.menu-1-4-68 a").addClass("active");
});
';
drupal_add_js($code, 'inline');
}
}
?>Andere Inhalte
Bei anderen Inhalten wie beispielsweise konkreten Nodetypes muss kein Minimodul geschrieben werden. In diesem Anwendungsfall kann der jQuery Code einfacherweise in der Template-Datei des Nodetyps platziert werden.
Hier der Code eines Nodetype Template mit dem zusätzlich eingefügten jQuery Code analog dem Beispiel mit dem Minimodul. Codesnipped:
<?php /* $Id: node-reference.tpl.php, v 1.0 2008/08/10 quiptime Exp $ */
/**
* menu-1-3-68-active
*/
$code =
'$(document).ready(function(){
$(".secondary-links li.menu-1-3-68-active a").addClass("active");
});
';
drupal_add_js($code, 'inline');
?>
<?php phptemplate_comment_wrapper(NULL, $node->type); ?>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<div class="clear-block clear">
<?php print $picture ?>
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>" title="<?php print t('Read the rest of this posting.'); ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
...- Anmelden oder Registrieren um Kommentare zu schreiben
Neue Kommentare
vor 1 Tag 8 Stunden
vor 2 Tagen 2 Stunden
vor 2 Tagen 21 Stunden
vor 1 Woche 6 Stunden
vor 1 Woche 9 Stunden
vor 1 Woche 4 Tagen
vor 1 Woche 4 Tagen
vor 1 Woche 4 Tagen
vor 4 Wochen 1 Tag
vor 4 Wochen 2 Tagen