Tutorial jQuery - Navigation - NOF 2013 in HTML5 - ich beschreibe hier genau meinen Einbau. Alle Style-Anweisungen können natürlich geändert werden

Bitte fügt zunächst die notwendigen Links zu den jQuery-Dateien ein. Es ist notwendig diese Dateien in den <>Code Editor der jeweiligen Seite einzufügen, den Ihr unten links auf jeder Arbeitsseite findet. Diese Skripte korrespondieren nicht mit den NOF eigenen Javascripts. Fügt diese Verlinkungen dort in den [customs4] Bereich ein, damit diese unter den JS-Dateien von NOF stehen.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Nun fügt Ihr folgende Style-Anweisung in die HTML des Layouts ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen.

<style>
   .ui-menu { width: 150px; }
</style>

Zieht Euch ein Textfeld an der Position, wo dieses Skript angezeigt werden soll, auf und fügt das Skript unten in den “HTML-Code Editor” des Textfeldes ein.

Natürlich müsst Ihr die Links mit Euren Links ersetzen und Ihr könnt die <ul> und <li> Tags nach Belieben anders anordnen.

<script>
    $(function() {
     $( "#menu" ).menu();
    });
</script>

<ul id="menu">
    <li class="ui-state-disabled"><a href="#">Kleine Navigation</a></li>
    <li><a href="http://www.nof-tutorials.com/">NOF Tutorials</a></li>
    <li>
     <a href="http://www.tommyherrmanndesign.com/nof/index.html">NOF Hilfe Seite</a>
     <ul>
      <li class="ui-state-disabled"><a href="#">Unterseiten</a></li>
      <li><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php">Themen</a></li>
      <li><a href="http://www.nof-tutorials.com/Kommentare/">Kommentare</a></li>
      <li><a href="https://www.facebook.com/NOF.Tutorials/">Facebook</a></li>
      <li><a href="https://plus.google.com/110484875499307754970/posts">Google+</a></li>
     </ul>
    </li>
    <li><a href="http://www.tommyherrmanndesign.com/nof/html/nof-gast.php">G&auml;stebuch</a></li>
    <li>
     <a href="http://www.nof-schule.de/forum/" target="_blank">NOF Forum</a>
     <ul>
      <li class="ui-state-disabled"><a href="#">Unterseiten</a></li>
      <li><a href="http://www.nof-forum.com/nof-anleitung/" target="_blank">NOF Anleitungen</a></li>     
      <li>
       <a href="http://www.nof-schule.de/" target="_blank">NOF Schule</a>
       <ul>
        <li><a href="https://www.facebook.com/nof.forums" target="_blank">Facebook Forum</a></li>
        <li><a href="https://www.facebook.com/NofSchule" target="_blank">Facebook Schule</a></li>
       </ul>
      </li>
     </ul>
    </li>
</ul>

Guckt bitte für weitere Einstellungen hier: jqueryui.com/menu/

nach oben

Viel Erfolg!