Adaptive Design

Considering specific screen sizes

The most obvious target for adaptive design is
our menu bar, which doesn’t fit on small screens.

The most common solution to this problem is to
hide the menu on small screens, with a “show” button.

To achieve this effect,
on small devices we need to:

  • Design a vertical menu layout
  • Add a button to show/hide it
  • Hide the menu using a class
  • Toggle the class using jQuery

Add a menu button to your nav bar.

<h1>{{ site.name }}</h1>

<span class="menu-button">Menu</span>
<nav>
  <a href="/">Home</a>
  <a href="/shop.html">Shop</a>
  <a href="/contact.html">Contact</a>
  <a href="/credits.html">Credits</a>
</nav>

Make the menu button hidden by default

header .menu-button {
  display: none;
}

Create a media query for screens 500px or smaller

@media only screen and (max-width: 500px) {

}

For this screen size we want our menu button to be visible

@media only screen and (max-width: 500px) {

  header .menu-button {
    display: block;
  }

}

We can also make it nicer-looking by using
uppercase letters and a smaller font size.

@media only screen and (max-width: 500px) {

  header .menu-button {
    display: block;
    text-transform: uppercase;
    font-size: 12px;
  }

}

We can make our menu drop to the next line by
making it 100% wide and enabling flex-wrap on its parent.

@media only screen and (max-width: 500px) {

  header .menu-button {
    display: block;
    text-transform: uppercase;
    font-size: 12px;
  }

  header nav {
    width: 100%;
  }

  header .container {
    flex-wrap: wrap;
  }

}

Now we can style our nav buttons to
be vertical by making them display block.

@media only screen and (max-width: 500px) {

  header .menu-button {
    display: block;
    text-transform: uppercase;
    font-size: 12px;
  }

  header nav {
    width: 100%;
  }

  header nav a {
    display: block;
  }

  header .container {
    flex-wrap: wrap;
  }

}

And we can further style them to look nicer:

header nav a {
  display: block;
  border-top: 1px solid #777;
  margin: 0;
  text-align: center;
  padding: 8px 0 3px;
}

The last bit of CSS we need is a class
to optionally hide the menu.

header nav {
  width: 100%;
}

header nav.hide-on-mobile {
  display: none;
}

Add the hide-on-mobile class in your HTML

<span class="menu-button">Menu</span>
<nav class="hide-on-mobile">
  <a href="/">Home</a>
  <a href="/shop.html">Shop</a>
  <a href="/contact.html">Contact</a>
  <a href="/credits.html">Credits</a>
</nav>

Toggling Classes with jQuery

In your theme folder,
create a folder called js.

Download jQuery 2 production version, unzip,
and copy the jquery.min.js file to your js folder.

Download jQuery

In the js folder, create a
new file called menu.js.

In menu.js:

function enableMobileMenu(){
  // code here
}

In menu.js:

function enableMobileMenu(){

  var menuButton = $('.menu-button');
  var menu = $('header nav');

  function toggleMenu(){
    menu.toggleClass('hide-on-mobile');
  }

  menuButton.click(toggleMenu);
}

$(document).ready(enableMobileMenu);

function enableMobileMenu(){

  var menuButton = $('.menu-button');
  var menu = $('header nav');

  function toggleMenu(){
    menu.toggleClass('hide-on-mobile');
  }

  menuButton.click(toggleMenu);
}

In your page template, add a script tag
to import jQuery and your menu script into your site.

<body>
  
  {% include header.html %}
  
  {{ content }}
  
  <script src="/theme/js/jquery-2.1.4.min.js"></script>
  <script src="/theme/js/menu.js"></script>

</body>

Your menu should now display like normal on large screens
and be hidden under a menu button on smaller screens.

Summary

  • Media Queries
    We can choose to make piece of CSS only apply on specific screen sizes.
  • Class Toggling
    jQuery can be used to show and hide elements by adding and removing classes.

Adaptive Design: Complete

Next Chapter

Loading...