mini fchosting

slogan

Open Search - Einbindung von time4joomla in das Suchenfeld des Browsers - und so funktioniert es: Open Search
Eine Liste der verwendeten Erweiterungen findet sich im Impressum

Langjährige Erfahrung als Dozent zu verschiedenen Themen.
Ich komme zu Ihnen in die Firma oder organisiere Räume vor Ort. Dazu steht mir ein Netzwerk aus vielen Jahren als freier Dozent zur Verfügung.

  • MS-Excel
    2003 / 2007/ 2010
  • MS-Project
    2003 / 2007
  • MS-Office
    2003 / 2007 / 2010
  • Joomla!
    1.5 / 2.5
  • Körpersprache für Präsentation und zur verkaufsfördernen Motivation

  • Weitere Themen auf Anfrage

Interesse? Lust? Zeit? Dann freue ich mich über eine eMail oder Anruf.
Kontaktdaten im Impressum

Immer informiert, was es Neues bei time4joomla und time4mambo gibt. Der Newsletter muss noch bestätigt werden, um Mißbrauch auszuschließen und kann jederzeit wieder abbestellt werden.

Grafische Menüs

Es gibt verschiedene Ansätze hierzu. Der einfachste ist mit den vorhandenen Mitteln zu arbeiten. So sind die grafischen Menüs auf dieser Site entstanden:

 

Bordmittel

Dazu zunächst die Menügrafiken in das Verzeichnis images/stories laden.
Danach einen neuen Menüpunkt anlegen und auswählen, was wie verlinkt werden soll. Anschließend rechts unter "Systemparameter" bei den "Menüicons" das Icon auswählen.

Damit das Icon nun aber wirklich angezeigt wird, müssen im zugehörigen Modul einige Einstellungen gemacht werden. Also über das Pulldownnenü "Erweiterungen --> Module" gehen und das zugehörige Modulmenü editieren. 
Unter "Andere Parameter" gibt es oben die

  • Menüicons anzeigen: JA (das ist der wichtigste. Steht hier NEIN, ist es egal, was in den anderen Punkten eingestellt wird)
  • Menüicon-Ausrichtung:   Links / Rechts (Auf den Menütext bezogen)
  • Menüicon statt Link - Wenn nur Grafik und überhaupt kein Text angezeigt werden soll, dann hier JA einstellen.

Der Nachteil ist zweierlei:

  1. Besteht der Menüpunkt aus Text und Icon, ist das Icon nicht anklickbar
  2. Gibt es nur ein Icon kann kein Hover-Effekt eingestellt werden

Um aber einen Hover-Effekt dennoch zu nutzen, entweder in der CSS-Datei einen einfachen Rahmen oder Unterstrich vergeben, der sich um das Icon legt oder das Menü muss als "Liste" eingebunden werden. Wenn das gemacht wird, kann jeder einzelne Menüpunkt über die CSS-Datei angesprochen werden und somit mittels Hintergrundgrafiken das Menü individuell gestaltet werden.

Um die zugehörigen Klassen herauszufinden, muss man zunächst in die Menüübersicht gehen. Ganz rechts steht die ItemID zu den einzelnen Menüpunkten. Die CSS-Klasse setzt sich aus dem Wort "item" und der ItemID des Menüpunktes zusammen. Also beispielsweise "item1".
Wenn man den Quelltext anschaut, dann findet man auch diese Klassenangabe wieder. Das sieht dann in etwa so aus im Quelltext:

<ul class="menu">
<li id="current" class="active item1">
<a href="http://www.time4joomla.de/">
<span>time4joomla</span>
</a>
</li>

"active" kennzeichnet übrigens den gerade angeklickten Menüpunkt. In der CSS-Datei kann man nun also direkt entsprechende Grafiken/Icons zuweisen:

// Für alle Menüpunkte
ul.menu a:link, 
ul.menu a:visited {
background:url(MeineMenüHintergrundGrafik.jpg);
}
ul.menu a:hover{
background:url(MeineMenüHintergrundGrafikWennDieMausÜberDenMenüpunktBewegtWird.jpg);
}
// Für den aktiven Menüpunkt
li#current.active {
background:url(MeineMenüHintergrundGrafikWennDerMenüpunktAktivIst.jpg);
}
 
// Für einzelne Menüpunkte
 ul.menu li.item1 a:link, 
 ul.menu li.item1 a:visited {
 background:url(MeineMenüHintergrundGrafik.jpg);
 }
