Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[Communicate]

Hallo zusammen,

ich würde gerne ein aufklapp Menü nach oben realisieren - habe aber keine Ahnung, wie ich auch nur Anfang könnte (also welches Widget dafür am geeignetsten wäre, etc.).

Zur Verdeutlichung hier mal zwei Bilder:

1. Menü zugeklappt:

2. dann klickt man darauf und es klappt sich nach oben die volle Darstellung auf:

P.S.: Auch wenn man es auf den Bilder aussieht, als würde das Menü nach unten aufgehen, so würde ich es doch tatsächlich nach oben aufgehen lassen wollen.

Hat jemand eine Idee, wie man so etwas realisieren könnte?

Grüße

Dominic

[ruhr70]

wenn Du keine Animation benötigst, ein View darüber legen.

Die Sichtbarkeit mit dem Button steuern und mit einem 2. Button im View

Gesendet von iPhone mit Tapatalk

[Communicate]

Danke, das klingt schonmal gut - aber animiert ist natürlich noch schicker - das ist eine gute Idee von Dir. Hast du da auch noch einen Tipp für mich?

[ruhr70]

Ein Javascript, dass nur eine Variable anlegt:

createState('test.test6', 0);

Testview mit dem Button (Viewname: Test6)

{
  "settings": {
    "style": {
      "background_class": "hq-background-radial-blue",
      "background": ""
    },
    "theme": "redmond",
    "sizex": "",
    "sizey": "",
    "hideDescription": false,
    "gridSize": ""
  },
  "widgets": {
    "e00001": {
      "tpl": "tplBasicState",
      "data": {
        "oid": "javascript.0.test.test6",
        "visibility-cond": "==",
        "visibility-val": "0",
        "value": "1",
        "html": "
Wohnzimmer",
        "visibility-oid": "javascript.0.test.test6",
        "name": "",
        "comment": ""
      },
      "style": {
        "left": "17px",
        "top": "296px",
        "background": "rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box",
        "width": "361px",
        "height": "41px",
        "z-index": "10",
        "color": "rgb(68, 68, 68)",
        "text-align": "center",
        "text-shadow": "none",
        "font-family": "'Lucida Grande', 'Lucida Sans', Arial, sans-serif",
        "font-style": "normal",
        "font-variant": "normal",
        "font-weight": "bold",
        "font-size": "12px",
        "line-height": "14px",
        "letter-spacing": "0",
        "word-spacing": "0px",
        "background-position": "0% 0%",
        "background-size": "auto",
        "background-clip": "",
        "background-origin": "",
        "padding": "",
        "box-shadow": "0px 0px 1px 1px",
        "border-style": "solid",
        "border-radius": "",
        "border-width": "1px"
      },
      "widgetSet": "basic"
    },
    "e00002": {
      "tpl": "tplContainerView",
      "data": {
        "visibility-cond": "==",
        "visibility-val": 1,
        "contains_view": "Test5",
        "visibility-oid": "javascript.0.test.test6"
      },
      "style": {
        "left": "19px",
        "top": "129px",
        "width": "364px",
        "height": "209px"
      },
      "widgetSet": "basic"
    },
    "e00003": {
      "tpl": "tplBasicState",
      "data": {
        "oid": "",
        "visibility-cond": "==",
        "visibility-val": "0",
        "value": "1",
        "html": "
Schlafzimmer",
        "visibility-oid": "",
        "name": "",
        "comment": ""
      },
      "style": {
        "left": "386px",
        "top": "296px",
        "background": "rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box",
        "width": "361px",
        "height": "41px",
        "z-index": "10",
        "color": "rgb(68, 68, 68)",
        "text-align": "center",
        "text-shadow": "none",
        "font-family": "'Lucida Grande', 'Lucida Sans', Arial, sans-serif",
        "font-style": "normal",
        "font-variant": "normal",
        "font-weight": "bold",
        "font-size": "12px",
        "line-height": "14px",
        "letter-spacing": "0",
        "word-spacing": "0px",
        "background-position": "0% 0%",
        "background-size": "auto",
        "background-clip": "",
        "background-origin": "",
        "padding": "",
        "box-shadow": "0px 0px 1px 1px",
        "border-style": "solid",
        "border-radius": "",
        "border-width": "1px"
      },
      "widgetSet": "basic"
    }
  },
  "name": "Test6",
  "rerender": false,
  "filterList": []
}

