it-swarm.com.de

Verwenden Sie das HTML-Tag, um nur einige Wörter eines Menüeintrags fett darzustellen

Ich versuche, ein HTML-Tag in meinem Menüelement zu verwenden, um ein Menü wie das folgende zu erhalten:

Übergeordnetes Menü

  • Mein erstes Untermenü ist fett gedruckt
  • Mein zweites Untermenü ist hervorgehoben

Wenn ich zum Beispiel das <strong> - Tag in das Menütitelfeld eingebe, wird es beim Speichern der Seite entfernt.

Wenn ich jedoch [b]My fist submenu[/b] is in bold Eingebe, wird das Tag [b] Nicht entfernt.

Gibt es eine Möglichkeit, Joomla anzuweisen, [b] Durch ein <strong> - Tag zu ersetzen?

4
MagTun

Hier haben Sie einige Möglichkeiten.

Option 1 wäre zu tun, was @Bakual empfohlen hat. Ich habe noch nie versucht, ReReplacer zu verwenden, aber die Erweiterung wurde von einem sehr beliebten und hochgelobten Entwickler entwickelt und gepflegt.

Option 2:

Sie könnten ein kleines Plugin entwickeln und die Menüelemente ansteuern und [b] Durch ein <strong> - Tag ersetzen.

$item = //code to get menu items
$tag = array(
    '/\[b\](.*?)\[\/b\]/is',
);
$replace = array(
    '<strong>$1</strong>',
);
$output = preg_replace($tag, $replace, $item);

Option

Die geliebte jQuery-Methode, die ich hinzufügen kann, ist jedoch nicht die bevorzugte Methode könnte ist die einfachste. Ähnliches:

$('.nav li a').html(function (i, html) {
     return html.replace(/(\w+\s\w+\s\w+)/, '<strong>$1</strong>')
});

Hoffe das hilft

6
Lodder

Sie können ReReplacer von NoNumber ( http://www.nonumber.nl/extensions/rereplacer ) verwenden, um solche Dinge auf jeder Seite zu ersetzen. Allerdings würde ich es in diesem Fall nicht empfehlen.

Darf ich einen anderen Lösungsansatz vorschlagen? In den Menüeintragsoptionen können Sie auf der Registerkarte "Link Type" einen "Link CSS Style" einstellen. Fügen Sie dort eine CSS-Klasse hinzu und wenden Sie stattdessen die Formatierung auf diese Klasse an. Fügen Sie dort die CSS-Klasse bold hinzu und definieren Sie sie in Ihrer Template-CSS-Datei als

.bold {
    font-weight:bold;
}

Dies sollte ausreichen, ohne dass HTML in Ihrem Menüelement erforderlich ist.

10
Bakual

Haben Sie jemals Maximenu CK verwendet? http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/11578

Es hat eine Menge zusätzlicher Funktionen, die Sie wahrscheinlich nicht benötigen werden, aber Sie können einen abgespeckten Stil festlegen, damit Sie die CSS selbst gestalten können. Der coole Teil davon ist, dass Sie Menüelementtext mit Pipe-Unterbrechungen trennen können und automatisch eine Klasse zu der Hälfte hinzufügen, die nach den Pipe-Anweisungen folgt.

Mein Menü ||

Anschließend stylen Sie das gesamte Objekt so, wie Sie es für den Abschnitt "Mein Menü" möchten, und überschreiben diese Stile mit der Klasse, die auf den Abschnitt "Artikel" angewendet wurde.

Sehr hilfreich. Übrigens hat Maximenu auch mobile Menüintegration, Beschreibungsfelder und ein paar andere coole Optionen.

Das mobile Plugin finden Sie hier: http://extensions.joomla.org/extensions/extension-specific/extensions-specific-non-sorted/22662

3
Faye

Sind Sie sicher, dass Sie das Tag strong verwenden sollten?

strong sollte nicht verwendet werden, um Text fett zu machen. Das gleiche gilt für das Tag em. em wird verwendet, um einen Text hervorzuheben (wie gelesen) und nicht , um ihn in Kursivschrift zu rendern. Wenn Sie möchten, dass ein Teil des Texts Ihres Menüelements in einer höheren Schriftgröße angezeigt wird, ist b eine weitaus bessere Wahl.

Um jedoch die volle Kontrolle über den Inhalt der Menüpunkte zu haben, kann ich das JBType-Plugin von Joomla Bamboo empfehlen. http://www.joomlabamboo.com/joomla-extensions/jb-type-joomla-typography-plugin

Hier können Sie einfach Ihren Menütitel eingeben:

Ein Menüelement mit {jb_i} Kursivschrift {/ jb_i}

Und das Plugin wird die Ausgabe mit em Tags rendern.

2
Seth Warburton

Als reine CSS-Lösung können Sie nth-of-type() verwenden, um auf die Untermenüelemente zuzugreifen.

Für meinen lokalen Test haben diese Selektoren für mich funktioniert:

li.deeper > ul.nav-child > li.deeper:nth-of-type(1) > a {
    font-weight: bold;
}

li.deeper > ul.nav-child > li.deeper:nth-of-type(2) > a {
    font-style: italic;
}

enter image description here

Mein Screenshot zeigt, dass:

  • Das erste Untermenü ist fett gedruckt
  • Das zweite Untermenü ist kursiv
  • Das dritte Untermenü enthält keinen benutzerdefinierten Stil

Diese Selektoren können für Ihr Projekt "direkt nach dem Auspacken" funktionieren oder auch nicht - die Ergebnisse können je nach Menüstruktur und vorgesehenem Stil für andere Untermenüs variieren. Verwenden Sie einfach die Entwicklertools Ihres Browsers, um Elemente zu untersuchen und die richtigen Klassen und Hierarchien für die gewünschten Elemente zu ermitteln.

0
mickmackusa