scss 响应式页脚（手机上的手风琴）catergoy与子猫下拉

Posted 2021-05-17

<footer class="mr-footer ">

    <div class="footer-top-bar">
    
        <div class="footer-column footer-details">
       \!h      <h4 class="footer-title get-in-touch">Get in touch</h4>
       \!h    <p class="footer-extra-padding"><a href="mailto:[e-mail]">Email Us</a></p>
       \!h   <p class="footer-extra-padding"><a href="tel:[phone]">{{settings.phone_number}}</a></p>
        </div>

        {{#each categories}}
        <div class="footer-column">
            <div class="footer-sub-title">
                <a href="{{url}}">{{name}}</a>
                <img class="dropdown-btn-svg" src="{{cdn 'assets/img/drop-down-btn.svg'}}" alt="">
            </div>
            {{#if children}}
            <ul class="footer-children">
              
              <!-- max 6 per row --- optional -->
             \!h   {{#each children}}
             \!h   {{#if @index "<" 1}}
             \!h   {{#each children}}
             \!h  {{#if @index "<" 6}}
                <li>
                    <a href="{{url}}">{{name}} </a>
                </li>
            \!h  {{/if}}
            \!h    {{/each}}
            \!h    {{/if}}
            \!h    {{/each}}
                <li>
           \!h         <div class="shop-all-btn"><a href="{{url}}/">Shop All</a></div>
                </li>
            </ul>
            {{/if}}
        </div>
        {{/each}}

    </div>
    <div class="footer-bottom-bar">
  \!h      <div class="copyright">© Amtech 2017 | All rights reserved</div>
    </div>
</footer>

<script>
    var acc = document.getElementsByClassName("footer-sub-title");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function () {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight) {
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
            }
        }
    }


</script>

/* FOOTER STYLES */
.mr-footer {
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 2px;

}
.footer-children{
  list-style-type: none;
}
.footer-sub-title a{
  color: #68CCE5;
}
.footer-sub-title a:hover{
  color: rgba(163, 163, 163, 0.9);
}

.footer-column {
  color: white;
}

.footer-top-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  flex-direction: column;

}

.footer-children li a {
  color: white;
  font-size: 11px;
  height: 34px;
  background-color: #505759;
  padding: 0 34px;
  align-items: center;
  display: flex;
}

.footer-title.get-in-touch {
  font-size: 22px;
  display: none;
}

.footer-sub-title, .footer-title {
  display: flex;
  font-size: 11px;
  font-family: gothamrounded-medium;
  background-color: #505759;
  border-radius: 5px;
  padding: 13px 34px;
  align-items: center;
  margin-top: 0;
  margin-bottom: 2px;
  line-height: 14px;
  @media only screen and (min-width: 992px) {
    font-family: Open-sans-regular;
    padding: 0 34px;

  }
}

.footer-sub-title {
  justify-content: space-between;
  cursor: pointer;

}

.footer-children li .shop-all-btn a {
  text-decoration: underline;
  font-size: 12px;
}

.shop-all-btn {
  margin-bottom: 2px;

}

.footer-children {
  font-size: 14px;
  margin-bottom: 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-family: Open-sans-regular;
  font-size: 14px;
}

.footer-extra-padding {
  padding-bottom: 2px;
  font-family: gothamrounded-book;
}
.footer-extra-padding a{
  color: white;
}

.footer-bottom-bar {
  height: auto;
  display: block;
  justify-content: center;
  align-items: center;

}

.copyright {
  font-size: 9px;
  color: #9B9B9B;
  line-height: 14px;
  padding: 13px 0 13px 8px;

}

.dropdown-btn-svg {
  cursor: pointer;
}

.footer-details {
  order: 1;
  display: flex;
  font-size: 11px;
  font-family: Open-sans-regular;
  height: 108px;
  background-color: #505759;
  border-radius: 5px;
  padding: 16px 34px 0;
  margin-bottom: 2px;
  flex-direction: column;

}



.medical-footer-links{
  list-style-type: none;
}
@media (min-width: 992px) {
  .mr-footer {
    max-width: 1344px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0 52px;

  }
  .footer-video iframe{
    margin-top: 0;

  }
  .footer-column {
    color: white;
    padding-left:30px ;
  }

  .footer-top-bar {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 64px;
    height: 500px;

  }
  .footer-children li a {
    height: inherit;
    color: white;
    padding: 0;
    font-size: 14px;
  }
  .footer-sub-title{
    padding-left: 0;
  }
  .footer-children li {
    padding-bottom: 9px;
  }
  .footer-details {
    min-width: 140px;
    margin-right: 6%;
    order: 0;
    padding: 0;
    height: inherit;
  }
  .footer-title.get-in-touch {
    display: block;
    font-size: 22px;
    padding: 0px;
    line-height: 30px;
    height: auto;
    font-family: Open-sans-regular;
  }
  .footer-sub-title, .footer-title {
    color: white;
    font-size: 18px;
    font-family: Open-sans-bold;
    margin-top: 64px;
    margin-bottom: 38px;
    line-height: 24px;
  }
  .footer-top-bar:before {
    content: "";
    position: absolute;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: #505759;
    z-index: -1;

  }
  .footer-children li .shop-all-btn a {
    text-decoration: underline;
    font-size: 12px;
    font-family: gothamrounded-book;

  }
  .shop-all-btn {
    position: absolute;
    bottom: 0;
    margin-top: 17px;
    margin-bottom: 50px;
  }

  .footer-extra-padding {
    padding-bottom: 28px;
    font-family: gothamrounded-medium;
    font-size: 14px;
  }
  .footer-bottom-bar {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .copyright {
    font-size: 12px;
    color: #505759;
    padding: 0;
  }
  .dropdown-btn-svg {
    display: none;
  }
  .footer-children {

    max-height: none;
  }

}


@media (min-width: 1300px) {
  .footer-top-bar{
    height:405px;
  }
}