Month: December 2014

Off-Canvas Menu with jQuery

offcanvas

In an age of modern websites built to resemble native smartphone applications, the rise of the off-canvas menu popularly has become hard to ignore. Although I must say, I don’t think they are effective when viewed/used on a desktop widescreen, I do see their clear advantage on a mobile handset where every space counts.

Here’s my version of an off-canvas menu with simple jQuery.

See the Pen Off Canvas Menu by Richard (@barkins) on CodePen.

HTML

I wanted to make this as modular as possible, therefore you’ll be able to grab only the off-canvas menu code and retrofit it onto your website right away without having to reinvent the wheel.

The Menu

<div id="off-canvas">
   <nav>
     <a href="#">Menu Item 1</a>
     <a href="#">Menu Item 2</a>
     <a href="#">Menu Item 3</a>
     <a href="#">Menu Item 4</a>
     <a href="#">Menu Item 5</a>  
   </nav>
</div><!--/off-canvas-->

Trigger

We’ll need a trigger for the menu and in this case I utilized a button giving an ID of “trigger” which will reveal and hide the menu for us.

<header class="header">
  <h1>Simple Off-Canvas Menu with jQuery</h1>  
  <button id="trigger"><i class="fa fa-bars"></i></button>
</header><!--/header-->

For the sake of the example, here’s the rest of the HTML code to give you some perspective on how an off-canvas menu would look and function like within a “real” website.

<section>
   <article>     
     <p>Lorem ipsum ...</p>
  </article>
</section>

CSS

Box-sizing

Before we focus on the CSS, I just want to mention that I’m using the box-sizing method for styling the site. Learn more about box-sizing here.

Here’s the box-sizing code I’m using:

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

Styling the Menu

As always you are free to style the layout anyway you choose, but the item you should pay close attention to is the actual menu. Here’s just the CSS for the menu.

#off-canvas{
  width:250px;
  height:100%;
  top:0;
  left:-250px;
  padding:25px;
  background:#a6032f;
  position:fixed; 
  z-index:5;
}

One thing to note, you’ll need to set the position to fixed and match the left property to the width of the menu.This way when you hide and reveal the menu it will hide the entire width of the menu.

Menu Trigger

The trigger can live anywhere on your website, as long as it’s outside of the menu so you can hit it whether the menu is revealed or hidden.

Here’s the styling I used, but you can choose to modify it anyway you wish.

#trigger{
  background:#a6032f;
  color:#FFF;
  padding:10px 15px;
  border:0;
  border-radius:5px;
  line-height:auto;
  font-size:1rem;
  margin:10px 0 0;
  text-transform:uppercase;
  cursor:pointer;
  position:absolute;
  top: 15px;
  right:25px;
  box-shadow:1px 1px 0px #000;
}

jQuery

Now onto the fun part, adding in the functionality for the menu.

Start by creating a variable we’re going to use in the functionality and set it to false.

var x = false;

I took advantage of an if else statement to help determine whether the menu should be revealed or hidden.

$('#trigger').on('click', function(){
  if(!x) {
    $('#off-canvas').animate({left:"0"},200);
    x = true;
  }else{
    $('#off-canvas').animate({left:"-250px"},200);
    x = false;
  } 
});

To review this code, whenever someone taps on the trigger, the functionality will check to see if x is set to false, if so, it will animate the left property and set it to 0. At the same time, it will change the variable x to true.

Now whenever someone taps on the trigger again, the functionality will see that x is now true and jump to the else statement and animate the left property to -250px in effect hiding the menu. Lastly, it will set the x variable back to false.

Wrap Up

The basic concept here is with the help of jQuery we are able to hide, or in other words, position the menu off the canvas and toggle it with a trigger.

Filed under: jQuery

Sass Jump Start for CSS Beginners

140H

Sass is an extremely easy to learn method of coding CSS that can increase your website production time by as much as 30 to 40 percent (purely unscientific).

Before I demonstrate any code, you must first be aware that no internet browser can read Sass natively. Therefore, you will need a compiling method to convert any Sass into traditional CSS. You have two paths you can take in this regard. Either work within a the Terminal ala command line, or my preferred method, working with an application.

My go-to application is CodeKit (Mac only). It’s relatively cheap ($29) and extremely powerful in helping me create modern and efficient websites. Check out these videos to bring you up to speed with this front-end web developer tool.

Prepros is another great compiler and works on Windows, Mac and Linux.

To recap, browsers don’t read Sass code, you’ll need to convert it to CSS with either command line (Terminal) or application (CodeKit).

In the meantime, for the sake of quickly diving into Sass, you can go ahead and use CodePen right away to learn how to code with Sass. After creating a new “pen” click on the gear icon (in the CSS box) and select “Sass (.scss)” and you’re good to go!

scss

Nesting

Nesting is a great way to cut down on repeating yourself when coding a stylesheet. Here’s an example of the same style coded with CSS and Sass.

CSS Method

.container {
   max-width:960px;
   margin:50px auto;
}

.container a{
   color:red;
}

.container a:hover {
   color:blue;
}

Sass Method

.container {
   max-width:960px;
   margin:50px auto;
   a {
     color:red;
     &:hover {
        color:blue;
     }
   }
}

As you can see, no need to keep retyping “.container” over and over again to select child elements. Cool, right? Now, picture doing this with various sections on your web page. Huge time saver!

Variables

Creating and working with variables in programming is essential and now its power can be utilized with CSS as well, via Sass. By assigning styles to variables you can quickly update things like colors throughout your entire stylesheet just by changing one value.

CSS Method

.container {
   border:1px solid #cc3300;
}

.container a {
   color: #cc3300;
}

As you can see, we’re repeating the same color value of “#cc3300” and that just goes against the DRY rule, Don’t Repeat Yourself.

Sass Method

$orange: #cc3300;

.container {
   border:1px solid $orange;
   a {
      color: $orange;
   }
}

If in the future should you want to change the orange color, simply update the value for the variable, “$orange” for instance replace “#cc3300” with “#ff6836” and it will update the color anywhere you have “$orange” referenced in your stylesheet.

Mixins

I like to think of Mixins as Functions from programming. For instance, instead of having to continuously type out browser prefixes (-webkit-, -moz-, -ms-) for lets say a “border-radius” you can create a simple Mixin.

Setting up a Mixin

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Utilizing the Mixin

Now that you have a Mixin for “border-radius” created, here’s how you initlize it.

.container { 
   @include border-radius(10px); 
}

In short, instead of having to rewrite every browser prefix throughout your code whenever you want to use a border-radius, simply take advantage of a mixin and save time!

Import

It’s not a good idea to use “@import…” to include additional stylesheets in your main stylesheet because whenever a page loads in a browser, it has to send out multiple HTTP requests which adds to the load time of your website.

Sass has a fantastic feature that lets you have the convenience of import, yet without the draw back of additional load times.

Say for instance you have a “main.scss” document and a “reset.scss” document. Instead of converting each of them into “main.css” and “reset.css” you should import or in other words, merge them into one document. Here’s how it’s done with Sass.

At the top of page in main.scss” include the following:

@import 'reset';

And that’s it. Once “main.scss” runs through a compiler such as CodeKit, it will prepend “reset.scss” to the top of “main.scss” and output a merged file called “main.css” that includes both documents.

This is a really quick and easy way to manage multiple stylesheets in your web project.

Wrap Up

I hope this gave you enough confidence to dive deeper into Sass and start building all of your future websites with Sass.

Learn more on the Sass website and check out this very handy list of pre-built Sass mixins.

Filed under: Sass