Graphische Menu-Items
Eingetragen von DPMert (4)am 19.06.2008 - 09:24 Uhr in
Hallo !
Ich arbeite derzeit an der Neustaltung einer Grundschul-Webseite.
Den ganzen Kram habe ich bisher komplett manuell (ohne irgendwelche Generatoren) erstellt, wobei die Navigationselemente bewusst graphisch/verspielt gehalten sind.
Damit die lieben Lehrkörper eventuell in der Zukunft in der Lage sind, diese Seite zu verwalten, möchte ich prinzipiell nach Drupal migrieren.
Nun habe ich mir Drupal 4.7 (alt, ok) in einer Testinstallation angesehen, die mitgelieferten Themes ausprobiert und mir auch schon diverse Drupal-Seiten angesehen, vermisse aber bisher so ein Feature wie graphische Menu-Items, die beim Überfahren mit der Maus dann auch eine alternative Grafik anzeigen (das mache ich bisher mit einem simplen Javascript).
Gibt es sowas schon irgendwo "out of the Box" in Drupal, einer neueren Version oder einem Theme und ich finde es nur nicht, oder muss ich irgendwas manuell dazu bauen.
Zu diesem Thema konnte ich bisher keine konkreten Informationen finden.
Beste Grüsse,
Mert
- Anmelden oder Registrieren um Kommentare zu schreiben
Mit dem Modul
am 19.06.2008 - 09:38 Uhr
Mit dem Modul http://drupal.org/project/nice_menus kann man herunterklappbare Menüs erstellen
Aber irgendwie scheint mir es so, als ob man das Problem mit reinem Css lösen kann und zwar mit dem Selector
a:hover {}
Nachzulesen unter http://www.css4you.de/wscss/css03.html#pseudoformate
--------------
Blog www.freeblogger.org: Deutscher IRC-Channel: irc.freenode.net #drupal.de ... Jabber-me: dwehner@im.calug.deXING
Danke schonmal an deneinen
am 19.06.2008 - 10:26 Uhr
Danke schonmal an "deneinen" für die Antwort in Wahnsinniger Geschwindigkeit :)
Nun, die Nice-Menues sehen in der Tat nice aus, machen aber auch wieder den "plain text" Eindruck.
Aber mit den css ist wohl ein guter Hinweis.
Ich hoffe, dort irgendwo recht konkrete Hinweise zu finden, da ich css-technisch völlig unbedarft bin ....
PHP oder CSS
am 19.06.2008 - 10:33 Uhr
Nach meinen Erfahrungen kommst du an CSS oder PHP nicht vorbei. Hintergrundbilder oder was mit php machen.
Ich habe das zB. so gelößt, das ich gucke ob der Titel .jpg oder .png enthält und dann diese benutze um ein Bild aus einem fersten Pfad zu laden.
function phptemplate_menu_item_link($item, $link_item) {if(stristr($item['title'],'.png') || stristr($item['title'],'.jpg')){
return '<a href="'. check_url(url($item['href'])) .'"><img src="/mein/Pfad/'.trim($item['title']).'" alt="'.trim($item['title']).'" title="'.$item['description'].'" /></a>';
}else{
return l($item['title'], $link_item['path'], !empty($item['description']) ? array('title' => $item['description']) : array(), isset($item['query']) ? $item['query'] : NULL);
}
}
---
Viele Grüße,
Kars-T
Arbeit: comm-press
Hobbies: Tower Defense HQ, plamo.de, Blog
Hi Kars-T !
am 19.06.2008 - 10:49 Uhr
Hi Kars-T !
Ebenfalls danke für die Antwort.
Nun bekomme ich Angst. Ich hoffe es wird nicht notwendig sein selber rum zu codieren ...:)
Es scheint als ob sich meine "Out-of-the-box" Hoffnung langsam zerlegt ....
Ok, ich stell mal meine Versuche dar:
Mein Stylesheet enthält folgende Bereiche.....
.primary-links {
background: transparent url(GSFreudenberg.gif) top center no-repeat;
color: #fff;
}
.primary-links a:hover {
background: transparent url(GSFreudenberg.gif2) top center no-repeat;
font-family: "Helvetica", SunSans-Regular, Verdana, sans-serif;
font-size: 4em;
color: #100;
}
Die sollen hier in der page.tpl.php wirken:
<table id="primary-menu" summary="Navigation elements." border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
<td class="primary-links" width="100%" height="100" align="center" valign="middle">
<?php print theme('links', $primary_links) ?>
</td>
</tr>
</table>
Das Stylesheet schein zu greifen und setzt ein Hintergrundbild.
Auch das a:hover wird angesprochen, d.h. Textstil und Grösse wird geändert.
Das Hintergrundbild allerdings ändert sich nicht.
Wo liegt wohl mein Fehler ?
Beste Grüsse,
Mert
.gif2?
am 19.06.2008 - 23:27 Uhr
Was ist denn .gif2 für ein Dateientyp? ;)
Schreibmal GSFreudenberg2.gif das sollte es schon gewesen sein.
---
Viele Grüße,
Kars-T
Arbeit: comm-press
Hobbies: Tower Defense HQ, plamo.de, Blog
Errr, kaum macht man es
am 20.06.2008 - 09:49 Uhr
Errr, kaum macht man es richtig .... geht es.
Aber nur fast :)
Das genannte Hintergrundbild wird nun tatsächlich geändert.
Leider aber nur im caret-Bereich des textlichen Links (beim Firefox).
Langsam wird es interessant....
Aber letztlich zielte meine ursprüngliche Frage darauf ab, ob es schon etwas "fertiges" in dieser Richtung gibt.
Also ein Theme/Modul, welches Roll-Over Image Menu Items von Haus aus unterstützt.
Müsste es doch geben. So ausgefallen ist der Wunsch doch nicht, oder ? :)
Beste Grüsse,
Mert
display
am 20.06.2008 - 10:06 Uhr
Ein Anker ist ein inline Element
http://de.selfhtml.org/html/referenz/elemente.htm#a
Da kommst du mit height / width nicht weiter. Setze den Anker auf display:block; und schon kannst du damit viel mehr anfangen :)
Und ja, ich habe mich das auch schon oft gefragt und die Antwort ist nunmal, das es viele Wege gibt und viele davon eine Lösung über das Template und PHP sind. Du kannst auch eines der vorgefertigten Menü Module nehmen und die bieten vielleicht eine Lösung an, die passt. Aber um genau das zu bekommen was du nun brauchst, musst du wenigstens das CSS anfassen oder halt php nutzen. Wobei diese CSS methode auch gewisse Vorteile hat, da du zB. die Bilder über das CSS cached und damit Ladezeit sparst. Muss man im Einzelfall sehen.
---
Viele Grüße,
Kars-T
Arbeit: comm-press
Hobbies: Tower Defense HQ, plamo.de, Blog