ul.menu li.item1 a:hover{
background:url(MeineMenüHintergrundGrafikWennDieMausÜberDenMenüpunktBewegtWird.jpg);
}

Das "Geheimnis" sitzt also in der Angabe "li.item1". Der ganze Aufbau ist eine Verschachtelung: Zunächst wird nachgeschaut, ob es sich bei dem HTML-Tag "ul" um die Klasse"menu" handelt. Wenn ja, wird überprüft, ob "li" der Klasse "item1" angehört. Wenn auch das mit ja zu beantworten ist, wird dem anschließenden "a:link" die entsprechende Formatierung zugeordnet.

 

Fertige Module

Neben den Bordmitteln gibt es aber einge fertige Module, die einem die Arbeit abnehmen und teilweise nette Effekte umsetzen. Dazu einfach mal hier stöbern gehen:

Joomla Menü-Extensions

 





  • duck

    Geschrieben am 2010-03-08 14:09:25

    Kenne mich jetzt nicht mit Joomla! sehr gut aus. Aber dies mit dem item1 verwirrt micht. Ich nehme an das item1 ... item44 Dynamisch erzeugt werden, wenn man ein Menupunkt erstellt. Also wenn ich Manuell ein Menu hinzufüge muss ich die css Datei anpassen, da ein neues itemX hinzugekommen ist. Oder liege ich falsch?
    Darum macht es für mich kein Sinn itemX im css zu deklarieren. (?)

    Auf Kommentar antworten

    • Axel Tüting

      Geschrieben am 2010-03-08 19:40:42

      Die Menü-ID wird einmalig am Anfang, also bei Neuerstellung eines entsprechenden Menüs dynamisch vergeben und bleibt danach bestehen.
      Wie ich schrieb, setzt sich der Aufruf aus dem Wort "item" und der Menü-ID zusammen. Die Menü-ID wird natürlich nicht bei jedem Neustart von Joomla neu erzeugt, weil unter eben dieser ID die entsprechenden Einstellungen in der Datenbank gespeichert sind.

      Auf Kommentar antworten

    • Axel Tüting

      Geschrieben am 2010-03-08 19:44:32

      Ergänzend: Es geht um die individuelle Formatierung eines einzelenen Menüpunktes. Ist der nich nicht angelegt, ist es natürlich völlig sinnlos den schon zu formatieren. Deshalb ist die einmalige dynamische Vergabe kein Problem. Will man alle Menüpunkte gleich formatieren, benötigt man die "itemID dafür nicht. Dafür gibt es andere Klassen.

      Axel

      Auf Kommentar antworten

  • duck

    Geschrieben am 2010-03-09 00:21:01

    Ein Otto-normal User hat dann also ein Problem, wenn das Menü ergänzt wird. Da eine neue item-ID generiert wird die noch nicht im css definiert ist. Habe ich es doch richtig verstanden.
    Besten DANK für die Antwort!
    Bin auf der Suche auf einer Globalen Lösung. Teilweise habe ich es hin bekommen. ;-)
    mfg duck

    Auf Kommentar antworten

    • Axel Tüting

      Geschrieben am 2010-03-09 00:37:51

      Sorry, aber hast du nicht verstanden. Es geht hier um die individuelle Anpassung eines einzelnen Menüpunktes. Wie willst du das global definieren, wenn es darum geht, eben nicht global zu arbeiten, sondern individuell. Das ist der Inhalt dieses Tutorials. Das was du machen möchtest ist doch der normale Weg in Joomla, für die es einfache Standardlösungen gibt.

      Geh mal zu den "Nützlichen Links" und schau dir die Open Books an, da wird das genau erklärt.
      Man muss sich manchmal erst mal etwas mit der Materie beschäftigen, bevor man versteht, um was es geht.

      Du bist hier eigentlich im falschen Tutorial. Eben weil das hier exakt beschreibt, wie man die globale Formatierung umgehen kann ;-)

      Die globale Lösung hängt vom Template und verwendeten Menüstil ab. mit "a.mainlevel" beispielsweise bist du im globalen Bereich oder mit "ul.menu". Wie gesagt: es hängt ein wenig von deinen Einstellungen ab.


      Axel

      Auf Kommentar antworten

  • Martina

    Geschrieben am 2010-04-04 21:19:00

    Genau so etwas habe ich gesucht!!! Nun verstehe ich endlich was es mit dem Item eigentlich auf sich hat - ich hatte vorher im von Joomla erzeugten html-code nach diesen Klassen gesucht.........
    Also vielen Dank für die super Erklärung hierzu- nach studenlangem Suchen ist das hier die erste Seite wo ich es gefunden habe!!!

    Auf Kommentar antworten

  • Arne

    Geschrieben am 2010-04-16 10:29:20

    Hi, ich hab da ein Problem:

    Unter Module/Andere Parameter steht bei mir jetzt:
    Menüicons anzeigen: JA
    Menüicon-Ausrichtung: Links
    Menüicon statt Link - JA

    ABER: unter "Systemparameter" bei den "Menüicons" kann ich ausschließlich
    "Nicht verwenden auswählen"

    Was ist da falsch eingestellt ??
    (Joomla 1.5.15 GER, PHP 5.2.5)

    Danke für Hilfe!

    Arne

    Auf Kommentar antworten

    • Axel Tüting

      Geschrieben am 2010-04-16 12:35:31

      Und du hast deine Icons mit der Ändung jpg, gif oder png auch in dieses Verzeichnis abgelegt:
      "/images/stories"?

      Auf Kommentar antworten

  • RonREin

    Geschrieben am 2010-07-08 12:30:14

    Hi

    ich hab das Problem, das zwischen den icons immernoch der Text angezeigt wird, obwohl ich nur icons angeklickt habe. Kann das daran liegen, weil ich horizontal, statt Liste gewählt habe? Kennt jemand das cassrina hover image Modul? Damit geht das auch, hat nur den Nachteil, das bei gedrückten Icon und splitmenüverwendung, das highlighting nicht mehr übergeben wird. Falls du da vielleicht Idee hast? Aber ich Versuch mal ne Lösung mit deinen Ansätzen, vielen dank

    Auf Kommentar antworten

    • time4mambo

      Geschrieben am 2010-07-08 12:41:29

      ZITAT
      Kann das daran liegen, weil ich horizontal, statt Liste gewählt habe?
      ---------

      Das kann sein ;-)
      Ansonsten bitte beachten, dass das hier kein Supportforum ist - einfach mal die Startseite zu diesem Thema durchlesen ;-)


      Axel

      Auf Kommentar antworten

  • damian

    Geschrieben am 2010-08-30 22:02:04

    Hallo Alex,

    Ich habe das Problem: wenn ich Menuicons anzeigen lasse, dann habe ich kein span-tag mehr unten sondern img-tag mit dem engegeben Icon:

    ul class="menu">
    li id="current" class="active item1">
    a href="http://www.time4joomla.de/">
    span>time4joomla
    /a>
    /li>

    eigentlich brauche ich für jedes item bei active-Zustand ein anderes Icon. Hast Du eine Lösung dafür?

    Besten Dank
    damian

    Auf Kommentar antworten

  • damian

    Geschrieben am 2010-08-31 00:29:23

    Entschuldige Axel,

    auf der Suche nach der Lösung habe ich mir die Seite nicht genauer angeschaut.
    Sorry auch für die Nameverwechselung (peinlich).

    Alles Gute

    Auf Kommentar antworten

  • Ute

    Geschrieben am 2010-10-22 14:12:14

    Ahhhhhhhhhhhhh, Axel, genau das hab ich gesucht, seit 3 Tagen. Schluchz. Hätt ich doch gleich bei dir auf den Seiten geguckt *umflausch*

    Auf Kommentar antworten

  • Alex3457

    Geschrieben am 2011-02-06 06:44:31

    Ich habe die Ausrichtung auf Liste gesetzt und die Bilder sind Anklickbar geworden!!! Super. Jetzt Funktionierts!

    Auf Kommentar antworten

  • Sylvana

    Geschrieben am 2011-02-18 12:20:38

    Vielen Dank! Das Tutorial hat mir gut und schnell geholfen! Weiter so!

    Auf Kommentar antworten

Veroeffentlichen Sie ihre Kommentare ...

Suchen Sie einen Webhoster? time4joomla empfiehlt: www.Joomlahosting.de
Joomla ist ein freies CMS - Webdesign, Programming and Content by time4mambo
PR nur für diese Seite: SEO Tools

nach oben scrollen

www.time4joomla.de is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.