[Gelöst] Multi-Ebenen-Menü mit slideout

[Grafkox]

Hallo zusammen,

ich bin dabei meine Seiten ein wenig zu pimpen und mal nach einem 1/2 Jahr mit meiner UI ein paar Neuerungen auszuprobieren.

Daher versuche ich gerade mir ein neues Menü für meine Mobile-Seite zu bauen. Ich würde dabei gerne mit zwei Ebenen in der Navigation arbeiten.

Dafür habe ich folgendes "gebastelt":

Code Auswählen Erweitern

<nav id="menu">
        <div data-type="link" class="default large top-space-2x left-space-3x"
           data-width="150"
           data-icon-left="fa-home"
           data-color="white"
           data-text-align="right"
           data-load="#content1"
           data-url="#content_temps.html"
           data-active-color="green"
           data-active-pattern="(.*index_nav_mobil.html|.*#content_temps.html)">HOME</div>
<section id="Raeume">       
<div onclick="$('html, body').animate({scrollTop: $('#Raeume').offset().top}, 500); if ($('#menu_raeume').is(':hidden')) { $('#menu_raeume').slideDown(500); } else { $('#menu_raeume').slideUp(500); }"
    data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-bars"
            data-color="white"
            data-text-align="right"
            data-load="#content2"
            data-url="#content_lights.html"
            data-active-color="green"
            data-active-pattern=".*#content_lights.html">R&Auml;UME</div>

<nav id="menu_raeume">
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
<div data-type="label" class="nocache large top-space-2x left-space-3x blue">Obergeschoss</div>
<div data-type="link" class="default large top-space left-space-3x"
   data-width="150"
   data-icon-left="fa-bed"
   data-color="white"
   data-text-align="right"
   data-load="#content1"
   data-url="#content_temps.html"
   data-active-color="white"
   data-active-pattern="(.*index_nav_mobil.html|.*#content_temps.html)">Niklas</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-bed"
data-color="white"
data-text-align="right"
data-load="#content2"
data-url="#content_lights.html"
data-active-color="green"
data-active-pattern=".*#content_lights.html">Dominik</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-bed"
data-color="white"
data-text-align="right"
data-load="#content3"
data-url="#content_windows.html"
data-active-color="green"
data-active-pattern=".*#content_windows.html">Schlafen</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-tint"
data-color="white"
data-text-align="right"
data-load="#content4"
data-url="#content_sounds.html"
data-active-color="green"
data-active-pattern=".*#content_sounds.html">Bad</div>
<div data-type="label" class="nocache large top-space-2x left-space-3x blue">Untergeschoss</div>
<div data-type="link" class="nocache large top-space left-space-3x"
data-width="150"
data-icon-left="ro-sofa"
data-color="white"
data-text-align="right"
data-load="#content4"
data-url="#content_sounds.html"
data-active-color="green"
data-active-pattern=".*#content_sounds.html">Wohnen</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-cutlery"
data-color="white"
data-text-align="right"
data-load="#content4"
data-url="#content_sounds.html"
data-active-color="green"
data-active-pattern=".*#content_sounds.html">K&uuml;che</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
data-width="150"
data-icon-left="ro-pc"
data-color="white"
data-text-align="right"
data-load="#content4"
data-url="#content_sounds.html"
data-active-color="green"
data-active-pattern=".*#content_sounds.html">B&uuml;ro</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
data-width="150"
data-icon-left="ma-wc"
data-color="white"
data-text-align="right"
data-load="#content4"
data-url="#content_sounds.html"
data-active-color="green"
data-active-pattern=".*#content_sounds.html">WC</div>   
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
</nav>

</section>
        <div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-cloud"
            data-color="white"
            data-text-align="right"
            data-load="#content3"
            data-url="#content_windows.html"
            data-active-color="green"
            data-active-pattern=".*#content_windows.html">WETTER</div>
        <div data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="ma-computer"
            data-color="white"
            data-text-align="right"
            data-load="#content4"
            data-url="#content_sounds.html"
            data-active-color="green"
            data-active-pattern=".*#content_sounds.html">SYSTEME</div>
    </nav>


Leider funktioniert es nicht ganz wie ich es mir vorstelle, da beim Klick auf Räume sich der die darunterliegende Navigation (2. Ebene) anfängt zu öffnen, aber sich gleichzeitig die Navigation der ersten Ebene wieder schließt.

Wie es aussehen soll, sollen die angehangenen Fotos zeigen.

