Flexy Menu - Responsive Horizontal & Vertical Menu | Basic Aria

Recently I have to add Aria to Flexy menu. I have attached the code.
//flexy.js
(function($){

	jQuery.fn.flexymenu = function(options){
		var settings = {
			 speed: 300,
			 type: "horizontal",
			 align: "left",
			 indicator: false,
			 hideClickOut: true,
			 submenuTrigger: "hover",
			 showDelay: 0,
			 hideDelay: 0,
			 mobileShowDelay: 0,
			 mobileHideDelay: 0,
			 scrollable: false,
			 scrollableMaxHeight: 400
		}
		$.extend( settings, options );
		
		var bigScreen = false;
		var menu = $(this);
		var lastScreenWidth = windowWidth();
		$(".flexy-menu").wrap("
"); var menuWrapper = $(".flexy-menu-wrapper"); if(settings.type == "vertical"){ $(menu).addClass("vertical"); if(settings.align == "right"){ $(menu).addClass("right"); } } if(settings.indicator){ $(menu).find("li").each(function(){ if($(this).children("ul").length > 0){ $(this).append("+"); } }); } $(menu).prepend("
  • MENU
  • "); screenSize(); $(window).resize(function() { if(lastScreenWidth <= 768 && windowWidth() > 768){ unbindEvents(); hideCollapse(); bindHover(); if(settings.type == "horizontal" && settings.align == "right" && bigScreen == false){ rightAlignMenu(); bigScreen = true; } } if(lastScreenWidth > 768 && windowWidth() <= 768){ unbindEvents(); showCollapse(); bindClick(); if(bigScreen == true){ rightAlignMenu(); bigScreen = false; } } lastScreenWidth = windowWidth(); }); function screenSize(){ if(windowWidth() <= 768){ showCollapse(); bindClick(); if(bigScreen == true){ rightAlignMenu(); bigScreen = false; } } else{ hideCollapse(); bindHover(); if(settings.type == "horizontal" && settings.align == "right" && bigScreen == false){ rightAlignMenu(); bigScreen = true; } } } function bindHover(){ if (navigator.userAgent.match(/Mobi/i) || window.navigator.msMaxTouchPoints > 0 || settings.submenuTrigger == "click"){ $(menu).find("a").on("click touchstart", function(e){ e.stopPropagation(); e.preventDefault(); $(this).parent("li").siblings("li").find("ul").stop(true, true).fadeOut(settings.speed); if($(this).siblings("ul").css("display") == "none"){ $(this).siblings("ul").stop(true, true).delay(settings.showDelay).fadeIn(settings.speed); return false; } else{ $(this).siblings("ul").stop(true, true).delay(settings.hideDelay).fadeOut(settings.speed); $(this).siblings("ul").find("ul").stop(true, true).fadeOut(settings.speed); } window.location.href = $(this).attr("href"); }); $(menu).find("li").bind("mouseleave", function(){ $(this).children("ul").stop(true, true).fadeOut(settings.speed); }); if(settings.hideClickOut == true){ $(document).bind("click.menu touchstart.menu", function(ev){ if($(ev.target).closest(menu).length == 0){ $(menu).find("ul").fadeOut(settings.speed); } }); } } else{ $(menu).find("li").bind("mouseenter", function(){ //$('.flexy-menu > li').find('ul').hide();//this line is my custom code for tab fixes when hover is done $(this).children("ul").stop(true, true).delay(settings.showDelay).fadeIn(settings.speed); }).bind("mouseleave", function(){ $(this).children("ul").stop(true, true).delay(settings.hideDelay).fadeOut(settings.speed); }); } } function bindClick(){ $(menu).find("li:not(.showhide)").each(function(){ if($(this).children("ul").length > 0){ $(this).children("a").on("click", function(){ if($(this).siblings("ul").css("display") == "none"){ $(this).siblings("ul").delay(settings.mobileShowDelay).slideDown(settings.speed); $(this).parent("li").siblings("li").find("ul").delay(settings.mobileHideDelay).slideUp(settings.speed); return false; } else{ $(this).siblings("ul").delay(settings.mobileHideDelay).slideUp(settings.speed); } }); } }); } function showCollapse(){ $(menu).children("li:not(.showhide)").hide(0); $(menu).children("li.showhide").show(0).bind("click", function(){ if($(menu).children("li").is(":hidden")){ $(menu).children("li").slideDown(settings.speed); scrollable(true); } else{ $(menu).children("li:not(.showhide)").slideUp(settings.speed); $(menu).children("li.showhide").show(0); $(menu).find("ul").hide(settings.speed); scrollable(false); } }); } function hideCollapse(){ $(menu).children("li").show(0); $(menu).children("li.showhide").hide(0); scrollable(false); } function rightAlignMenu() { $(menu).children("li").addClass("right"); var menuItems = $(menu).children("li"); $(menu).children("li:not(.showhide)").detach(); for(var i = menuItems.length; i >= 1; i--){ $(menu).append(menuItems[i]); } } function unbindEvents(){ $(menu).find("li, a").unbind(); $(document).unbind("click.menu touchstart.menu"); $(menu).find("ul").hide(0); } function windowWidth(){ return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth; } function scrollable(flag){ if(settings.scrollable){ if(flag){ $(menuWrapper).css("max-height", settings.scrollableMaxHeight).addClass("scrollable") } else{ $(menuWrapper).css("max-height", "auto").removeClass("scrollable") } } } //Fixes Aria Stuff $('.flexy-menu > li').keydown(function(event){ if ( event.which == 13 ) { if($(this).find('ul').length>0) { var menu_dat=$(this).find('ul'); $(menu_dat).show(); } } }); var top_level_links = $('.flexy-menu').find('> li > ul li:last-child a'); $(top_level_links).blur(function(){ $('.flexy-menu > li').find('ul').hide(); }); } }(jQuery));
    /*Flexi css*/
    @import url(../fontawesome/css/font-awesome.css);
    @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro");
    /*******************************************************************************
                  Default configuration
    *******************************************************************************/
    .flexy-menu {
      width: 100%;
      margin: 0;
      padding: 0;
      position: relative;
      float: left;
      list-style: none;
      background: #eee; }
    
    .flexy-menu li {
      display: inline-block;
      margin: 0;
      padding: 0;
      float: left;
      line-height: 20px;
      position: relative; }
    
    .flexy-menu > li > a {
      padding: 20px 22px;
      color: #e3001b;
      text-decoration: none;
      display: block;
      text-transform: none;
      -webkit-transition: color 0.2s linear, background 0.2s linear;
      -moz-transition: color 0.2s linear, background 0.2s linear;
      -o-transition: color 0.2s linear, background 0.2s linear;
      transition: color 0.2s linear, background 0.2s linear; }
    
    .flexy-menu li:hover > a,
    .flexy-menu li.active > a {
      background: #555;
      color: #fff; }
    
    /*----------------------------
      Right alignment (item)
    ----------------------------*/
    .flexy-menu li.right {
      float: right; }
    
    .flexy-menu .active {
      background: #b0af9e; }
    .flexy-menu a.active {
      color: white; }
    
    /*-----------------------------
      Drop down configuration
    -----------------------------*/
    .flexy-menu ul,
    .flexy-menu ul li ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: none;
      position: absolute;
      z-index: 99999;
      width: 300px;
      background: #eee;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
    
    .flexy-menu ul {
      top: 60px;
      left: 0; }
    
    .flexy-menu ul li ul {
      top: 0;
      left: 100%; }
    
    .flexy-menu ul li {
      clear: both;
      width: 100%;
      border: none; }
    
    .flexy-menu ul li a {
      padding: 10px 20px;
      width: 100%;
      color: #e3001b;
      text-decoration: none;
      display: inline-block;
      float: left;
      clear: both;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -webkit-transition: color 0.2s linear, background 0.2s linear;
      -moz-transition: color 0.2s linear, background 0.2s linear;
      -o-transition: color 0.2s linear, background 0.2s linear;
      transition: color 0.2s linear, background 0.2s linear; }
    
    /*-----------------------------
      Drop down indicators
    -----------------------------*/
    .flexy-menu > li .indicator {
      position: absolute;
      color: #e3001b;
      top: 20px;
      right: 8px;
      font-size: 17px; }
    
    .flexy-menu ul > li .indicator {
      top: 10px;
      right: 8px; }
    
    /*------------------
      Preset sizes
    ------------------*/
    .thin > li > a {
      padding: 10px 22px; }
    
    .thin ul {
      top: 40px; }
    
    .thin > li .indicator {
      top: 10px; }
    
    .thick > li > a {
      padding: 40px 22px; }
    
    .thick ul {
      top: 100px; }
    
    .thick > li .indicator {
      top: 40px; }
    
    /*-------------------------
      Icons configuration
    -------------------------*/
    .flexy-menu i {
      line-height: 20px !important;
      margin-right: 6px;
      font-size: 18px;
      float: left; }
    
    /*------------------------------------
      Collapsible menu configuration
    ------------------------------------*/
    .flexy-menu > li.showhide {
      display: none;
      width: 100%;
      height: 50px;
      cursor: pointer;
      color: #dedede;
      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
      background: #333333; }
    
    .flexy-menu > li.showhide span.title {
      margin: 16px 0 0 25px;
      float: left; }
    
    .flexy-menu > li.showhide span.icon {
      margin: 17px 20px;
      float: right; }
    
    .flexy-menu > li.showhide .icon em {
      margin-bottom: 3px;
      display: block;
      width: 20px;
      height: 2px;
      background: #ccc; }
    
    /*-----------------
      Light Theme
    -----------------*/
    .light {
      background: #fff;
      border: solid 1px #dfdfdf; }
    
    .light a {
      color: #555 !important; }
    
    .light li:hover > a, .light li.active a {
      background: #555;
      color: #fff !important; }
    
    .light ul, .light ul li ul {
      background: #fff; }
    
    .light > li.showhide {
      background: #fff;
      color: #555 !important; }
    
    .light > li.showhide .icon em {
      background: #555; }
    
    .light li .indicator {
      color: #555; }
    
    .light li:hover > .indicator {
      color: #fff; }
    
    /*------------
      Colors
    ------------*/
    .blue li:hover > a, .blue li.active > a {
      background: #02B8FA;
      color: #fff !important; }
    
    .green li:hover > a, .green li.active > a {
      background: #b0af9e;
      color: #fff !important; }
    
    .red li:hover > a, .red li.active > a {
      background: #cf0404;
      color: #fff !important; }
    
    .orange li:hover > a, .orange li.active > a {
      background: #ff670f;
      color: #fff !important; }
    
    .yellow li:hover > a, .yellow li.active > a {
      background: #febf01;
      color: #444 !important; }
    
    .yellow li .indicator {
      color: #dedede; }
    
    .yellow li:hover > .indicator {
      color: #444; }
    
    .yellow.light li .indicator {
      color: #555; }
    
    .purple li:hover > a, .purple li.active > a {
      background: #A737FA;
      color: #fff !important; }
    
    .pink li:hover > a, .pink li.active > a {
      background: #f82b4c;
      color: #fff !important; }
    
    /*******************************************************************************
                  Vertical configuration
    *******************************************************************************/
    .flexy-menu.vertical {
      width: 200px; }
    
    .flexy-menu.vertical li {
      width: 100%; }
    
    .flexy-menu.vertical li a {
      display: inline-block !important;
      width: 100%;
      padding: 18px 20px 16px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box; }
    
    .flexy-menu.vertical ul li {
      width: 100%; }
    
    /*--------------------------------
      Drop down on vertical menu
    --------------------------------*/
    .flexy-menu.vertical ul,
    .flexy-menu.vertical ul li ul {
      width: 150px; }
    
    .flexy-menu.vertical ul {
      top: 0;
      left: 100%; }
    
    .flexy-menu.vertical ul li ul {
      top: 0px; }
    
    /*---------------------------------
      Vertical menu on right side 
    ---------------------------------*/
    .flexy-menu.vertical.right {
      float: right !important; }
    
    .flexy-menu.vertical.right ul {
      left: -150px !important; }
    
    /*------------------------------
      Indicator on vertical menu 
    ------------------------------*/
    .flexy-menu.vertical > li .indicator {
      top: 17px;
      right: 15px;
      font-size: 17px; }
    
    .flexy-menu.vertical ul > li .indicator {
      top: 18px;
      right: 15px; }
    
    /*****************************************************************************
                  Responsive design
    *****************************************************************************/
    @media (max-width: 767px) {
      .flexy-menu-wrapper.scrollable {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; }
    
      .flexy-menu.vertical {
        width: 100%; }
    
      .flexy-menu li {
        display: block;
        width: 100%; }
    
      .flexy-menu > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 25px; }
    
      .flexy-menu a {
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box; }
    
      .flexy-menu ul,
      .flexy-menu ul li ul,
      .flexy-menu.vertical ul,
      .flexy-menu.vertical ul li ul {
        width: 100%;
        left: 0;
        border-left: none;
        position: static;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box; }
    
      .flexy-menu ul li {
        border-left: none;
        border-right: none; }
    
      .flexy-menu ul li a,
      .flexy-menu.vertical ul li a {
        padding-top: 10px;
        padding-bottom: 10px; }
    
      .flexy-menu ul > li > a {
        padding-left: 40px !important; }
    
      .flexy-menu > li .indicator {
        top: 15px;
        right: 25px;
        font-size: 17px; }
    
      .flexy-menu ul > li .indicator {
        right: 24px; }
    
      .flexy-menu.vertical ul > li .indicator {
        top: 10px;
        right: 15px; }
    
      .flexy-menu > li > ul > li > a {
        padding-left: 40px !important; }
    
      .flexy-menu > li > ul > li > ul > li > a {
        padding-left: 60px !important; }
    
      .flexy-menu > li > ul > li > ul > li > ul > li > a {
        padding-left: 80px !important; } }
    
    

    Share this post