Flexy Menu - Responsive Horizontal & Vertical Menu | Basic Aria
Recently I have to add Aria to Flexy menu. I have attached the code.
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));
//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("
/*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; } }