Welche Funktion erstellt die Linkliste für das Hauptmenu - Image-Replacement nach Gilder/Levin
Eingetragen von stmaasch (4)am 07.08.2011 - 17:16 Uhr in
Hallo Leute,
ich arbeite gerade ein einem eigenen Theme und möchte für das Hauptmenu die Image-Replacement-Technik nach Gilder/Levin anwenden.
Dazu muss ich jedem Link im Hauptmenu ein zusätzlich leeres Element (in meinem Fall ein <b></b>) verpassen, das meine Hintergrundgrafik aufnimmt. Beim Hovern des Links soll sich die Hintergrundgrafik ändern.
Leider weiß ich nicht welche Funktion das Hauptmenu erstellt und wo ich diese finde, um das zusätzlich leere Element dort zu platzieren.
Zurzeit sieht mein Hauptmenucode so aus:
<ul id="main-menu" class="links clearfix">
<li class="menu-242 first active"><a href="/" class="active">Startseite</a></li>
<li class="menu-445"><a href="/webdesign-leistungen" title="Leistungen">Leistungen</a></li>
<li class="menu-446"><a href="/referenzen" title="Referenzen">Referenzen</a></li>
<li class="menu-447"><a href="/artikel" title="Artikel">Artikel</a></li>
<li class="menu-432 last"><a href="/contact" title="Kontakt">Kontakt</a></li>
</ul>Und so soll er aussehen:
<ul id="main-menu" class="links clearfix">
<li class="menu-242 first active"><a href="/" class="active">Startseite<b></b></a></li>
<li class="menu-445"><a href="/webdesign-leistungen" title="Leistungen">Leistungen<b></b></a></li>
<li class="menu-446"><a href="/referenzen" title="Referenzen">Referenzen<b></b></a></li>
<li class="menu-447"><a href="/artikel" title="Artikel">Artikel<b></b></a></li>
<li class="menu-432 last"><a href="/contact" title="Kontakt">Kontakt<b></b></a></li>
</ul>- Anmelden oder Registrieren um Kommentare zu schreiben
Wenn Du Dir den Code
am 07.08.2011 - 18:31 Uhr
Wenn Du Dir den Code ansiehst, dann hat jedes li Element eine eindeutige Klasse. Du kannst doch das Backgroundimage auch mit dem li realisieren, dann brauchst Du nichts zusätzlich einzufügen. Du müßtest nur Deine Methode etwas überarbeiten. Außerdem ist das b-Tag deprecated und sollte nicht mehr verwendet werden.
Beste Grüße
Werner
Gute Idee, aber
am 07.08.2011 - 19:25 Uhr
Danke für die schnelle Antwort.
Die Idee hatte ich auch schon, aber die Hintergrundgrafik soll sich ja beim Hovern des Links ändern. Das kriege ich doch nicht über die Klasse hin.
Das b-tag kann auch ein span-tag sein. Es dient ja nur dazu, die Grafik aufzunehmen.
Mit li.menu-446 a und
am 07.08.2011 - 20:30 Uhr
Mit
li.menu-446 aundli.menu-446 a:hoverkannst Du das Backgroundimage an den a-Tag kleben und beim hover ändern.Beste Grüße
Werner
Das wäre natürlich möglich,
am 07.08.2011 - 20:54 Uhr
Das wäre natürlich möglich, aber dann kann ich die ursprünglichen Linktexte ja nicht verstecken und die Links in der Liste würden so aussehen.
<li><a href="#" title="Link1"></a></li>Das a-tag hätte dann nichts als Inhalt, was ich ja gerade mit der Image-Repalcement-Technik umgehen will.
In der page.tpl steht folgende Zeile:
<?php if ($main_menu_links): ?><div id="main-menu-wrapper" class="clearfix">
<div class="main-menu-inner"><?php print $main_menu_links; ?></div>
</div>
<?php endif; ?>
In welcher Datei, befindet sich aber die Funktion, die mir die Liste erstellt und in die Variable $main_menu_links packt?
Grüße
Steven
stmaasch schrieb Das wäre
am 07.08.2011 - 21:18 Uhr
Das wäre natürlich möglich, aber dann kann ich die ursprünglichen Linktexte ja nicht verstecken ...
Versuche es doch mal so, wie von Werner beschrieben mit den Klassen und Pseudoklassen. Wenn Du den Link verstecken willst, dann rücke ihn doch negativ weit genug ein mit text-indent Dann ist Dein Textlink sehr weit weg :-) Hier ein eigenes Besipiel, an dem ich auch mal in der Sache experimentiert hatte -> www.carwin.de
Ansonsten hilft Dir vielleicht dieser Artikel -> http://stackoverflow.com/questions/2317462/drupal-override-custom-menu-t...
Danke. Danke. Danke. Jetzt
am 07.08.2011 - 23:48 Uhr
Danke. Danke. Danke.
Jetzt hab ich genau den Effekt, den ich haben wollte. Coole Technik über text-indent.