{"id":6023,"date":"2020-08-02T11:02:45","date_gmt":"2020-08-02T02:02:45","guid":{"rendered":"https:\/\/nsme.red\/wp\/?p=6023"},"modified":"2020-08-02T11:02:45","modified_gmt":"2020-08-02T02:02:45","slug":"%e3%83%8f%e3%83%b3%e3%83%90%e3%83%bc%e3%82%ac%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc","status":"publish","type":"post","link":"https:\/\/core.nsme.net\/notes\/vue-js\/tool\/6023\/","title":{"rendered":"\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc"},"content":{"rendered":"\n<p style=\"background-color:#d5e3dd\" class=\"has-background wp-block-paragraph\">html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body>\n &lt;div id=\"app\">\n  &lt;header class=\"header\">\n    &lt;div class=\"header_menu\">\n      &lt;div class=\"header_menu_line\" @click=\"naviOpen\" :class=\"{'is-active': active}\">\n        &lt;span>&lt;\/span>\n        &lt;span>&lt;\/span>\n        &lt;span>&lt;\/span>\n      &lt;\/div>\n    &lt;\/div>\n  &lt;\/header>\n   &lt;transition name=\"navi\">\n  &lt;nav class=\"navi\" v-show=\"navi\">\n    &lt;ul class=\"navi_wrap\">\n      &lt;li>&lt;a href=\"#\">AAA&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">BBB&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">CCC&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">DDD&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">EEE&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/nav>\n &lt;\/transition>\n \n &lt;\/div>\n&lt;\/body>\n\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\">&lt;\/script>\n  &lt;script>\n    var app = new Vue({\n  el: '#app',\n  data: {\n    active: false,\n    navi: false,\n  },\n  methods: {\n    naviOpen: function() {\n      this.active = !this.active;\n      this.navi = !this.navi;\n    }\n  }\n    })\n  &lt;\/script><\/code><\/pre>\n\n\n\n<p style=\"background-color:#d5e3dd\" class=\"has-background wp-block-paragraph\">css<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.header {\n  width: 100%;\n  background: #fff;\n  height: 60px;\n}\n.header_menu {\n  width: 60px;\n  height: 60px;\n  position: fixed;\n  top: 0;\n  right: 0;\n}\n.header_menu_line {\n  width: 36px;\n  height: 30px;\n  margin-top: 15px;\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  cursor: pointer;\n}\n.header_menu_line span {\n  width: 100%;\n  height: 2px;\n  background: #000;\n  display: block;\n  transition: .6s;\n  position: absolute;\n}\n.header_menu_line span:first-child {\n  top: 0;\n}\n.header_menu_line span:nth-child(2) {\n  top: 14px;\n}\n.header_menu_line span:last-child {\n  bottom: 0;\n}\n.header_menu_line.is-active span {\n  transition: .6s;\n}\n.header_menu_line.is-active span:first-child {\n  transform: rotate(45deg);\n  top: 50%;\n}\n.header_menu_line.is-active span:nth-child(2) {\n  opacity: 0;\n}\n.header_menu_line.is-active span:last-child {\n  transform: rotate(-45deg);\n  top: 50%;\n}\n\n.navi {\n  width: 100%;\n\/*  height: 100vh;*\/\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n}\n.navi_wrap {\n  list-style-type: none;\n  text-align: center;\n  padding-left: 0;\n  background: #4b4b4b;\n  padding: 40px 0;\n}\n.navi_wrap li a {\n  text-decoration: none;\n  color: #fff;\n  display: block;\n  padding: 20px;\n}\n.navi-enter, .navi-leave-to {\n  opacity: 0;\n}\n.navi-enter-to, .navi-leave {\n  opacity: 1;\n}\n.navi-enter-active, .navi-leave-active {\n  transition: .6s;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>html css<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[40],"tags":[],"class_list":["post-6023","post","type-post","status-publish","format-standard","hentry","category-tool"],"acf":[],"_links":{"self":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/comments?post=6023"}],"version-history":[{"count":1,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6023\/revisions"}],"predecessor-version":[{"id":6024,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6023\/revisions\/6024"}],"wp:attachment":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/media?parent=6023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/categories?post=6023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/tags?post=6023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}