Alternativ könnte ich mir auch eine 2. Ebene des Slideout Widgets vorstellen (Erweiterung des Menüs um eine weitere Ebene nach rechts), habe dafür aber noch keine Ansätze im Forum gefunden.

Über Hilfe würde ich mich sehr freuen.

Vielen Dank schonmals und viele Grüße

Thorsten

(Bitte im Code nicht von den falschen Werten bei data-load etc irritieren lassen, ich wollte zunächst die Funktion hinbekommen, bevor ich an diese Punkte rangehe)

[Grafkox]

Nabend zusammen,

bin nun einen Schritt weiter gekommen.

Zwischenzeitlich habe ich den section Ansatz wieder verworfen, da dadurch an der Stelle, an der sich das Untermenü öffnen sollte ein weißer Block ergeben hat.

Dafür habe ich es nun geschafft, Unterebenen mit weiteren nav - Blöcken zu hinterlegen.
Das Problem mit dem automatischem Schließen habe ich mit dem Widget "label" anstatt "link" hinbekommen.

Code Auswählen Erweitern

    <nav id="menu">
        <div data-type="link" class="default large top-space-2x left-space-3x"
           data-width="150"
           data-icon-left="fa-home"
           data-color="white"
           data-text-align="right"
           data-load="#content1"
           data-url="#content_temps.html"
           data-active-color="green"
           data-active-pattern="(.*index_nav_mobil.html|.*#content_temps.html)">HOME</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu').offset().top}, 500); if ($('#menu_raume').is(':hidden')) { $('#menu_raume').slideDown(500); } else { $('#menu_raume').slideUp(500); }"
data-type="label" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-bars"
            data-color="white"
            data-text-align="right"
            data-active-color="green"
            data-active-pattern=".*#content_lights.html">R&Auml;UME</div>

<nav id="menu_raume">
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); if ($('#menu_obergeschoss').is(':hidden')) { $('#menu_obergeschoss').slideDown(500); } else { $('#menu_obergeschoss').slideUp(500); }"
data-type="label" class="nocache large top-space-2x left-space-3x blue">Obergeschoss</div>
<nav id="menu_obergeschoss">
<div data-type="link" class="default large top-space left-space-3x"
           data-width="150"
           data-icon-left="fa-bed"
           data-color="white"
           data-text-align="right"
           data-load="#content2"
           data-url="#content_niklas.html"
           data-active-color="green"
           data-active-pattern=".*#content_niklas.html">Niklas</div>
        <div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-bed"
            data-color="white"
            data-text-align="right"
            data-load="#content3"
            data-url="#content_dominik.html"
            data-active-color="green"
            data-active-pattern=".*#content_dominik.html">Dominik</div>
        <div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-bed"
            data-color="white"
            data-text-align="right"
            data-load="#content4"
            data-url="#content_schlafen.html"
            data-active-color="green"
            data-active-pattern=".*#content_schlafen.html">Schlafen</div>
        <div data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-tint"
            data-color="white"
            data-text-align="right"
            data-load="#content5"
            data-url="#content_bad.html"
            data-active-color="green"
            data-active-pattern=".*#content_bad.html">Bad</div>
</nav>
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); if ($('#menu_untergeschoss').is(':hidden')) { $('#menu_untergeschoss').slideDown(500); } else { $('#menu_untergeschoss').slideUp(500); }"
data-type="label" class="nocache large top-space-2x left-space-3x blue">Untergeschoss</div>
<nav id="menu_untergeschoss">
<div data-type="link" class="nocache large top-space left-space-3x"
            data-width="150"
            data-icon-left="ro-sofa"
            data-color="white"
            data-text-align="right"
            data-load="#content6"
            data-url="#content_wohnen.html"
            data-active-color="green"
            data-active-pattern=".*#content_wohnen.html">Wohnen</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-cutlery"
            data-color="white"
            data-text-align="right"
            data-load="#content7"
            data-url="#content_kueche.html"
            data-active-color="green"
            data-active-pattern=".*#content_kueche.html">K&uuml;che</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="ro-pc"
            data-color="white"
            data-text-align="right"
            data-load="#content8"
            data-url="#content_buero.html"
            data-active-color="green"
            data-active-pattern=".*#content_buero.html">B&uuml;ro</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="ma-wc"
            data-color="white"
            data-text-align="right"
            data-load="#content9"
            data-url="#content_wc.html"
            data-active-color="green"
            data-active-pattern=".*#content_wc.html">WC</div>   
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
</nav>
</nav>

        <div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-cloud"
            data-color="white"
            data-text-align="right"
            data-load="#content10"
            data-url="#content_wetter.html"
            data-active-color="green"
            data-active-pattern=".*#content_wetter.html">WETTER</div>
        <div data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="ma-computer"
            data-color="white"
            data-text-align="right"
            data-load="#content11"
            data-url="#content_system.html"
            data-active-color="green"
            data-active-pattern=".*#content_system.html">SYSTEME</div>
    </nav>

