Tutorial Mega Navi - von designmodo.com - hier meine Demo-Seite mit der Original-CSS

Die Änderung der CSS und des Codes für die Navigation ist nur für fortgeschrittene Benutzer geeignet. Lest auch meine Bemerkungen.

Bitte guckt Euch zunächst das Beispiel und den Download für dieses Navigations-Menü auf der Seite von designmodo.com an.

Dieses Turorial zeigt lediglich meine CSS, die Ihr hier sehen könnt, die ich mit einigen /* Kommentaren */ versehen habe sowie den Code meiner Navi unten.

Hier meine CSS-Datei, die Ihr mit der > rechten Maustaste > Seite speichern unter > downloaden könnt. Die Verlinkung zu der CSS-Datei gehört in die HTML des Layouts.

> Layout markieren > Fenster Layout-Eigenschaften > Button “HTML” > “Zwischen Head Tags

Bitte achtet auf die korrekte relative Pfadangabe - hier von meiner Startseite in ein von mir erstelltes Verzeichnis “css” - daher nur mit einem Punkt ./

<link rel="stylesheet" href="./css/stylenavi.css">

Das Bild für die Lupe (search-icon.png) habe ich in ein Verzeichnis “img” kopiert - diese Datei wird in der CSS angesprochen.

Lupe als search-icon.png

Hier mein Skript für die Navigation der Startseite, die in den HTML-Code Editor eines Textfeldes gehört - ohne meine Codes zur Suche.

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

