Menu in Box

Men� in rechter Box

In der Navigation (Oben) passen nicht alle Seiten nebeneinander.
Wir k�nnen in der rechten Box ein weiteres Men� einf�gen.

Schritt 1: HTML-Code f�r Rechte Box

- auf "Design" klicken
- auf "Designeinstellungen"
- nun unten auf "erweiterte Einstellungen anzeigen"
- dort findet Ihr das Feld "1. rechte Box". Ihr f�gt folgenden HTML-Code ein:

<ul class="menu">
<li class="link"> <a href="/Seitentitel.htm">Hier Text</a> </li>
<li class="link"> <a href="/Seitentitel.htm">Hier Text</a> </li>
<li class="link"> <a href="/Seitentitel.htm">Hier Text</a> </li>
<li class="link"> <a href="/Seitentitel.htm">Hier Text</a> </li>
<li class="link"> <a href="/Seitentitel.htm">Hier Text</a> </li>
</ul>

F�ge die Seitentitel ein, auf die verlinkt werden soll.

Schritt 2: Der CSS-Code

- f�r die schlichte Liste kopiere dir diesen CSS-Code
- einf�gen im Feld "Eigener <head> - Inhalt":

ul.menu {
  list-style-type: square;
  padding-left: 25px; }

ul.menu li.link a {
  font-size: 14px;
  color: #343434;
  text-decoration: none;
  line-height: 30px; }

ul.menu li.link a:hover { color: chocolate; }

Liste mit eigenen Grafiken ?
- wenn Du eigene Grafiken verwenden m�chtest, verwende nur diesen CSS-Code,
- deine Grafikadresse kommt in die Klammern ( ) hinein
- einf�gen im Feld "Eigener <head> - Inhalt" (bei Extras) :

Beispiel 2: Mit eigener Grafik

Linktext 1
Linktext 2
Linktext 3
Linktext 4
Linktext 5

ul.menu {
  list-style-image: url(Grafikadresse);
  padding-left: 25px; }

/* Aufz�hlungspunkte entfernt */
ul.menu li {list-style-type: none;}

ul.menu li.link a {
  font-size: 14px;
  color: #343434;
  text-decoration: none;
  line-height: 30px; }

ul.menu li.link a:hover { color: navy; }

oder eine Liste mit den Pfeil-Grafiken des Baukastens:
- einf�gen im Feld "Eigener <head> - Inhalt" (bei Extras) :
- deine Grafikadresse kommt in die Klammern ( ) hinein

Beispiel 3: So sieht es aus

Linktext 1
Linktext 2
Linktext 3
Linktext 4
Linktext 5

ul.menu {
  list-style-type: none !important; 
  margin-left: 25px; }

ul.menu li.link {
  background: url(Grafikadresse) no-repeat;
  padding-left: 30px;
  height:40px; }

ul.menu li.link:hover {
  background: url(Hover Grafikadresse) no-repeat; }

ul.menu li.link a {
  font-size: 14px;
  color: #343434;
  text-decoration: none; }

ul.menu li.link a:hover { color: navy; }