<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<div id='ftl_vr_menu'>
<ul>
    <li class='active'><a href='http://www.freetimelearning.com/'><span>Home</span></a></li>
    <li class='has-sub'><a href='#'><span>Frontend Tutorials</span></a>
      <ul>
         <li><a href='http://www.freetimelearning.com/html-tutorial.php'><span>HTML Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/html5-tutorial.php'><span>HTML5 Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/css-basic-tutorial.php'><span>CSS Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/css3-tutorial.php'><span>CSS3 Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/javascript-tutorial.php'><span>JavaScript Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/jquery-tutorial.php'><span>jQuery Tutorial</span></a></li>
         <li><a href='http://www.freetimelearning.com/bootstrap-tutorial.php'><span>Bootstrap Tutorial</span></a></li>
         <li class='last'><a href='http://www.freetimelearning.com/angularjs-tutorial.php'><span>AngularJS Tutorial</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Backend Tutorials</span></a>
      <ul>
           <li><a href='http://www.freetimelearning.com/java-tutorial.php'><span>Java</span></a></li>
           <li><a href='http://www.freetimelearning.com/php-tutorial.php'><span>PHP</span></a></li>
         <li class='last'><a href='http://www.freetimelearning.com/python-tutorial.php'><span>Python</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Examples</span></a>
      <ul>
        <li><a href="http://www.freetimelearning.com/html/html-examples.php">HTML</a></li>
        <li><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php">CSS</a></li>
        <li><a href="http://www.freetimelearning.com/html5/html5-examples.php">HTML5</a></li>
        <li><a href="http://www.freetimelearning.com/css3/css3-examples.php">CSS3</a></li>
        <li><a href="http://www.freetimelearning.com/javascript/javascript-examples.php">JavaScript</a></li>
        <li><a href="http://www.freetimelearning.com/jquery/jquery-examples.php">jQuery</a></li>
        <li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php">AngularJS</a></li>
        <li><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php">Bootstrap</a></li>
      </ul>
   </li>
   <li class='last'><a href='http://www.freetimelearning.com/contact-us.php'><span>Contact</span></a></li>
</ul>
</div>
@charset 'UTF-8';
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#ftl_vr_menu,
#ftl_vr_menu a,
#ftl_vr_menu li,
#ftl_vr_menu ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: 400;
    text-decoration: none;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps!important;
    position: relative
}

#ftl_vr_menu a {
    line-height: 1.3
}

#ftl_vr_menu {
    width: 250px
}

#ftl_vr_menu>ul>li>a {
    padding-right: 40px;
    font-weight: 700;
    display: block;
    background: #710000;
    color: #fff;
    border-bottom: 1px solid #590000
}

#ftl_vr_menu>ul>li>a>span {
    background: #A40000;
    padding: 12px 15px;
    display: block;
    font-size: 16px;
    font-weight: 300
}

#ftl_vr_menu>ul>li>a:hover {
    text-decoration: none
}

#ftl_vr_menu>ul>li.active {
    border-bottom: none
}

#ftl_vr_menu>ul>li.active>a {
    color: #fff
}

#ftl_vr_menu>ul>li.active>a span {
    background: #710000
}

#ftl_vr_menu span.cnt {
    position: absolute;
    top: 8px;
    right: 15px;
    padding: 0;
    margin: 0;
    background: 0 0
}

#ftl_vr_menu ul ul {
    display: none
}

#ftl_vr_menu ul ul li {
    border: 1px solid #e0e0e0;
    border-top: 0
}

#ftl_vr_menu ul ul a {
    padding: 10px;
    display: block;
    color: #ed1144;
    font-size: 13px
}

#ftl_vr_menu ul ul a:hover {
    color: #bd0e36
}

#ftl_vr_menu ul ul li.odd {
    background: #f4f4f4
}

#ftl_vr_menu ul ul li.even {
    background: #fff
}

.clearfix {
    clear: both
}

.ftl {
    font-size: 16px;
    padding: 50px 0 20px;
    margin: 0 auto;
    font-style: italic;
    text-align: center;
}

.ftl a {
    color: #09C;
    text-decoration: none !important;
}

.ftl a:hover {
    color: #999
}
$( document ).ready(function() {
$(document).ready(function(){

$('#ftl_vr_menu> ul > li ul').each(function(index, e){
  var count = $(e).find('li').length;
  var content = '<span class="cnt">' + count + '</span>';
  $(e).closest('li').children('a').append(content);
});
$('#ftl_vr_menuul ul li:odd').addClass('odd');
$('#ftl_vr_menuul ul li:even').addClass('even');
$('#ftl_vr_menu> ul > li > a').click(function() {
  $('#ftl_vr_menuli').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#ftl_vr_menuul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
});
});

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.