Menüs mit runden Ecken PDF Drucken E-Mail
Joomla! 1.5: 03. Menüs u. Module > Menüs und Menüeinträge
Geschrieben am: Freitag, 5. September 2008

Frage:
Im rhuk_milkyway Template sehen die CSS-Klassen für die Menüs (Stil Liste) ziemlich kompliziert aus. Irgendwie habe ich noch nicht verstanden, warum in den einzelnen Klassen mehrere div's hintereinander stehen???

div.module_menu div div div {
    padding: 10px;
    ....
    }

div.module_menu div div div div {
    background: none;
    ...
   }


Antwort:
Gute Nachricht! Die Formatierung eines Menüs mit dem Menüstil "Liste" ist im "Normalfall" wesentlich einfacher, als es die CSS-Angaben im "rhuk_milkyway"-Template vermuten lassen.

Warum?
Für die Menüs in der linken Spalte des "rhuk_milkyway"-Templates ist in der "index.php" Datei in den Befehlen zum Einbinden der Menüs zusätzlich der style="rounded" angegeben.

<jdoc:include type="modules" name="left" style="rounded" />

Menüs mit runden Ecken

Der style="rounded" ist neu in J! 1.5!

Damit lassen sich die Menüs mit "runden Ecken" ausgeben. Die  "runden Ecken" sind gleichzeitig auch der Grund dafür, warum die CSS-Angaben im "rhuk_miklyway" ziemlich komplex sind, in den Klassen mehrere div's hintereinander angegeben werden.

********************************

Menüs ohne runden Ecken

Für ein Menü mit dem Menüstil "Liste" OHNE runde Ecken fallen die CSS-Angaben also wesentlich charmanter aus. Dann fallen die mehrfachen div-Angaben in den CSS-Klassen weg.
(Siehe Schaubild - in Orange gekennzeichnet)

Das Menü lässt sich dann einfach über die Listenelemente formatieren:

<ul class="menu">
<li><a>Menüpunkt</a></li>
</ul>

In der CSS-Datei wären dann nur noch die folgenden Klassen notwendig:ul.menu {
    margin: 10px 0;
    padding-left: 10px;
    list-style: none;
}

ul.menu li a:link,
ul.menu li a:visited
    {
    font-weight: bold;
    background: #0F0;
    }

ul.menu li a:hover
    {
    font-weight: bold;
    background: #F00;
    }


Welche Klassen für ein Menü (Menüstil: Liste) OHNE runde Ecken im Einzelfall notwendig sind, hängt natürlich von der vorgesehenen Formatierung des Menüs ab. Also die oben angegebenen CSS-Klassen nur exemplarisch zu verstehen Smile

Lieben Gruß und weiterhin viel Spaß.
Kerstin

 
< zurück   weiter >

Kurze URL: www.joomla-workshop.de/content/view/500/117
| joomla-workshop.de ist ein projekt von portal 2 | Zum Seitenanfang