Nuxt/map menu

kure_kosen_map/assets/map/map-design.css

@@ -1,97 +1,3 @@
-.wrap-menubtn {
-  position: fixed;
-  top: 0.5em;
-  right: 0.5em;
-}
-
-.wrap-openmenu.menuactive {
-  display: none;
-}
-
-.ol-full-screen {
-  position: absolute;
-  top: 3em;
-  right: 0.5em;
-}
-
-.menu .wrap-closemenubtn {
-  z-index: 1;
-}
-
-.menu {
-  position: fixed;
-  top: 0;
-  right: 0;
-  display: none;
-  overflow: auto;
-  max-width: 270px;
-  width: 48%;
-  height: 100%;
-  background-color: rgba(245, 245, 245, 0.8);
-  font-family: sans-serif;
-}
-
-.menu.active {
-  display: block;
-}
-
-.menu-box {
-  padding: 0.7em;
-}
-
-.menu hr {
-  border: 1px solid #ddd;
-}
-
-.menu ul {
-  margin: 0;
-  padding: 0;
-  font-size: 1.2em;
-  line-height: 150%;
-}
-
-.menu li {
-  list-style-type: none;
-
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
-}
-
-.menu li:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.menu .menu-nohover {
-  -webkit-tap-highlight-color: transparent;
-}
-
-.menu .menu-nohover:hover {
-  background-color: transparent;
-}
-
-.menu .menu-list {
-  margin-top: 0.8em;
-}
-
-.menu .menu-buildings {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  height: calc(100vh - 20em);
-}
-
-.menu .menu-content,
-.menu .menu-content a {
-  color: #c81e00;
-}
-
-.menu a {
-  color: #333;
-  text-decoration: none;
-}
-
-.menu .footer {
-  text-align: right;
-}
-
 .mysearch {
   position: absolute;
   top: 0;
@@ -180,3 +86,31 @@
 .mysearch input[type='search']::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
+
+/* --- pc --- */
+@media screen and (min-width: 741px) {
+  .menu {
+    color: #222;
+    overflow: auto;
+    width: 270px;
+    height: 100vh;
+    background-color: #f9f9fcf5;
+  }
+
+  .menu a {
+    color: #222;
+  }
+}
+
+/* --- sp --- */
+@media screen and (max-width: 740px) {
+  .menu {
+    color: #f9f9fc;
+    height: 80vh;
+    overflow: auto;
+  }
+
+  .menu a {
+    color: #f9f9fc;
+  }
+}

kure_kosen_map/components/map/mapMenu.vue

@@ -0,0 +1,132 @@
+<template>
+  <nav
+    id="menu"
+    class="menu">
+    <div class="menu-box">
+      <div class="menu-title">呉高専マップ</div>
+      <div>建物ジャンプ</div>
+      <div class="menu-buildings">
+        <ul>
+          <li>図書館棟 (教育センター)</li>
+          <li>管理棟</li>
+          <li>普通教室棟</li>
+          <li>機械工学科棟</li>
+          <li>電気情報工学科棟</li>
+          <li>建築学科棟</li>
+          <li>環境都市工学科棟</li>
+          <li>専攻科棟 (協働研究センター棟)</li>
+          <li>第2普通教室棟</li>
+          <li>静心館</li>
+          <li>第1体育館</li>
+          <li>第2体育館</li>
+          <li>学生食堂</li>
+          <li>技術センター</li>
+        </ul>
+      </div>
+      <div>
+        <a
+          href="about_us.html"
+          title="About Us">
+          <div>About Us</div>
+        </a>
+        <a
+          href="https://www.kure-nct.ac.jp/"
+          title="呉高専HPへ">
+          <div>呉高専HPへ</div>
+        </a>
+      </div>
+      <div class="copyright">
+        &copy;2018 - Kuremap Team
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+@import url("../../assets/map/map.css");
+
+.menu {
+  margin: 0;
+  padding: 0;
+  font-size: 1.2em;
+  line-height: 170%;
+  font-family: sans-serif;
+}
+
+.menu-box {
+  padding: 0.7em;
+}
+
+.menu .menu-buildings {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+
+.menu .menu-buildings li {
+  border-bottom: 1px solid #ccc;
+}
+
+.menu li,
+.menu a {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+}
+
+.menu li:hover,
+.menu a:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.menu .menu-buildings {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.menu .menu-title,
+.menu .copyright {
+  font-size: 0.7em;
+}
+
+.menu a {
+  text-decoration: none;
+}
+
+li {
+  list-style-type: none;
+}
+
+/* --- pc --- */
+@media screen and (min-width: 741px) {
+  .menu {
+    color: #222;
+    overflow: auto;
+    width: 270px;
+    height: 100vh;
+    background-color: #f9f9fcf5;
+  }
+
+  .menu .menu-buildings {
+    height: calc(100vh - 10em);
+  }
+
+  .menu a {
+    color: #222;
+  }
+}
+
+/* --- sp --- */
+@media screen and (max-width: 740px) {
+  .menu {
+    color: #f9f9fc;
+    height: 80vh;
+    overflow: auto;
+  }
+
+  .menu .menu-buildings {
+    height: calc(80vh - 10em);
+  }
+
+  .menu a {
+    color: #f9f9fc;
+  }
+}
+</style>

kure_kosen_map/components/slideMenuFromRight.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <div
+      id="sideNav"
+      class="bm-menu"
+    >
+      <nav class="bm-item-list">
+        <slot/>
+      </nav>
+      <span
+        v-show="isSideBarOpen/* && (vw < 740) */"
+        class="bm-cross-button cross-style"
+        @click="closeMenu">
+        <i class="fa fa-lg fa-times"/>
+      </span>
+    </div>
+    <span
+      v-show="!isSideBarOpen/* && (vw < 740) */"
+      class="bm-burger-button"
+      @click="openMenu"
+    >
+      <i class="fa fa-lg fa-bars"/>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    menuWidth: {
+      type: String,
+      default: "270px"
+    }
+  },
+
+  data() {
+    return {
+      isSideBarOpen: false,
+      vw: window.innerWidth
+    };
+  },
+
+  created: function() {
+    document.addEventListener("click", this.documentClick);
+    window.addEventListener("resize", this.handleResize);
+  },
+
+  destroyed: function() {
+    document.removeEventListener("click", this.documentClick);
+    window.removeEventListener("resize", this.handleResize);
+  },
+
+  methods: {
+    handleResize: function() {
+      this.vw = window.innerWidth;
+    },
+
+    openMenu() {
+      this.isSideBarOpen = true;
+      document.getElementById("sideNav").style.width = this.menuWidth;
+      document.getElementById("sideNav").style.top = "0";
+    },
+
+    closeMenu() {
+      this.isSideBarOpen = false;
+      document.getElementById("sideNav").style.width = "0";
+      document.getElementById("sideNav").style.top = "0";
+    },
+
+    documentClick(e) {
+      const element = document.querySelector(".bm-burger-button");
+      const target = e.target;
+      if (element !== target && !element.contains(target) && e.target.className !== "bm-menu" && this.isSideBarOpen) {
+        this.closeMenu();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.bm-burger-button {
+  position: fixed;
+  top: 12px;
+  right: 2px;
+  left: auto;
+  z-index: 100;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.cross-style {
+  position: absolute;
+  top: 12px;
+  right: 2px;
+  cursor: pointer;
+}
+
+.bm-cross-button {
+  width: 24px;
+  height: 24px;
+}
+
+.bm-menu {
+  position: fixed; /* Stay in place */
+  top: 0; /* -100% top - change this with JavaScript */
+  right: 0;
+  left: auto;
+  z-index: 1000; /* Stay on top */
+  overflow-x: hidden; /* Disable horizontal scroll */
+  width: 0;
+  height: auto;
+  background-color: #45575d61; /* Black*/
+  transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/
+}
+
+@media screen and (max-width: 740px) {
+}
+</style>

kure_kosen_map/components/slideMenuFromTop.vue

@@ -71,7 +71,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 @media screen and (max-width: 740px) {
   .bm-burger-button {
     position: fixed;