Home Codes Loox
 

Wenn du auf einer Seite die Funktionen deiner Community vorstellst oder auf einer Seite eine Sammlung von "Extras" hast, eignet sich dieses Menü besonders gut, um die Inhalte übersichtlich zu verlinken.
Diese Anleitung zeigt dir, wie auch du so ein Menü machen kannst!

1. Schritt
 
Füge folgenden Code in eine Box ein, die ganz oben auf der Seite positioniert ist (diese Box sollte anschließend nicht mehr bearbeitet werden!):
<link href="/templates/core/pages/modules/admin/admin.css" rel="stylesheet"/>
 
Alternativ kannst du den Code auch in eines der Werbebereiche einfügen!
Dann brauchst du den Code nicht auf jeder Seite, wo du das Menü verwendest, einzeln einzufügen.
2. Schritt
 
Lege eine Box darunter an.
In dieser Box wird nun das Menü angelegt.
 
Das Menü ist in Zeilen und Spalten unterteilt. Mir folgendem Code beginnst du eine neue Zeile:
<ul class="list_admin_options">
 
Nachdem du eine Zeile geöffnet hast, folgen erst die Spalten.
Um die Zeile später zu schließen, musst du folgendes hinten anhängen:
</ul>
3. Schritt
 
Um einen neuen Punkt in einer Zeile anzulegen, verwende bitte folgenden Code:
<li><a href="LINK" style="background-image:url(ICON)"><strong class="color1">TITEL</strong><br/>BESCHREIBUNG</a></li>
 
Ersetze nun LINK durch die Adresse der Seite, wohin dieser Punkt verlinken soll.
Das ICON musst du durch die Grafik-Adresse des Icons ersetzen, welches angezeigt werden soll.
Dieses sollte 32x32px groß sein! Icons findest du z.B. auf iconfinder.com!
Der TITEL wird blau und unterstrichen angezeigt. Gib hier den Namen des Inhalts an.
Die BESCHREIBUNG ist der graue, kleingeschriebene Text. Erkläre kurz, worum es sich bei dem Inhalt handelt.
 
Füge diesen Code direkt nach dem Anfang der Zeile ein, die in Schritt #2 angelegt wurde.
Du kannst (bei Standardbreite des Contentbereichs) 3 solche Menüpunkte nebeneinander anzeigen lassen.
Nachdem du 1-3 Punkte in diese Zeile gepackt hast, darfst du nicht vergessen, die Zeile mit dem unter Schritt #2 angegebenen Code zu schließen!
4. Schritt
 
Bevor du eine neue Zeile anfängst, solltest du folgenden Code einfügen:
<div class="clear">&nbsp;</div>
 
Anschließend kannst du wieder bei Schritt #2 ansetzen und eine neue Zeile öffnen.
Setze dann wieder einige Punkte in die Zeile und schließe diese wieder.
Wenn du dann noch eine Zeile anlegen möchtest, verwende zuvor den bei Schritt #4 angegebenen Code!

So sollte dein Code aussehen, wenn du 2 Zeilen mit je 3 Menüpunkten haben möchtest (die Platzhalter zuvor auswechseln!):

<ul class="list_admin_options">
<li><a href="LINK" style="background-image:url(ICON)"><strong class="color1">TITEL</strong><br/>BESCHREIBUNG</a></li>
<li><a href="LINK" style="background-image:url(ICON)"><strong class="color1">TITEL</strong><br/>BESCHREIBUNG</a></li>
<li><a href="LINK" style="background-image:url(ICON)"><strong class="color1">TITEL</strong><br/>BESCHREIBUNG</a></li>
</ul>
<div class="clear">&nbsp;</div>
<ul class="list_admin_options">
<li><a href="LINK" style="background-image:url(ICON)"><strong class="color1">TITEL</strong><br/>BESCHREIBUNG</a></li>
<li><a href="LINK" style="background-image:url(ICON)"><strong class="color1">TITEL</strong><br/>BESCHREIBUNG</a></li>
<li><a href="LINK" style="background-image:url(ICON)"><strong class="color1">TITEL</strong><br/>BESCHREIBUNG</a></li>
</ul>

Fragen können im Kommentarbereich gestellt werden ;-)

Vor 9 Jahren
 
Menüpunkte wie im Adminbereich