Please enable javascript in your browser to view this site!

Custom Footer Navigation - Dropdown List on Mobile

Summary

So in this code, the client wanted to mimic the Footer Nav that they already had on desktop. Easy enough. Only when the user was on a mobile device, they wanted to see a dropdown list. Similar to what www.SquareSpace.com does. 

Using media queries in CSS, we can show/hide sections based on the viewport size. Pretty nifty method when having issues with mobile view. I've used this in the past to basically make a different site for mobile users than desktop users in SquareSpace. 

Try resizing this browser window (or load it on mobile) to see how the sections show/hide based on viewport size. Entire code snippit is at the bottom. 

Result

Code

<!-- Custom Code by John Darabos -->
<!-- www.JohnDarabos.com -->

<!-- Begin Custom Styles -->
<style>

    /* Desktop Menu */
  .jdDesktop {
  width: 100%;
  }
    
  .jdHead {
    
    font-family: Open Sans;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    letter-spacing: .14em;
    line-height: 1.4em;
    text-transform: uppercase;
    color: grey;
    padding-bottom: 1em;
    max-width: 16em;
    
  }
  .jdCell {
      font-family: Open Sans;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    letter-spacing: .14em;
    line-height: 1.4em;
    text-transform: uppercase;
        padding-bottom: .618em;
    padding-right:30px;
    
  }
    
    /* Mobile Menu */
    .jdAccordion {
    background-color: #fff;
    color: #000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
      text-transform: uppercase;
}

.jdActive, .jdAccordion:hover {
    background-color: #fff;
}

.jdAccordion:after {
    content: '\002B';
    color: #000;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  text-transform: uppercase;
}

.jdActive:after {
    content: "\2212";
  color: #000;
}

.jdPanel {
    padding: 0 18px;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
  color: black;
}
    
    /* Media Queries */
    
@media screen and (min-width: 700px) {
    .jdDesktop {
        display:block;
    }
    
    .jdMobile {
        display: none;
    }
}
    
@media screen and (max-width: 701px) {
    .jdDesktop {
        display:none;
    }
    
    .jdMobile {
        display: block;
    }
}
    
</style>
<!-- End Custom Styles -->

<!-- Begin Desktop Footer Nav -->
<div class="jdDesktop">
  <center><table class="jdTable">
    <tr class="jdRow">
      <td class="jdHead">Company</td>
      <td class="jdHead">Our Story</td>
      <td class="jdHead">Our Services</td>
      <td class="jdHead">Information</td>
    </tr>
    <tr class="jdRow">
      <td class="jdCell"><a href="#">Home</a></td>
        <td class="jdCell"><a href="#">About</a></td>
      <td class="jdCell"><a href="#">Services</a></td>
      <td class="jdCell"><a href="#">Terms of Service</a></td>
    </tr>
    <tr class="jdRow">
      <td class="jdCell"><a href="#">Client Login</a></td>
        <td class="jdCell"><a href="#">Our Pledge</a></td>
      <td class="jdCell"><a href="#">Our Work</a></td>
      <td class="jdCell"><a href="#">Privacy Policy</a></td>
    </tr>
    <tr class="jdRow">
        <td class="jdCell"><a href="#">Contact</a></td>
      <td class="jdCell"></td>
      <td class="jdCell"><a href="#">#PictureDayTo</a></td>
      <td class="jdCell"></td>
    </tr>
  </table></center>
  
</div>
<!-- End Desktop Footer Nav -->

<!-- Begin Mobile Footer Nav -->
<div class="jdMobile">
    
<button class="jdAccordion">Company</button>
<div class="jdPanel">
    <a class="jdLink" href="#">Home</a><br>
    <a class="jdLink" href="#">Client Login</a><br>
    <a class="jdLink" href="#">Contact</a><br><br>
</div>
<hr>
<button class="jdAccordion">Our Story</button>
<div class="jdPanel">
   <a class="jdLink" href="#">About</a><br>
    <a class="jdLink" href="#">Our Pledge</a><br><br>
    
</div>
<hr>
<button class="jdAccordion">Our Services</button>
<div class="jdPanel">
   <a class="jdLink" href="#">Services</a><br>
    <a class="jdLink" href="#">Our Work</a><br>
    <a class="jdLink" href="#">#PictureDayTo</a><br><br>
</div>
<hr>
<button class="jdAccordion">Information</button>
<div class="jdPanel">
   <a class="jdLink" href="#">Terms Of Service</a><br>
    <a class="jdLink" href="#">Privacy Policy</a><br><br>

</div>
<hr>
</div>
<!-- End Mobile Footer Nav -->

<!-- Begin Custom Script -->
<script>
var acc = document.getElementsByClassName("jdAccordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("jdActive");
    var jdPanel = this.nextElementSibling;
    if (jdPanel.style.maxHeight){
      jdPanel.style.maxHeight = null;
    } else {
      jdPanel.style.maxHeight = jdPanel.scrollHeight + "px";
    } 
  });
}
</script>
<!-- End Custom Script -->

<!-- Custom Code by John Darabos -->
<!-- www.JohnDarabos.com -->

Jonathan Darabos

Sundog Studios, 103 Miley Dr, Starkville, MS, 39759, United States