{"id":129034,"date":"2022-11-16T17:33:30","date_gmt":"2022-11-16T16:33:30","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-custom-menu\/"},"modified":"2022-11-16T17:33:30","modified_gmt":"2022-11-16T16:33:30","slug":"how-to-create-a-custom-menu","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/wie-gestalte-ich-ein-benutzerdefiniertes-menu","title":{"rendered":"Wie man ein benutzerdefiniertes Men\u00fc designt"},"content":{"rendered":"<p><span data-preserver-spaces=\"true\">Hier erfahren Sie, wie Sie ein eigenes Men\u00fc designen k\u00f6nnen.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73357737\/index.html\" width=\"820px\" height=\"320px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span data-preserver-spaces=\"true\">So bauen Sie es auf:<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">Siehe<\/span><\/strong><\/h3>\n<ul>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie eine &#8222;Tabelle&#8220; aus und platzieren Sie sie auf der Leinwand. \u00c4ndern Sie in der Palette Eigenschaften die Anzahl der Spalten und Dateien auf eine Datei und vier Spalten und passen Sie die H\u00f6he der Tabelle an, um eine Kopfzeile zu simulieren.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-1.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie jede Zelle einzeln aus und \u00e4ndern Sie in der Palette Eigenschaften das Layout auf &#8222;Horizontal&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-2.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Platzieren Sie vier zentrierte Texte auf der Leinwand und schreiben Sie: &#8222;Home&#8220;, &#8222;Produkte&#8220;, &#8222;Dienstleistungen&#8220; und &#8222;\u00dcber&#8220;. Halten Sie die Befehlstaste (Mac) bzw. die Steuerungstaste (Windows) gedr\u00fcckt und ziehen Sie die Elemente in die Zellen.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-3.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Geben Sie in der Bibliothek &#8222;Webkomponenten&#8220; ein &#8222;Chevron down&#8220;-Symbol neben &#8222;Produkte&#8220;, &#8222;Dienstleistungen&#8220; und &#8222;\u00dcber&#8220; ein. Nachdem Sie jeder Zelle ein horizontales Layout gegeben haben, wird das Symbol horizontal zum Text positioniert. In der Palette Eigenschaften k\u00f6nnen Sie den Abstand zwischen dem Text und dem Symbol anpassen.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-4.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">F\u00fcr die Men\u00fcoptionen legen Sie eine neue &#8222;Tabelle&#8220; an und \u00e4ndern in der Palette Eigenschaften die Spalten auf eine und die Zeilen auf drei.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-5.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Halten Sie die Befehlstaste (Mac) bzw. die Steuerungstaste (Windows) gedr\u00fcckt und platzieren Sie in jeder Zelle 3 Texte f\u00fcr &#8222;Artikel 1&#8220;, &#8222;Artikel 2&#8220; und &#8222;Artikel 3&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-6.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Gehen Sie bei ausgew\u00e4hlter &#8222;Tabelle&#8220; zur Palette Eigenschaften und \u00e4ndern Sie die Farbe aller Rahmenoptionen auf hellgrau und deaktivieren Sie den inneren Rahmen, der die Zellen trennt.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-7.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Markieren Sie die &#8222;Tabelle&#8220;, die wir erstellt haben, halten Sie die Alt-Taste gedr\u00fcckt und ziehen Sie sie, um sie zu duplizieren, legen Sie sie unter &#8222;Dienste&#8220; ab und duplizieren Sie sie ein weiteres Mal f\u00fcr &#8222;\u00dcber&#8220;. Gehen Sie bei ausgew\u00e4hlter &#8222;Tabelle&#8220; unter &#8222;Info&#8220; zur Palette Eigenschaften und \u00e4ndern Sie die Anzahl der Zeilen auf zwei. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-8.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie die Artikeltabellen einzeln aus, klicken Sie mit der rechten Maustaste darauf und w\u00e4hlen Sie die Option &#8222;Im dynamischen Panel gruppieren&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-9.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Stellen Sie sicher, dass jedes &#8222;Dynamische Panel&#8220; \u00fcber den Rand der Tabelle, die es enth\u00e4lt, hinausragt, damit die Ereignisse, die wir als n\u00e4chstes erstellen, korrekt funktionieren.<\/span><\/span><span data-preserver-spaces=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-10.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">W\u00e4hlen Sie die drei dynamischen Felder, die als Dropdowns funktionieren, gehen Sie zur Palette Eigenschaften und klicken Sie auf das Symbol &#8222;In der Simulation ausgeblendet&#8220;. Die Dropdowns werden in der Simulation standardm\u00e4\u00dfig nicht sichtbar sein.   <\/span><\/span><\/span>\n<p> <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-11.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/p>\n<p> <\/p>\n<p> <\/p>\n<\/li>\n<\/ul>\n<h3>Ereignisse<\/h3>\n<p><span data-preserver-spaces=\"true\">Wenn Sie die Zelle &#8222;Produkte&#8220; ausgew\u00e4hlt haben, gehen Sie zur Palette &#8222;Ereignisse&#8220; und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-12.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie &#8222;Bei Mauseingabe&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie unter &#8222;Aktion ausw\u00e4hlen&#8220; die Option &#8222;Ausgeblendetes Element anzeigen&#8220; und w\u00e4hlen Sie das &#8222;Dynamische Panel&#8220;, das als Dropdown f\u00fcr die Option &#8222;Produkte&#8220; dient. Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung des Ereignisses abzuschlie\u00dfen. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-13.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Wenn die Zelle &#8222;Produkte&#8220; noch ausgew\u00e4hlt ist, gehen Sie zur Palette Ereignisse und klicken Sie auf das &#8222;+&#8220;, um ein Ereignis hinzuzuf\u00fcgen.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie &#8222;Bei Mauseingabe&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie unter &#8222;Aktion ausw\u00e4hlen&#8220; die Option &#8222;Element ausblenden&#8220; und markieren Sie die beiden &#8222;Dynamischen Felder&#8220;, die als Dropdowns f\u00fcr die Optionen &#8222;Dienste&#8220; und &#8222;\u00dcber&#8220; dienen. Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung des Ereignisses abzuschlie\u00dfen. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-14.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Klicken Sie in der Palette Ereignisse zwischen den beiden Optionen auf den Pfeil und \u00e4ndern Sie ihn in die Option &#8222;MIT vorheriger&#8220;, so dass beide Aktionen gleichzeitig ausgef\u00fchrt werden.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-15.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/p>\n<p>Wiederholen Sie die Vorg\u00e4nge f\u00fcr jede obere Men\u00fcoption und das entsprechende Dropdown-Men\u00fc. In jedem Fall m\u00fcssen wir das &#8222;Dynamische Panel&#8220; ausw\u00e4hlen, das wir anzeigen m\u00f6chten, und das, das wir ausblenden m\u00f6chten. <\/p>\n<p>W\u00e4hlen Sie die Zelle &#8222;Home&#8220; und gehen Sie zur Palette &#8222;Ereignisse&#8220;, klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie &#8222;Bei Mauseingabe&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie unter &#8222;Aktion ausw\u00e4hlen&#8220; die Option &#8222;Element ausblenden&#8220; und w\u00e4hlen Sie die drei &#8222;Dynamischen Panels&#8220; der Optionen. Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung des Ereignisses abzuschlie\u00dfen. <\/span><\/li>\n<\/ol>\n<p>W\u00e4hlen Sie die &#8222;Dynamischen Panels&#8220; der Option &#8222;Produkte&#8220; und gehen Sie zur Palette &#8222;Ereignisse&#8220;, klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-16.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie<span style=\"font-weight: 400;\">&#8222;bei Mausverlassen<\/span>&#8222;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie unter &#8222;Aktion w\u00e4hlen&#8220; die Option &#8222;Element ausblenden&#8220; und w\u00e4hlen Sie dasselbe &#8222;Dynamische Panel&#8220;. Auf diese Weise wird das &#8222;Dynamische Panel&#8220; beim Verlassen nicht mehr angezeigt. Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung des Ereignisses zu beenden. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-17.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p>Wiederholen Sie den gleichen Vorgang f\u00fcr jedes &#8222;Dynamische Panel&#8220;.<\/p>\n<p>Markieren Sie die erste Zelle (Element 1) der Spalte im &#8222;Dynamischen Panel&#8220; der Option &#8222;Produkte&#8220;, gehen Sie zur Palette &#8222;Ereignisse&#8220; und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-18.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie<span style=\"font-weight: 400;\">&#8222;bei Maus\u00fcberschreitung<\/span>&#8222;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie unter &#8222;Aktion ausw\u00e4hlen&#8220; die Option &#8222;Stil \u00e4ndern&#8220; und im Dropdown-Men\u00fc &#8222;Zu \u00e4ndernden Stil ausw\u00e4hlen&#8220; die Option Hintergrund und bearbeiten Sie die Farbe. Auf diese Weise erzielen wir einen Feedback-Effekt, wenn Sie den Mauszeiger \u00fcber &#8222;Artikel 1&#8220; bewegen. Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung des Ereignisses abzuschlie\u00dfen.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-19.png\" alt=\"Schwebendes Men\u00fc\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p>W\u00e4hrend die Zelle (Element 1) noch ausgew\u00e4hlt ist, gehen Sie zur Ereignispalette und klicken Sie auf die Schaltfl\u00e4che &#8222;Alle Ereignisse kopieren&#8220;. W\u00e4hlen Sie dann jede der Zellen aus und klicken Sie auf die Option &#8222;Alle Ereignisse einf\u00fcgen&#8220;. Das Ziel wird automatisch ge\u00e4ndert.  <br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-22.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-22.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-22.png\" alt=\"Expression builder\">Expression builder<\/video><\/p>\n<p>Simulieren Sie Ihren Prototyp.<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hier erfahren Sie, wie Sie ein eigenes Men\u00fc designen k\u00f6nnen. So bauen Sie es auf: Siehe W\u00e4hlen Sie eine &#8222;Tabelle&#8220; aus und platzieren Sie sie auf&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8553,8548],"tags":[],"class_list":["post-129034","post","type-post","status-publish","format-standard","hentry","category-erweiterte-interaktionen","category-erweiterte-anleitungen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129034"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129034"}],"version-history":[{"count":0,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129034\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}