Tutorial CSS Menü Generator - von Werner-Zenk.de - ehemals Webbausteine.de

Vielen Dank an Werner von für diesen tollen Generator zur Erstellung einer CSS-Navigationsleiste. Hier als Beispiel auf einer responsiven Seite.

Nehmt Eure Einstellungen vor. Wenn Ihr “Smartphone Menü” wählt, wird eine Slick-Navigation mit Hamburger Button für Handys erstellt.

CSS-Menü Generator

Nach dem Klick auf den Button “Menü erstellen” wird der CSS-Code sowie der Quelltext für die Navigationsleiste generiert. Nun müsst Ihr lediglich diese Quelltexte in Eure NOF Seite kopieren.

Hier als Beispiel meine Navigationsleiste, die ich noch mit dem Code des alten Menü-Generators erstellt habe. Der Einbau bleibt aber gleich.

Fügt die CSS in die HTML Eurer Seite ein (Master-Rahmen oder Layout), die Ihr natürlich beliebig anpassen könnt.

> Master-Rahmen oder Layout markieren > im “Eigenschaften” Fenster > Button “HTML” > “Zwischen Head Tags

<style>
/* Navigation */
ul#navigation, #navigation ul {
 margin: 0;
 padding: 0;
 list-style-type: None;
 height: 32px;
}

#navigation li {
 float: Left;
 width: 152px;
 position: Relative;
}

#navigation li a {
 display: Block;
 width: 150px;
 line-height: 30px;
 text-align: Center;
 color: #FFFFFF;
 text-decoration: None;
 background-color: #202F52;
 border: 1px Solid #E0E0E0;
}

#navigation li a:hover {
 color: #FF0000;
}

#navigation li ul {
 display: None;
 position: Absolute;
 left: 0px;
 top: 32px;
 z-index: 100;
}

#navigation li:hover ul {
 display: Block;
}

#navigation li ul a {
 background-color: rgba(61, 88, 152, 0.80);
}

h1, p {
 clear: Left;
}
</style>

Für die Navigationsleiste zieht Ihr Euch ein Textfeld auf die Breite der von Euch verwendeten Buttons auf, bei mir sind das 6 Buttons je 152px - also 912px und fügt den Code in den HTML-Code Editor des Textfeldes ein.

Dabei ersetzt Ihr das Raute-Zeichen # jeweils mit Eurem Link und die Beschriftung mit Eurem jeweiligen Text. Die <li> Tags, die Ihr nicht benötigt, löscht Ihr einfach und/oder kopiert diese um weitere Menü-Punkte hinzuzufügen.

<li><a href="#">Item 1</a></li>

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen

<ul id="navigation">
 <li><a href="#">CSS Menü</a>
  <ul>
   <li><a href="https://werner-zenk.de/tools/css_menue_generator.php" target="_blank">Menü Generator</a></li>
  </ul>
 </li>
 <li><a href="./Tutorial/tutorial.html">Tutorial</a>
  <ul>
   <li><a href="#">frei 2.1</a></li>
   <li><a href="#">frei 2.2</a></li>
   <li><a href="#">frei 2.3</a></li>
   <li><a href="#">frei 2.4</a></li>
   <li><a href="#">frei 2.5</a></li>
   <li><a href="#">frei 2.6</a></li>
  </ul>
 </li>
 <li><a href=”#">Webbausteine.de</a>
  <ul>
   <li><a href="http://www.nof-tutorials.com/Nachrichten/">Nachrichten</a></li>
  </ul>
 </li>
 <li><a href="http://www.nof-schule.de/forum/" target="_blank">NOF-Forum</a>
  <ul>
   <li><a href="http://www.nof-forum.com/nof-anleitung/" target="_blank">Anleitungen im Blog</a></li>
  </ul>
 </li>
 <li><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php">Themen</a>
  <ul>
   <li><a href="http://www.tommyherrmanndesign.com/nof/html/go-neue-seiten.php">Neue Seiten</a></li>
   <li><a href="http://www.tommyherrmanndesign.com/nof/html/go-komponenten.php">Komponenten</a></li>
   <li><a href="http://www.tommyherrmanndesign.com/nof/html/go-sichere-seite.php">Sichere Seite</a></li>
   <li><a href="http://www.tommyherrmanndesign.com/nof/html/go-multimedia.php">Multimedia</a></li>
   <li><a href="http://www.tommyherrmanndesign.com/nof/html/go-navigation.php">Navigation</a></li>
   <li><a href="http://www.tommyherrmanndesign.com/nof/html/go-sicherheit.php">Sicherheit</a></li>
   <li><a href="http://www.tommyherrmanndesign.com/nof/html/go-sonstiges.php">Sonstiges</a></li>
   <li><a href="http://www.tommyherrmanndesign.com/nof/html/go-links.php">Links</a></li>
  </ul>
 </li>
 <li><a href="http://www.nof-tutorials.com/Linkliste/">Linkliste</a>
 </li>
</ul>

Somit habt Ihr eine perfekte CSS-Text-Navigation - einfacher geht es nicht mehr!

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik