Проблемы с дочерним элементом, показывающим пункты меню - PullRequest
Новая
       5

Проблемы с дочерним элементом, показывающим пункты меню

1 голос
/ 17 марта 2020

Я использую Shopify & VUE, чтобы создать боковое меню, тянущее списки ссылок shopify. Основные ссылки отображаются, но дочерние ссылки скрыты, и состояние переключения / активного состояния не соответствует ожидаемому.

Вот пример кода https://codepen.io/benmoswm/pen/RwPydrm

Я начал это часами, но упустил что-то очевидное, но не для себя. Будем признательны любому совету. спасибо 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

  <div id="sidebar-panel">
    <nav class="sidebar-main-nav-evergreen">
      <Burger>Shop</Burger>
    </nav>
    <Sidebar>

      <ul class="evergreen-main-nav">
          {% for link in linklists.main-menu-sidebar.links %}
            {% include 'desktop-navigation-link' %}
          {% endfor %}
      </ul>

    </Sidebar>
  </div>

  <template id="sidebar">
      <div class="sidebar">
          <div class="sidebar-backdrop" v-on:click="closeSidebarPanel" v-if="isPanelOpen"></div>
          <transition name="slide">
              <div v-if="isPanelOpen"
                   class="sidebar-panel">
                  <slot></slot>
              </div>
          </transition>
      </div>
  </template>

  <template id="burger">
      <div id="burger"
           :class="{ 'active' : isBurgerActive }"
           @click.prevent="toggle">
          <slot>
              <button type="button" class="burger-button" title="Menu">
                  <span class="hidden">Toggle menu</span>
                  <span class="burger-bar burger-bar--1"></span>
                  <span class="burger-bar burger-bar--2"></span>
                  <span class="burger-bar burger-bar--3"></span>
              </button>
          </slot>
      </div>
  </template>


<style>

.sidebar-panel {
    overflow-y: auto;
    background-color: #eaeaea;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 999;
    padding: 3rem 20px 2rem 20px;
    width: 320px;
}

.sidebar-main-nav-evergreen {
    float: left;
    width: auto;
    margin: 0 36px 0 0;
    display: block;
    position: relative;
    font-size: 14px;
    padding: 26px 2px 19px;
    height: 65px;
    line-height: 1.6;
    text-transform: uppercase;
}

.slide-enter-active, .slide-leave-active {
    transition: transform 0.2s ease;
}
.slide-enter, .slide-leave-to {
    transform: translateX(-100%);
    transition: all 150ms ease-in 0s
}
.sidebar-backdrop {
    background-color: rgba(250, 250, 250, .4);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 10;
}

.evergreen-main-nav {
    list-style: none;
    margin: 0;
    padding: 25px
}
.evergreen-main-nav .evergreen-main-nav-item {
    padding: 15px 0;
    display: block;
    position: relative;
    font-weight: 400;
    font-size: 15px;
    border-bottom: 0px solid #ddd
}
.evergreen-main-nav .evergreen-main-subnav .evergreen-main-nav-item {
    font-weight: 300
}
.evergreen-main-nav .evergreen-main-nav-item:last-child {
    border-bottom: 0
}
.evergreen-main-nav .evergreen-main-nav-item a {
    color: inherit
}
.evergreen-main-subnav {
    padding-left: 15px;
    margin: 0;
    display: none;
}
.evergreen-main-subnav .evergreen-main-nav-item:last-child {
    padding-bottom: 0;
}

.evergreen-child-menu {
    float: right;
    cursor: pointer;
}
.evergreen-child-menu::after {
    content: "\f078";
    display: inline-block;
    font-family: 'FontAwesome';
    font-weight: 400;
    font-size: 10px;
    width: 30px;
    text-align: center
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-child-menu::after {
    content: "\f077"
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-main-subnav {
    display: block;
}

/* burger */
.hidden {
    visibility: hidden;
}

button {
    cursor: pointer;
}
/* remove blue outline */

button:focus {
    outline: 0;
}
.burger-button {
    position: relative;
    height: 30px;
    width: 32px;
    display: block;
    z-index: 999;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    pointer-events: all;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar {
    background-color: #000;
    position: absolute;
    top: 50%;
    right: 6px;
    left: 6px;
    height: 2px;
    width: auto;
    margin-top: -1px;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1), opacity .3s cubic-bezier(.165, .84, .44, 1), background-color .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar--1 {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
}
.burger-bar--2 {
    transform-origin: 100% 50%;
    transform: scaleX(.8);
}
.burger-button:hover .burger-bar--2 {
    transform: scaleX(1);
}
.no-touchevents .burger-bar--2:hover {
    transform: scaleX(1);
}
.burger-bar--3 {
    transform: translateY(6px);
}
#burger.active .burger-button {
    transform: rotate(-180deg);
}
#burger.active .burger-bar {
    background-color: #fff;
}
#burger.active .burger-bar--1 {
    transform: rotate(45deg)
}
#burger.active .burger-bar--2 {
    opacity: 0;
}
#burger.active .burger-bar--3 {
    transform: rotate(-45deg)
}

</style>



<script>
  const store = Vue.observable({
    isNavOpen: false
});

const mutations = {
    setIsNavOpen(yesno) {
        store.isNavOpen = yesno;
    },
    toggleNav() {
      store.isNavOpen = !store.isNavOpen;
    }
};


Vue.component('sidebar', {
  template: '#sidebar',
  methods: {
    closeSidebarPanel: mutations.toggleNav
  },
  computed: {
    isPanelOpen() {
      return store.isNavOpen
    }
  }
});

Vue.component('burger', {
  template: '#burger',
  computed: {
    isBurgerActive() {
      return store.isNavOpen
    }
  },
  methods: {
    toggle() {
      mutations.toggleNav()
    }
  }
});

new Vue({
  el: '#sidebar-panel'
})
</script>

1 Ответ

0 голосов
/ 17 марта 2020

. Вам нужно сделать позицию абсолютной в пунктах подменю.

Обновить 

.evergreen-main-subnav {
   padding:0;
   margin:0;
   display: none;
   position:absolute;
   top:10%;
   left:33%;
   background-color:#ccc;
}
.mobile-nav__item{
   list-style:none;
  width:100%;
  text-align:left;
  padding:8px;
}
.mobile-nav__item a{
  text-decoration:none;
}

.mobile-nav__item a:hover{
 font-weight:900;
 text-decoration:underline;
}

.evergreen-main-nav-item:hover .evergreen-main-subnav{
 display:block;
}


 const store = Vue.observable({
    isNavOpen: false
});

const mutations = {
    setIsNavOpen(yesno) {
        store.isNavOpen = yesno;
    },
    toggleNav() {
      store.isNavOpen = !store.isNavOpen;
    }
};


Vue.component('sidebar', {
  template: '#sidebar',
  methods: {
    closeSidebarPanel: mutations.toggleNav
  },
  computed: {
    isPanelOpen() {
      return store.isNavOpen
    }
  }
});

Vue.component('burger', {
  template: '#burger',
  computed: {
    isBurgerActive() {
      return store.isNavOpen
    }
  },
  methods: {
    toggle() {
      mutations.toggleNav()
    }
  }
});

new Vue({
  el: '#sidebar-panel'
})
/* common styles */
html {
  height: 100%;
  overflow: hidden;
}

body {
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "Lato";
  height: 100%;
  background-color: #d4d4d4;
}

.sidebar-panel {
  overflow-y: auto;
  background-color: #eaeaea;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 999;
  padding: 3rem 20px 2rem 20px;
  width: 320px;
}

.sidebar-main-nav-evergreen {
  float: left;
  width: auto;
  margin: 0 36px 0 20px;
  display: block;
  position: relative;
  font-size: 14px;
  padding: 26px 2px 19px;
  height: 65px;
  line-height: 1.6;
  text-transform: uppercase;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.2s ease;
}
.slide-enter,
.slide-leave-to {
  transform: translateX(-100%);
  transition: all 150ms ease-in 0s;
}
.sidebar-backdrop {
  background-color: rgba(250, 250, 250, 0.4);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 10;
}

.evergreen-main-nav {
  list-style: none;
  margin: 0;
  padding: 25px;
}
.evergreen-main-nav .evergreen-main-nav-item {
  padding: 15px 0;
  display: block;
  position: relative;
  font-weight: 400;
  font-size: 15px;
  border-bottom: 0px solid #ddd;
}
.evergreen-main-nav .evergreen-main-subnav .evergreen-main-nav-item {
  font-weight: 300;
}
.evergreen-main-nav .evergreen-main-nav-item:last-child {
  border-bottom: 0;
}
.evergreen-main-nav .evergreen-main-nav-item a {
  color: inherit;
}
.evergreen-main-subnav {
  padding:0;
  margin:0;
  display: none;
  position:absolute;
  top:10%;
  left:33%;
  background-color:#ccc;
}
.mobile-nav__item{
  list-style:none;
  width:100%;
  text-align:left;
  padding:8px;
}
.mobile-nav__item a{
  text-decoration:none;
}

.mobile-nav__item a:hover{
  font-weight:900;
  text-decoration:underline;
}

.evergreen-main-nav-item:hover .evergreen-main-subnav{
  display:block;
}
.evergreen-main-subnav .evergreen-main-nav-item:last-child {
  padding-bottom: 0;
}

.evergreen-child-menu {
  float: right;
  cursor: pointer;
}
.evergreen-child-menu::after {
  content: "\f078";
  display: inline-block;
  font-family: "FontAwesome";
  font-weight: 400;
  font-size: 10px;
  width: 30px;
  text-align: center;
}
.evergreen-main-nav-item-has-children
  .evergreen-main-nav-active
  .evergreen-child-menu::after {
  content: "\f077";
}
.evergreen-main-nav-item-has-children
  .evergreen-main-nav-active
  .evergreen-main-subnav {
  display: block;
}

/* burger */
.hidden {
  visibility: hidden;
}

button {
  cursor: pointer;
}
/* remove blue outline */

button:focus {
  outline: 0;
}
.burger-button {
  position: relative;
  height: 30px;
  width: 32px;
  display: block;
  z-index: 999;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  pointer-events: all;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.burger-bar {
  background-color: #000;
  position: absolute;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 2px;
  width: auto;
  margin-top: -1px;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
    background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.burger-bar--1 {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
}
.burger-bar--2 {
  transform-origin: 100% 50%;
  transform: scaleX(0.8);
}
.burger-button:hover .burger-bar--2 {
  transform: scaleX(1);
}
.no-touchevents .burger-bar--2:hover {
  transform: scaleX(1);
}
.burger-bar--3 {
  transform: translateY(6px);
}
#burger.active .burger-button {
  transform: rotate(-180deg);
}
#burger.active .burger-bar {
  background-color: #fff;
}
#burger.active .burger-bar--1 {
  transform: rotate(45deg);
}
#burger.active .burger-bar--2 {
  opacity: 0;
}
#burger.active .burger-bar--3 {
  transform: rotate(-45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<div id="sidebar-panel">
  <nav class="sidebar-main-nav-evergreen">
    <Burger>click me</Burger>
  </nav>
  <Sidebar>

    <ul class="evergreen-main-nav">
      <li class="evergreen-main-nav-item evergreen-main-nav-item-has-children"><a href="/collections/ceramic-pots" class="evergreen-menu-link">Ceramic Pots</a> <span class="evergreen-child-menu"></span>
        <ul class="evergreen-main-subnav">
          <li class="mobile-nav__item"><a href="/collections/bower" class="mobile-nav__link">Bower</a></li>
          <li class="mobile-nav__item"><a href="#" class="mobile-nav__link">Wave</a></li>
        </ul>
      </li>
      <li class="evergreen-main-nav-item"><a href="/collections/large-pots" class="evergreen-menu-link">Large Pots</a></li>
      <li class="evergreen-main-nav-item"><a href="/collections/pot-stands" class="evergreen-menu-link">Pot Stands</a></li>
      <li class="evergreen-main-nav-item"><a href="/collections/pot-stands" class="evergreen-menu-link">Hanging Pots</a></li>
      <li class="evergreen-main-nav-item"><a href="/collections/watering-cans" class="evergreen-menu-link">Watering Cans</a></li>
    </ul>

  </Sidebar>
</div>

<template id="sidebar">
  <div class="sidebar">
    <div class="sidebar-backdrop" v-on:click="closeSidebarPanel" v-if="isPanelOpen"></div>
    <transition name="slide">
      <div v-if="isPanelOpen" class="sidebar-panel">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<template id="burger">
  <div id="burger" :class="{ 'active' : isBurgerActive }" @click.prevent="toggle">
    <slot>
      <button type="button" class="burger-button" title="Menu">
        <span class="hidden">Toggle menu</span>
        <span class="burger-bar burger-bar--1"></span>
        <span class="burger-bar burger-bar--2"></span>
        <span class="burger-bar burger-bar--3"></span>
      </button>
    </slot>
  </div>
</template>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...