ddos of Mousatche Republic
4/16/2018 - 5:53 AM
Responsive Footer (accordian on mobile) catergoy with sub cat drop down
HIGHLIGHTED LINES = content that is optional or needs to be changed this has not been tested may need to add more styles or code from AM-Tech project
<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:sales@amtech.co.nz">Email Us</a></p>
\!h <p class="footer-extra-padding"><a href="tel:0800268324">{{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;
}
}