<div id="menu-wrapper">
    <ul class="nav">
   
        <li>
            <a href="#">Beispiel 1</a>
            <div>
                <div class="nav-column">
                    <h3>Alles ohne Links</h3>
                    <ul>
                        <li><a href="#">Pampers Diapers</a></li>
                        <li><a href="#">Huggies Diapers</a></li>
                        <li><a href="#">Seventh Generation</a></li>
                        <li><a href="#">Diapers</a></li>
                        <li><a href="#">Derbies</a></li>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                        <li><a href="#">Loafers</a></li>
                    </ul>
                </div>
               
                <div class="nav-column">
                    <h3>Home</h3>
                    <ul>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                        <li><a href="#">Loafers</a></li>
                    </ul>
                   
                    <h3>Home</h3>
                    <ul>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                        <li><a href="#">Loafers</a></li>
                    </ul>
                </div>
               
                <div class="nav-column">
                    <h3>Home</h3>
                    <ul>
                        <li><a href="#">Pampers Diapers</a></li>
                        <li><a href="#">Huggies Diapers</a></li>
                        <li><a href="#">Seventh Generation</a></li>
                        <li><a href="#">Diapers</a></li>
                        <li><a href="#">Derbies</a></li>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                        <li><a href="#">Loafers</a></li>
                    </ul>
                </div>
               
                <div class="nav-column">
                    <h3 class="orange">Related Categories</h3>
                    <ul>
                        <li><a href="#">Pampers Diapers</a></li>
                        <li><a href="#">Huggies Diapers</a></li>
                        <li><a href="#">Diapers</a></li>
                    </ul>
                   
                    <h3 class="orange">Brands</h3>
                    <ul>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                    </ul>
                </div>
            </div>
        </li>
       
        <li>
            <a href="#">Links</a>
            <div>
                <div class="nav-column">
                    <h3 class="orange">NOF Forum & Schule</h3>
                    <ul>
                        <li><a href="http://www.nof-schule.de/forum/" target="_blank">NOF Forum</a></li>
                        <li><a href="http://www.nof-forum.com/nof-anleitung/" target="_blank">Anleitungen im Blog</a></li>
                        <li><a href="http://www.nof-schule.de/" target="_blank">NOF-Schule</a></li>
                        <li><a href="https://www.facebook.com/NofSchule" target="_blank">Facebook Seite</a></li>
                    </ul>
                </div>
               
                <div class="nav-column">
                    <h3>Social Network Tommy</h3>
                    <ul>
                        <li><a href="https://www.facebook.com/NOF.Tutorials" target="_blank">Facebook</a></li>
                        <li><a href="https://plus.google.com/110484875499307754970/posts" target="_blank">Google +</a></li>
                        <li><a href="http://www.youtube.com/channel/UC4bOLym2XlmltUAIP8dGkLA" target="_blank">YouTube</a></li>
                    </ul>
                   
                    <h3>Gästebücher Tommy</h3>
                    <ul>
                        <li><a href="http://www.tommyherrmanndesign.com/nof/html/nof-gast.php">Gästebuch NOF</a></li>
                        <li><a href="http://www.nof-tutorials.com/Gastbuch-Webbausteine/">Gästebuch MySQL</a></li>
                    </ul>
                </div>
               
                <div class="nav-column">
                    <h3>NetObjects Fusion</h3>
                    <ul>
                        <li><a href="http://www.netobjects.de/" target="_blank">Deutsche Homepage</a></li>
                        <li><a href="http://www.netobjects.de/html/downloads.html" target="_blank">Downloads</a></li>
                    </ul>
                </div>
            </div>
        </li>
       
        <li>
            <a href="#">Beispiel 2</a>
            <div>
                <div class="nav-column">
                    <h3 class="orange">Alles ohne Links</h3>
                    <ul>
                        <li><a href="#">Pampers Diapers</a></li>
                        <li><a href="#">Huggies Diapers</a></li>
                        <li><a href="#">Diapers</a></li>
                    </ul>
                   
                    <h3 class="orange">Brands</h3>
                    <ul>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                    </ul>
                </div>
               
                <div class="nav-column">
                    <h3>Home</h3>
                    <ul>
                        <li><a href="#">Pampers Diapers</a></li>
                        <li><a href="#">Huggies Diapers</a></li>
                        <li><a href="#">Seventh Generation</a></li>
                        <li><a href="#">Diapers</a></li>
                        <li><a href="#">Derbies</a></li>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                        <li><a href="#">Loafers</a></li>
                    </ul>
                </div>
               
                <div class="nav-column">
                    <h3>Home</h3>
                    <ul>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                        <li><a href="#">Loafers</a></li>
                    </ul>
                   
                    <h3>Home</h3>
                    <ul>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                        <li><a href="#">Loafers</a></li>
                    </ul>
                </div>
               
                <div class="nav-column">
                    <h3>Home</h3>
                    <ul>
                        <li><a href="#">Pampers Diapers</a></li>
                        <li><a href="#">Huggies Diapers</a></li>
                        <li><a href="#">Seventh Generation</a></li>
                        <li><a href="#">Diapers</a></li>
                        <li><a href="#">Derbies</a></li>
                        <li><a href="#">Driving shoes</a></li>
                        <li><a href="#">Espadrilles</a></li>
                        <li><a href="#">Loafers</a></li>
                    </ul>
                </div>
            </div>
        </li>
       
        <li><a href="./Tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="http://www.nof-tutorials.com/Mega-Navigation-Original/">Navi Original</a></li>
        <li><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php">Themen</a></li>
       
        <!-- Kommentar: Dieses Suchen-Formular muss einen ‘action’ Link zu einem Skript für die Suche erhalten, damit es funktioniert -->
        <li class="nav-search">
            <form action="#">
                <input type="text" placeholder="Suchen...">
                <input type="submit" value="">
            </form>
        </li>

       
    </ul>
</div>

 

Bemerkungen zur Funktion auf mobilen Geräten:

Ich habe hier diese “transition” Anweisungen aus der Class “.nav > li > div” meiner CSS-Datei entfernt - auskommentiert mittels /* ...  */  - da sonst die Ausklappnavi auf manchen mobilen Geräten nicht funktioniert. Guckt Euch den Unterschied mit dieser Anweisung auf meiner Demo-Seite an.

/* -webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s; */

Anstelle dessen habe ich hier, mittels meiner in NOF 2013 ohnehin vorhandenen jQuery Datei, ein zusätzliches Skript verwendet, das die Navi weich ausklappen lässt. Dieses Skript gehört in die HTML der Seite an das Ende vom <body>, also hinter die jQuery-Datei von NOF. Wenn Ihr das nicht benötigt, dann könnt Ihr das auch weglassen.

> Layout markieren > Fenster Layout-Eigenschaften > Button “HTML” > “Ende des Haupttextes

<script>
   $(document).ready(function() {
      $(".nav li:has(ul)").hover(function(){
         $(this).find("ul").slideDown();
      }, function(){
         $(this).find("ul").hide();
      });
   });
</script>

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik