Responsive und Slick Navigation mit SmartMenus vertikal

 

 

Diese Seite hat keinen Layoutbereich.

Sie wird dagegen nur mit einer Style-Anweisung im <body> responsive, so wie in meiner “Tutorial Seite” beschrieben.

Der Layout von NOF hat hier folgendes DIV erhalten.

Am “Beginn des Haupttextes” <body>

<div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%;">

Schließt das DIV am “Ende des Haupttextes” </body> wieder:

</div>

 

Für diese Navigation habe ich die gleichen Dateien verwendet wie bei der horizontalen Navigation, die Ihr Euch an den Links unten downloaden könnt (rechte Maustaste > Ziel speichern unter)

Ich habe diese Dateien und die hier, für die vertikale Navigation geänderte, CSS und das JavaScript hier in unterschiedliche Verzeichnisse kopiert und folgende Verlinkungen für die SmartMenus Navigation in die HTML meiner Seite hinzugefügt. Achtet auf die korrekten relativen Pfadangaben.

> “Beginn des Haupttextes” <body> (nach dem DIV für die absolute Position)

    <!-- SmartMenus jQuery plugin -->
    <script type="text/javascript" src="../jquery.smartmenus.js"></script>

    <!-- SmartMenus jQuery Keyboard Addon -->
    <script type="text/javascript" src="../addons/keyboard/jquery.smartmenus.keyboard.js"></script>

    <!-- vertikale Navigationsleiste -->
    <style type="text/css">
    @media (min-width: 800px) {
        #main-menu {
            float: left;
            margin-left:2px;
            width: 12em;
        }
    }
    </style>

    <!-- SmartMenus jQuery init vertical-->
    <script type="text/javascript">
        $(function() {
            $('#main-menu').smartmenus({
                mainMenuSubOffsetX: 1,
                mainMenuSubOffsetY: -8,
                subMenusSubOffsetX: 1,
                subMenusSubOffsetY: -8
            });
        });
    </script>

    <!-- SmartMenus core CSS -->
    <link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />

    <!-- "sm-blue" menu theme -->
    <link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />

 

Nun sieht die Text-Navigation mit den entsprechenden CSS-Klassen genauso aus, wie bei meiner horizontalen Navigation, nur dass die Class der ul id="main-menu" eine andere ist:

<ul id="main-menu" class="sm sm-vertical sm-blue">

> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Textfeld” > Button “HTML

Wegen der Größe meiner vertikalen Beispiel-Navigationsleiste guckt hier und ladet Euch diese Beispiel-Navigationsleiste herunter > rechte Maustaste > Ziel speichern unter. Vergesst nicht die Class für die vertikale Navigation zu ändern.

 

Hier noch eine Ansicht vom Handy, nachdem sich die Navigation durch die CSS auf vertikal angepasst hat.

SmartMenus vertikal am Handy

nach oben

Viel Erfolg!

Willkommen bei NOF-Tutorials.com