Zwei Punkte gefallen mir nun noch nicht wirklich.

• kann man beim Widget "label" kein Bild ausgeben lassen?
• was müsste ich noch ergänzen, dass beim Aufruf eines Links (nach dem Schließen des Menüs) die Untermenüs ebenfalls wieder vollständig geschlossen werden?

Wäre für hilfreiche Tipps dankbar.

Viele Grüße

Thorsten

[n4rrOx]

Hab das bei mir so gelöst (siehe Anhang):

Code Auswählen Erweitern


<div class="left-align large top-space-2x left-space-3x" id="dropdownRaume" onclick="if ($('#Raume').is(':hidden')) { $('#Raume').slideDown(250); $('#Raume > i.fa').addClass('fa-rotate-180'); } else { $('#Raume').slideUp(250); $('#dropdownRaume > i.fa').removeClass('fa-rotate-180'); }">
<i class="mi mi-room bigger"></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Räume <i class="fa fa-angle-double-down large"></i>
</div>

<div id="Raume">
                        ...
                        </div>

Ich weiß .... nicht wirklich professionell mit den   aber .....
Problematik, dass sich die Divs nicht automatisch einklappen ist bei mir natürlich auch .... aber ich finde es so sogar besser.

[Grafkox]

Problematik, dass sich die Divs nicht automatisch einklappen ist bei mir natürlich auch .... aber ich finde es so sogar besser.

Auf einem Tablet ist das sicherlich kein Problem, aber bei der Mobile Version möchte ich weitestgehend ohne scrollen auskommen.

Habe mir noch einen Ansatz überlegt, den ich heute Abend nochmals ausprobieren werde und der ist, auf alle Auswahlmöglichkeiten ein onclick zu legen, der dann die Menüs bei Betätigung schließt.

Sollte der Test positiv verlaufen, wäre lediglich Kosmetik hinsichtlich des nicht funktionierenden "data-icon-left" beim Widget "label".

[Grafkox]

Nabend zusammen,

mein theoretischer Ansatz funktioniert tatsächlich wie gewünscht, daher anbei der finale Code um auch auf- und automatisch zuklappbare Bereiche im Menü einzubinden:
Vielleicht kann es ja noch wer gebrauchen 

Code Auswählen Erweitern

    <nav id="menu">
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="default large top-space-2x left-space-3x"
           data-width="150"
           data-icon-left="fa-home"
           data-color="white"
           data-text-align="right"
           data-load="#content1"
           data-url="#content_temps.html"
           data-active-color="green"
           data-active-pattern="(.*index_nav_mobil.html|.*#content_temps.html)">HOME</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu').offset().top}, 500); if ($('#menu_raume').is(':hidden')) { $('#menu_raume').slideDown(500); } else { $('#menu_raume').slideUp(500); }"
data-type="label" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-bars"
            data-color="white"
            data-text-align="right"
            data-active-color="green"
            data-active-pattern=".*#content_lights.html">R&Auml;UME</div>

<nav id="menu_raume">
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); if ($('#menu_obergeschoss').is(':hidden')) { $('#menu_obergeschoss').slideDown(500); } else { $('#menu_obergeschoss').slideUp(500); }"
data-type="label" class="nocache large top-space-2x left-space-3x blue">Obergeschoss</div>
<nav id="menu_obergeschoss">
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="default large top-space left-space-3x"
           data-width="150"
           data-icon-left="fa-bed"
           data-color="white"
           data-text-align="right"
           data-load="#content2"
           data-url="#content_niklas.html"
           data-active-color="green"
           data-active-pattern=".*#content_niklas.html">Niklas</div>
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-bed"
            data-color="white"
            data-text-align="right"
            data-load="#content3"
            data-url="#content_dominik.html"
            data-active-color="green"
            data-active-pattern=".*#content_dominik.html">Dominik</div>
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-bed"
            data-color="white"
            data-text-align="right"
            data-load="#content4"
            data-url="#content_schlafen.html"
            data-active-color="green"
            data-active-pattern=".*#content_schlafen.html">Schlafen</div>
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-tint"
            data-color="white"
            data-text-align="right"
            data-load="#content5"
            data-url="#content_bad.html"
            data-active-color="green"
            data-active-pattern=".*#content_bad.html">Bad</div>
</nav>
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); if ($('#menu_untergeschoss').is(':hidden')) { $('#menu_untergeschoss').slideDown(500); } else { $('#menu_untergeschoss').slideUp(500); }"
data-type="label" class="nocache large top-space-2x left-space-3x blue">Untergeschoss</div>
<nav id="menu_untergeschoss">
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache large top-space left-space-3x"
            data-width="150"
            data-icon-left="ro-sofa"
            data-color="white"
            data-text-align="right"
            data-load="#content6"
            data-url="#content_wohnen.html"
            data-active-color="green"
            data-active-pattern=".*#content_wohnen.html">Wohnen</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-cutlery"
            data-color="white"
            data-text-align="right"
            data-load="#content7"
            data-url="#content_kueche.html"
            data-active-color="green"
            data-active-pattern=".*#content_kueche.html">K&uuml;che</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="ro-pc"
            data-color="white"
            data-text-align="right"
            data-load="#content8"
            data-url="#content_buero.html"
            data-active-color="green"
            data-active-pattern=".*#content_buero.html">B&uuml;ro</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="ma-wc"
            data-color="white"
            data-text-align="right"
            data-load="#content9"
            data-url="#content_wc.html"
            data-active-color="green"
            data-active-pattern=".*#content_wc.html">WC</div>   
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
</nav>
</nav>

        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-cloud"
            data-color="white"
            data-text-align="right"
            data-load="#content10"
            data-url="#content_wetter.html"
            data-active-color="green"
            data-active-pattern=".*#content_wetter.html">WETTER</div>
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="ma-computer"
            data-color="white"
            data-text-align="right"
            data-load="#content11"
            data-url="#content_system.html"
            data-active-color="green"
            data-active-pattern=".*#content_system.html">SYSTEME</div>
    </nav>

Werde Betreff auch Multi-Ebenen-Menü umbenennen und auf gelöst setzen.

Zum Thema "data-icon-left" beim Widget "label" mach ich nochmal nen eigenen Thread auf.

Gruß

Thorsten

[roman1528]

Dass ICH da nicht drauf gekommen bin... 

Besten Dank dafür^^

[Grafkox]

Schön, dass ich DIR mal helfen konnte, hab mich in der Vergangenheit so oft bei dir bedient 

[l3skon3]

Hallo,

gibt es schon eine Lösung für das Icon (links).

Mit einer akzeptablen Formatierung bekomme ich das nicht hin 

Gruß

[Grafkox]

Hallo,

gibt es schon eine Lösung für das Icon (links).

Mit einer akzeptablen Formatierung bekomme ich das nicht hin 

Gruß

Ich habe es wie von Setstate hier vorgeschlagen wie folgt

Code Auswählen Erweitern

    <nav id="menu">
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="default normal top-space-2x left-space-3x"
           data-width="150"
           data-icon-left="fa-home"
           data-color="white"
           data-text-align="right"
           data-load="#content1"
           data-url="#content_temps.html"
           data-active-color="green"
           data-active-pattern="(.*index.html|.*#content_temps.html)">HOME</div>
<i  onclick="$('html, body').animate({scrollTop: $('#menu').offset().top}, 500); if ($('#menu_raume').is(':hidden')) { $('#menu_raume').slideDown(500); } else { $('#menu_raume').slideUp(500); }"
class="fa oa-control_building_modern_s_all big fa-2x right-space-3x top-space-2x inline"></i>
<div onclick="$('html, body').animate({scrollTop: $('#menu').offset().top}, 500); if ($('#menu_raume').is(':hidden')) { $('#menu_raume').slideDown(500); } else { $('#menu_raume').slideUp(500); }"
class="inline top-space-2x left-space-2x">R&Auml;UME</div>
<nav id="menu_raume">
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
<div class="row">
<i  onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); if ($('#menu_obergeschoss').is(':hidden')) { $('#menu_obergeschoss').slideDown(500); } else { $('#menu_obergeschoss').slideUp(500); }"
class="fa oa-control_building_modern_s_og big fa-2x left-space right-space-3x top-space inline"></i>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); if ($('#menu_obergeschoss').is(':hidden')) { $('#menu_obergeschoss').slideDown(500); } else { $('#menu_obergeschoss').slideUp(500); }"
class="inline top-space-2x left-space normal blue">Obergeschoss</div>
</div>
<nav id="menu_obergeschoss">
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="default normal top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-bed"
data-color="white"
data-text-align="right"
data-load="#content_niklas"
data-url="#content_niklas.html"
data-active-color="green"
data-active-pattern=".*#content_niklas.html">Niklas</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="prefetch normal top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-bed"
data-color="white"
data-text-align="right"
data-load="#content_dominik"
data-url="#content_dominik.html"
data-active-color="green"
data-active-pattern=".*#content_dominik.html">Dominik</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="prefetch normal top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-bed"
data-color="white"
data-text-align="right"
data-load="#content_schlafen"
data-url="#content_schlafen.html"
data-active-color="green"
data-active-pattern=".*#content_schlafen.html">Schlafen</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache normal top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-tint"
data-color="white"
data-text-align="right"
data-load="#content_bad"
data-url="#content_bad.html"
data-active-color="green"
data-active-pattern=".*#content_bad.html">Bad</div>
</nav>

<div class="row">
<i  onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); if ($('#menu_untergeschoss').is(':hidden')) { $('#menu_untergeschoss').slideDown(500); } else { $('#menu_untergeschoss').slideUp(500); }"
class="fa oa-control_building_modern_s_eg big fa-2x left-space right-space-3x top-space-2x inline"></i>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); if ($('#menu_untergeschoss').is(':hidden')) { $('#menu_untergeschoss').slideDown(500); } else { $('#menu_untergeschoss').slideUp(500); }"
class="inline top-space-2x left-space normal blue">Erdgeschoss&nbsp&nbsp;</div>
</div>
<nav id="menu_untergeschoss">
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache normal top-space-2x left-space-3x"
data-width="150"
data-icon-left="ro-sofa"
data-color="white"
data-text-align="right"
data-load="#content_wohnen"
data-url="#content_wohnen.html"
data-active-color="green"
data-active-pattern=".*#content_wohnen.html">Wohnen</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache normal top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-cutlery"
data-color="white"
data-text-align="right"
data-load="#content_kueche"
data-url="#content_kueche.html"
data-active-color="green"
data-active-pattern=".*#content_kueche.html">K&uuml;che</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache normal top-space-2x left-space-3x"
data-width="150"
data-icon-left="ro-pc"
data-color="white"
data-text-align="right"
data-load="#content_buero"
data-url="#content_buero.html"
data-active-color="green"
data-active-pattern=".*#content_buero.html">B&uuml;ro</div>
<div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache normal top-space-2x left-space-3x"
data-width="150"
data-icon-left="ma-wc"
data-color="white"
data-text-align="right"
data-load="#content_wc"
data-url="#content_wc.html"
data-active-color="green"
data-active-pattern=".*#content_wc.html">WC</div>   
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
</nav>
</nav>

        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="prefetch normal top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-cloud"
            data-color="white"
            data-text-align="right"
            data-load="#content10"
            data-url="#content_wetter.html"
            data-active-color="green"
            data-active-pattern=".*#content_wetter.html">WETTER</div>
        <div onclick="$('html, body').animate({scrollTop: $('#menu_raume').offset().top}, 500); { $('#menu_raume').slideUp(500);$('#menu_untergeschoss').slideUp(500);$('#menu_obergeschoss').slideUp(500); }; "
data-type="link" class="nocache normal top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="ma-computer"
            data-color="white"
            data-text-align="right"
            data-load="#content11"
            data-url="#content_system.html"
            data-active-color="green"
            data-active-pattern=".*#content_system.html">SYSTEME</div>
    </nav>

und im Speziellen z.B. für Räume so

Code Auswählen Erweitern

<i  onclick="$('html, body').animate({scrollTop: $('#menu').offset().top}, 500); if ($('#menu_raume').is(':hidden')) { $('#menu_raume').slideDown(500); } else { $('#menu_raume').slideUp(500); }"
class="fa oa-control_building_modern_s_all big fa-2x right-space-3x top-space-2x inline"></i>
<div onclick="$('html, body').animate({scrollTop: $('#menu').offset().top}, 500); if ($('#menu_raume').is(':hidden')) { $('#menu_raume').slideDown(500); } else { $('#menu_raume').slideUp(500); }"
class="inline top-space-2x left-space-2x">R&Auml;UME</div>

umgesetzt.