flyoutMenus

by Joe Saad

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus officiis, saepe excepturi aliquid error? Quis delectus aut alias, ad magnam illum vero non, labore pariatur consectetur sapiente voluptates sed adipisci.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni animi, at officiis aliquam laborum ad. Placeat ad soluta, facilis sequi in culpa exercitationem itaque delectus, ea, excepturi amet minus.



<a href="#" class="fly-menu">menu</a>

<div class="fly-menu menu-bottom">
    <div class="point-arrow"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi magni architecto expedita non pariatur ipsa sequi veritatis repudiandae necessitatibus a est, sed ex esse in deserunt libero voluptate consectetur id!</p>
</div>

CSS

div.fly-menu {
    display: none;
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid green;
    background-color: #fff;
}


/*.right-menu  menu right of the trigger */
.right-menu .point-arrow {
    
}

/* .bottom-menu menu bottom of the trigger  */

.point-arrow{
    position: absolute;
    width: 0; 
	height: 0; 
}

.menu-bottom .point-arrow{
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;	
	border-bottom: 17px solid #977456; 
    top: -17px;
}

.menu-top .point-arrow {  
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;	
	border-top: 17px solid #977456;
    bottom: -17px;
}

.menu-right .point-arrow {
	border-top: 17px solid transparent;
	border-bottom: 17px solid transparent; 	
	border-right:17px solid #977456;
    left: -17px;
}

.menu-left .point-arrow {
    border-top: 17px solid transparent;
	border-bottom: 17px solid transparent; 	
	border-left:17px solid #977456;
    right: -17px;
}

JavaScript

$('a.fly-menu').click(function (e) {
    e.preventDefault();
    var divMenu = $(this).next('div.fly-menu');
    var divMenuClass = $(this).next('div.fly-menu').attr('class');
    var menuKind = divMenuClass.substr(divMenuClass.indexOf('menu-'));
    var currentPos = $(this).position();
    
    var menuLocation = [
        {
        	"menuKind" : "menu-bottom",
            "top" : currentPos.top + 40 ,
            "left" : 0
        },        
        {
        	"menuKind" : "menu-right",
            "top" : 0 ,
            "left" : currentPos.left + 50
        },
        {
        	"menuKind" : "menu-top",
            "top" : currentPos.top - divMenu.height() -130  ,
            "left" : 0
        },
        {
        	"menuKind" : "menu-left",
            "top" : 0,
            "left" : currentPos.left - divMenu.width() -130 
        }
        
    ];
    
    var elementPos = menuLocation.map(function(x) {return x.menuKind; }).indexOf(menuKind);
//alert(menuLocation[elementPos].id);
    
    $(this).next('div.fly-menu').css({
        "top": currentPos.top + menuLocation[elementPos].top,
         "left": currentPos.left + menuLocation[elementPos].left
    });
    $(this).next('div.fly-menu').toggle();
});


$(document).mouseup(function (e) {
    var container = $("div.fly-menu");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.hide();
    }
});