View mit dem Inhalt, wenn der Button sich nach oben öffnet (Viewname: Test 5):

{
  "settings": {
    "style": {
      "background_class": "hq-background-h-gradient-black-3",
      "background": ""
    },
    "theme": "redmond",
    "sizex": "",
    "sizey": "",
    "hideDescription": false,
    "gridSize": "10",
    "snapType": "2"
  },
  "widgets": {
    "e00001": {
      "tpl": "tplBasicState",
      "data": {
        "oid": "javascript.0.test.test6",
        "visibility-cond": "==",
        "visibility-val": "1",
        "value": "0",
        "html": "
Wohnzimmer",
        "visibility-oid": "javascript.0.test.test6",
        "name": "",
        "comment": ""
      },
      "style": {
        "left": "0",
        "top": "0",
        "background": "rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box",
        "width": "361px",
        "height": "41px",
        "z-index": "10",
        "color": "rgb(68, 68, 68)",
        "text-align": "center",
        "text-shadow": "none",
        "font-family": "'Lucida Grande', 'Lucida Sans', Arial, sans-serif",
        "font-style": "normal",
        "font-variant": "normal",
        "font-weight": "bold",
        "font-size": "12px",
        "line-height": "14px",
        "letter-spacing": "0",
        "word-spacing": "0px",
        "background-position": "0% 0%",
        "background-size": "auto",
        "background-clip": "",
        "background-origin": "",
        "padding": "",
        "box-shadow": "0px 0px 1px 1px",
        "border-style": "solid",
        "border-radius": "",
        "border-width": "1px"
      },
      "widgetSet": "basic"
    },
    "e00002": {
      "tpl": "tplBulbOnOffCtrl",
      "data": {
        "oid": "nothing_selected",
        "visibility-cond": "==",
        "visibility-val": 1
      },
      "style": {
        "left": "10px",
        "top": "60px"
      },
      "widgetSet": "basic"
    },
    "e00003": {
      "tpl": "tplBulbOnOffCtrl",
      "data": {
        "oid": "nothing_selected",
        "visibility-cond": "==",
        "visibility-val": 1
      },
      "style": {
        "left": "50px",
        "top": "60px"
      },
      "widgetSet": "basic"
    },
    "e00004": {
      "tpl": "tplBulbOnOffCtrl",
      "data": {
        "oid": "nothing_selected",
        "visibility-cond": "==",
        "visibility-val": 1
      },
      "style": {
        "left": "90px",
        "top": "60px"
      },
      "widgetSet": "basic"
    },
    "e00005": {
      "tpl": "tplValueFloatBar",
      "data": {
        "oid": "nothing_selected",
        "visibility-cond": "==",
        "visibility-val": 1,
        "factor": "1",
        "color": "blue"
      },
      "style": {
        "left": "0px",
        "top": "130px"
      },
      "widgetSet": "basic"
    },
    "e00006": {
      "tpl": "tplNote",
      "data": {
        "oid": "nothing_selected",
        "visibility-cond": "==",
        "visibility-val": 1,
        "max_width": "300"
      },
      "style": {
        "left": "252px",
        "top": "71px",
        "width": "105px",
        "height": "79px"
      },
      "widgetSet": "basic"
    }
  },
  "name": "Test5",
  "rerender": false,
  "filterList": []
}

[Communicate]

Hallo ruhr70,

vielen lieben Dank, dass hilft mir sehr!

Gruss, Dominic

[ruhr70]

Wenn Du fertig bist, poste mal bitte einen Screenshot.

Ich finde die Idee ganz interessant.