{"id":128998,"date":"2019-01-02T18:01:34","date_gmt":"2019-01-02T17:01:34","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-conditional-menu\/"},"modified":"2025-02-13T18:46:14","modified_gmt":"2025-02-13T17:46:14","slug":"create-a-conditional-menu","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/bedingtes-menu-erstellen","title":{"rendered":"Ein bedingtes Men\u00fc erstellen"},"content":{"rendered":"<p>Bedingte Men\u00fcs zeigen abh\u00e4ngig von der Bildschirmgr\u00f6\u00dfe nur bestimmte Teile des Men\u00fcs an. Auf diese Weise k\u00f6nnen Sie Elemente ausblenden, die bei einer kleinen Bildschirmgr\u00f6\u00dfe nicht so wichtig sind, und mehr Elemente anzeigen, wenn der Bildschirm gr\u00f6\u00dfer ist.<br \/>\n<video style=\"max-width:820px; width:100%; padding:20px 0px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/conditional-menu-example.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/conditional-menu-example.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/conditional-menu-example.png\" alt=\"Beispiel f\u00fcr ein bedingtes Men\u00fc\">Beispiel f\u00fcr ein bedingtes Men\u00fc<\/source><\/video><br \/>\nHier sehen Sie, wie Sie ein solches Men\u00fc erstellen k\u00f6nnen:<\/p>\n<ol>\n<li>Ziehen Sie alle Elemente, die Sie in das Men\u00fc aufnehmen m\u00f6chten, auf den Canvas. In unserem Beispiel ziehen wir drei Rechteck-Widgets und beschriften sie mit &#8222;Home&#8220;, &#8222;Sign up&#8220; und &#8222;Login&#8220;. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15174\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/DesignMenu.png\" alt=\"Men\u00fc des Designs\" width=\"755\" height=\"450\"><\/li>\n<li>W\u00e4hlen Sie alle drei aus, indem Sie bei gedr\u00fcckter Umschalttaste auf sie auf dem Canvas oder in der Konturenpalette klicken. Klicken Sie dann mit der rechten Maustaste und in dem daraufhin angezeigten Dialogfenster auf &#8222;In dynamischem Panel gruppieren&#8220;. Heften Sie dieses Panel mit einem Rand von 40px rechts an.\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758255\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>F\u00fcgen Sie ein weiteres Panel innerhalb des dynamischen Panels hinzu, indem Sie Panel 1 ausw\u00e4hlen und dann auf das Symbol &#8218;+&#8216; klicken.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15175\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/AddAnotherPanel.png\" alt=\"Ein weiteres Panel hinzuf\u00fcgen\" width=\"755\" height=\"394\"><\/li>\n<li>Ziehen Sie in dieses Feld (Feld 2) ein Hamburger-Men\u00fc-Symbol. Unseres stammt aus der Widget-Bibliothek Web Components. Heften Sie dieses Panel mit einem Rand von 20px an die rechte Seite.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15176\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/MenuIcon.png\" alt=\"Men\u00fc-Symbol\" width=\"755\" height=\"413\"><\/li>\n<li>W\u00e4hlen Sie das dynamische Panel auf dem Canvas. Erstellen Sie ein Ereignis &#8222;On Window Resize&#8220; + &#8222;Set Active Panel&#8220;. Legen Sie damit Panel 2 als aktiv fest.\n<div class=\"embed-container\" style=\"padding-bottom:60%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758429\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>Erstellen Sie eine Bedingung f\u00fcr diese Aktion, so dass Panel 2 nur dann aktiviert wird, wenn der Bildschirm eine bestimmte Breite hat. Klicken Sie auf den Text &#8222;Bedingung hinzuf\u00fcgen&#8220;. Das Dialogfeld f\u00fcr bedingte Ausdr\u00fccke wird angezeigt, und Sie k\u00f6nnen die Bedingung wie folgt erstellen:\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758599\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><strong>1.<\/strong> Klicken Sie im Builder auf die Registerkarte &#8222;Konstanten&#8220;. Ziehen Sie das Symbol &#8222;Fensterbreite&#8220; in den offenen Bereich des Ausdrucks.<br \/>\n<strong>2.<\/strong> Klicken Sie auf die Registerkarte &#8222;Funktionen&#8220; und auf den Abschnitt &#8222;Komparatoren&#8220;. Ziehen Sie ein Symbol &#8222;Kleiner als&#8220; (&#8222;&lt;&#8222;) neben das Symbol &#8222;Fensterbreite&#8220;.<br \/>\n<strong>3.<\/strong> Schlie\u00dflich doppelklicken Sie in das freie Feld, das neben dem Symbol &#8218;Weniger als&#8216; (&#8218;&lt;&#8218;) erscheint, und geben Sie 600 ein.<br \/>\n<strong>4.<\/strong> Klicken Sie auf OK, um die Erstellung der Bedingung zu beenden.<\/li>\n<li>Klicken Sie auf den Text &#8222;Sonst&#8220;, wodurch das Dialogfeld Ereignisse ge\u00f6ffnet wird. Erstellen Sie ein Ereignis &#8222;Bei Gr\u00f6\u00dfen\u00e4nderung des Fensters&#8220; + &#8222;Aktives Panel festlegen&#8220; und w\u00e4hlen Sie Panel 1 als das Panel, das als aktiv festgelegt werden soll. Klicken Sie auf OK, um die Erstellung des Ereignisses zu beenden. Sie brauchen f\u00fcr dieses Ereignis keine Bedingung zu erstellen.\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758684\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p>Klicken Sie auf &#8222;Simulieren&#8220; und sehen Sie, wie Ihr bedingtes Men\u00fc funktioniert.<\/p>\n<div><strong>Hinweis:<\/strong> Die Simulationseinstellungen m\u00fcssen so eingestellt sein, dass sie sich auf die Breite des Browsers ausdehnen. Sie k\u00f6nnen dies in den Simulationseinstellungen oder im Simulationsfenster festlegen. <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15298\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/SimulationSetting.png\" alt=\"Einstellung der Simulation\" width=\"755\" height=\"491\"><br \/>\nSie k\u00f6nnen <a href=\"https:\/\/s3-eu-west-1.amazonaws.com\/justinmind\/examples\/ConditionalMenu.vp\">unser Beispiel hier herunterladen.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bedingte Men\u00fcs zeigen abh\u00e4ngig von der Bildschirmgr\u00f6\u00dfe nur bestimmte Teile des Men\u00fcs an. Auf diese Weise k\u00f6nnen Sie Elemente ausblenden, die bei einer kleinen Bildschirmgr\u00f6\u00dfe nicht&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8554,8555],"tags":[],"class_list":["post-128998","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-reaktionsfaehiges-prototyping"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128998"}],"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\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=128998"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128998\/revisions"}],"predecessor-version":[{"id":129223,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128998\/revisions\/129223"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=128998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=128998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=128998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}