Navigation auch oben

Schritt 1 :

• mit dem CSS-Code bekommt das Menü sein aussehen
• Einfügen im Feld "Text über Design"
• noch vor dem --> </style>

/* Feld für das Menu */
ul.neues_menu {
  width: 700px;
  position: absolute; 
  margin: 70px 0px 0px 170px;
  overflow: hidden;}

.neues_menu ul li {list-style-type:none;}

/* Menü-Felder */		
li.menu_1, li.menu_2, li.menu_3, li.menu_4  {
  float: left; 
  margin-right: 8px;   /* Abstand zwischen Buttons */
  }

/* das Aussehen der 4 Links */
li.menu_1 a, li.menu_2 a, li.menu_3 a, li.menu_4 a {
  display: block;
  width: 148px;
  height: 20px; 
  line-height: 20px; 
  margin: 30px 0px 0px 0px;
  color: #cccccc; 
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: all 0.5s ease; 
  background-color: #343434;  /* = Hintergrundfarbe*/
  border: 1px solid #555555;  /* = Rahmen */
  border-radius: 10px 10px 0px 0px;/* = gerundete Ecken */ }
		
/* Der Hover Effekt fuer die Links */
li.menu_1 a:hover, li.menu_2 a:hover, li.menu_3 a:hover, li.menu_4 a:hover {
  font-size:15px;
  margin-top: 20px 0px 0px 0px;
  padding: 5px 0px 5px 0px;
  color: #ffffff;
  background-color: #6f8ac4; }

Schritt 2: Ein DIV um das Design

• beim verkleinern des Browsersfensters verhindern wir damit ein verschieben
• Einfügen im Feld "Text über Design", nach dem --> </style>
• das DIV muss die Breite bekommen, die auch dein Design hat

<div style="width:980px; overflow:hidden; margin:auto;>

Das DIV schliessen im Feld "Text UNTER Design" mit </div>

Schritt 3: HTML-Code für Menü

• Einfügen im Feld "Text über Design", gleich nach dem DIV aus Schritt 2

<ul class="neues_menu">
<li class="menu_1"> <a href="HIER LINK">TEXT</a> </li>
<li class="menu_2"> <a href="HIER LINK">TEXT</a> </li>
<li class="menu_3"> <a href="HIER LINK">TEXT</a> </li>
<li class="menu_4"> <a href="HIER LINK">TEXT</a> </li>
</ul>

Schritt 4 : Navigation verschieben

Siehe im 1. Code das ul.neues_menu {
dort finden wir das margin: 70px 0px 0px 170px;

- Menü nach Links / Rechts verschieben ? 170px verkleinern, oder erhöhen.
- Menü Höher / Tiefer setzen ? Der Erste Wert 70px . Je Höher die Zahl, desto tiefer.

---

Ergänzung für Navigation oben :

Button der aufgerufenen Seite farblich hervorheben.
Die 4 Seiten, die in der "Navi oben" verlinkt sind, bekommen als Inhalt
die CSS-Eigenschaften, die auch das a:hover bekommen hat.

• auf "Eigene Seiten editieren"
• wähle die erste Seite aus, die Du oben verlinkt hast
• nun ist die Seite zum bearbeiten offen
• oben im Editor auf Quellcode klicken
• deine Seite ist nun in der HTML-Ansicht
• füge nun zu Beginn der Seite folgende CSS-Anweisung ein :

<style type="text/css">
<!--
li.menu_1 a {
   font-size: 15px !important;
   background-color: #800000 !important;
   margin: 20px 0px 0px 0px !important;
   padding: 5px 0px 5px 0px !important;
   color: #FFFFFF!important; }
-->
</style>

• Seite 2 bekommt den gleichen Code mitli.menu_2 a{ vorweg
• Seite 3 bekommt gleichen Code mit li.menu_3 a{ vorweg
• Seite 4 bekommt gleichen Code mit li.menu_4 a{ vorweg

---

Möglichkeit 2: Das " Coolmenü"

Wer oben eine Navigation wünscht , die bei Mauskontakt ausfährt / ausklappt,
der sollte sich diese Beschreibung von mir ansehen ansehen

Die Ausklappbaren Menü's nennen sich auch Dropdown-Menu   oder Coolmenu .
Da der Baukasten immer ein eigenes Menü besitzt, muss das externe "Coolmenü" auf das Baukasten-Design platziert werden. Siehe in der Beschreibung.