jQuery Sidebar Navigation with Cool Blurring Effect - Focucss

Focucss is a jQuery plugin to create an off-canvas sidebar navigation with a cool blurring effect, that will focus your users on your sidebar content, and blurring the useless content.

How to use it:

1. Create the Html for a closed sidebar navigation.

<div class="sidebar closed">
  <header>
    <h2>Sidebar</h2>
    <a href="#" id="close"><span class="entypo-cancel"></span></a> </header>
  <ul>
    <li><a href="#">A link</a></li>
    <li><a href="#">A link</a></li>
    <li><a href="#">A link</a></li>
    <li><a href="#">A link</a></li>
    <li><a href="#">A link</a></li>
    <li><a href="#">A link</a></li>
    <li><a href="#">A link</a></li>
  </ul>
</div>

2. Create a trigger to toggle the sidebar navigation. Wrap the main content in a Html element with a CSS ID 'blurrMe'.

<a href="#" id="trigger">Trigger</a>
<div id="blurrMe">

Your content goes here

</div>

3. The SVG filter for Firefox.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>

  <filter id="blurLogo">
    <feGaussianBlur stdDeviation="1" />
  </filter>
</svg>

4. Include the necessary jQuery library in the document.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>

5. The jQuery script to enable the sidebar navigation.

<script>
$(document).ready(function(){

// Toggle the blurred class
function sidebar(){
  var trigger = $('#trigger, #close'),
  menu = $('.sidebar');

  trigger.on('click',function(){
   $(this).toggleClass('active');
   menu.toggleClass('closed');
   $('#blurrMe').toggleClass('blurred'); // just here
  });
}

 function deploy(){
  sidebar();
 }

 deploy();

});
</script>

6. The required CSS/CSS3 styles.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
  line-height: 34px;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  float: left;
}


/* Sidebar
-----------------------------------------------------------------------------------------*/
.menusign {
  display: block;
  width: 10px;
  line-height: .3;
  font-size: 2em;
  margin: .5em;
}
.menusign br {
  height: 0;
}

.sidebar {
  position: fixed;
  z-index: 9999999;
  left: 0;
  top: 0;
  height: 100%;
  width: 260px;
  background: #f3f3f3;
  -webkit-transition: left 0.3s ease, -webkit-box-shadow 0.3s ease 0.2s;
  transition: left 0.3s ease, box-shadow 0.3s ease 0.2s;
  -webkit-box-shadow: 0.5em 0 0 0 #1abc9c, 0.6em 0 0 0 #17a689;
  box-shadow: 0.5em 0 0 0 #1abc9c, 0.6em 0 0 0 #17a689;
}
.sidebar #close {
  float: right;
  margin: -5.5rem 1rem;
  font-size: 1.4em;
  color: #fa598d;
  text-align: right;
}
.sidebar.closed {
  left: -260px;
  -webkit-box-shadow: 0 0 0 #1abc9c;
  box-shadow: 0 0 0 #1abc9c;
}
.sidebar h2 {
  padding: .5em;
  color: #1abc9c;
}
.sidebar ul {
  padding: 0;
  margin: 0;
}
.sidebar ul li {
  width: 90%;
  margin: 5px 10px;
  float: left;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 3px 6px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 2px solid #1abc9c;
  background: #1abc9c;
  color: #f3f3f3;
}
.sidebar ul li a {
  color: white;
}
.sidebar ul li:hover {
  background: #17a689;
  border-color: #17a689;
}

/* Blurred class

This class is added to the container 
(#blurMe) when the sidebar is open.
-----------------------------------*/
.blurred {
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  -webkit-filter: url(#blur);
  filter: url(#blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
}

---

This awesome jQuery plugin is developed by LukyVj. For more Advanced Usages, please check the demo page or visit the official website.