We have designed and developed a responsive menu that, without any html modification, changes its behavior from desktop to mobile devices.

Unfortunately, this menu still requires some configuration to work properly.

• Firstly, you need to modify src/styl/partials/navbar.styl to customize the colours, margins and sizes of the elements (all the lines that need to be modified are commented with // Change).
• You need to manually find the optimal resolution for this change to happen, by using your developer tools.
• Once that you have found the optimal resolution, you need to edit both src/styl/partials/navbar.styl and src/js/menu.js to set that resolution inside the proper media query.

Because we value user's time, we like to make all our form submissions asynchronous. This have led us to implement a loder system (because we don't want users to think the form is not being submitted after they clicked the submit button). You can find the js logic that makes this possible inside src/js/app.js. This file tells jquery validator what to do with the form's DOM if the request failed or succedded, the data is not valid, and while the data is being sent.

But this logic won't work unless you pay attention to the styles declared in src/styl/base.styl (from line 34 to line 86) and the following html structure:

<form id="my-form" action=".">
  <div class="input-wrapper">
    <input id="form-name" type="text" name="name">
  </div>
  <div class="input-wrapper">
    <input id="form-email" type="email" name="email">
  </div>
  <div class="form-message"></div>
  <div class="button-wrapper">
    <button type="submit">Submit</button>
  </div>
  <div class="loader custom-loader">
    <div class="ball-pulse-sync">
      <div class="blue"></div>
      <div class="blue"></div>
      <div class="blue"></div>
    </div>
  </div>
</form>

There are 6 important things to notice in this code:

• The form action attriute: Even though the form is submitted via AJAX, you shouldn't declare the destination url in your javascript files. Instead, use the default action attribute as if you were using a normal form.
• The input-wrapper div: As jquery validator will add label tags after each field, it is usually useful to wrap your inputs inside a div tag. input-wrapper is a suggested name, but you can name it whatever you want, and even use some framework classes (like bootstrap's form-control).
• The form-message div: This div will contain the error/success messages after the ajax request. This message should always be between the inputs and the submit button.
• The button-wrapper div: This is necessary to make the loader appear/disappear dynamically. Notice that, while input-wrapper is a suggested class name, button-wrapper is obligatory.
• The whole loader block. We use loaders.css to create the animation, and this code is required.

Finally, you have to validate this form using jquery-validation. Add the rules inside src/js/validations.js

(function () {
  $('#my-form').validate({
    rules: {
      ...
    }
  });
})();