/* Flex Level Popup Menu v1.0
* Created: Dec 27th, 2009 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
//Version 1.1 (March 5th, 2010): Each flex menu (UL) can now be associated with a link dynamically, and/or defined using JavaScript instead of as markup.
//Usage: $(elementselector).addpopupmenu('menuid')
//ie:
//jQuery(document).ready(function($){
//$('a.mylinks').addpopupmenu('popupmenu1') //apply popup menu with ID "popmenu1" to links with class="mylinks"
//})
/*jQuery.noConflict()*/
var jquerypopupmenu={
arrowpath: 'arrow.gif', //full URL or path to arrow image
popupmenuoffsets: [0, 0], //additional x and y offset from mouse cursor for popup menus
animspeed: 200, //reveal animation speed (in milliseconds)
showhidedelay: [150, 150], //delay before menu appears and disappears when mouse rolls over it, in milliseconds
//***** NO NEED TO EDIT BEYOND HERE
startzindex:9999,
builtpopupmenuids: [], //ids of popup menus already built (to prevent repeated building of same popup menu)
positionul:function($, $ul, e){
var istoplevel=$ul.hasClass('jqpopupmenu') //Bool indicating whether $ul is top level popup menu DIV
var docrightedge=$(document).scrollLeft()+$(window).width()-40 //40 is to account for shadows in FF
var docbottomedge=$(document).scrollTop()+$(window).height()-40
if (istoplevel){ //if main popup menu DIV
var x=e.pageX+this.popupmenuoffsets[0] //x pos of main popup menu UL
var y=e.pageY+this.popupmenuoffsets[1]
x=(x+$ul.data('dimensions').w > docrightedge)? docrightedge-$ul.data('dimensions').w : x //if not enough horizontal room to the ridge of the cursor
y=(y+$ul.data('dimensions').h > docbottomedge)? docbottomedge-$ul.data('dimensions').h : y
}
else{ //if sub level popup menu UL
var $parentli=$ul.data('$parentliref')
var parentlioffset=$parentli.offset()
var x=$ul.data('dimensions').parentliw //x pos of sub UL
var y=0
x=(parentlioffset.left+x+$ul.data('dimensions').w > docrightedge)? x-$ul.data('dimensions').parentliw-$ul.data('dimensions').w : x //if not enough horizontal room to the ridge parent LI
y=(parentlioffset.top+$ul.data('dimensions').h > docbottomedge)? y-$ul.data('dimensions').h+$ul.data('dimensions').parentlih : y
}
$ul.css({left:x, top:y})
},
showbox:function($, $popupmenu, e){
clearTimeout($popupmenu.data('timers').hidetimer)
$popupmenu.data('timers').showtimer=setTimeout(function(){$popupmenu.show(jquerypopupmenu.animspeed)}, this.showhidedelay[0])
},
hidebox:function($, $popupmenu){
clearTimeout($popupmenu.data('timers').showtimer)
$popupmenu.data('timers').hidetimer=setTimeout(function(){$popupmenu.hide(100)}, this.showhidedelay[1]) //hide popup menu plus all of its sub ULs
},
buildpopupmenu:function($, $menu, $target){
$menu.css({display:'block', visibility:'hidden', zIndex:this.startzindex}).addClass('jqpopupmenu').appendTo(document.body)
$menu.on('mouseenter', function(){
clearTimeout($menu.data('timers').hidetimer)
})
$menu.on('mouseleave', function(){ //hide menu when mouse moves out of it
jquerypopupmenu.hidebox($, $menu)
})
$menu.data('dimensions', {w:$menu.outerWidth(), h:$menu.outerHeight()}) //remember main menu's dimensions
$menu.data('timers', {})
var $lis=$menu.find("ul").parent() //find all LIs within menu with a sub UL
$lis.each(function(i){
var $li=$(this).css({zIndex: 1000+i})
var $subul=$li.find('ul:eq(0)').css({display:'block'}) //set sub UL to "block" so we can get dimensions
$subul.data('dimensions', {w:$subul.outerWidth(), h:$subul.outerHeight(), parentliw:this.offsetWidth, parentlih:this.offsetHeight})
$subul.data('$parentliref', $li) //cache parent LI of each sub UL
$subul.data('timers', {})
$li.data('$subulref', $subul) //cache sub UL of each parent LI
$li.children("a:eq(0)").append( //add arrow images
'<img src="'+jquerypopupmenu.arrowpath+'" class="rightarrowclass" style="border:0;" />'
)
$li.on('mouseenter', function(e){ //show sub UL when mouse moves over parent LI
var $targetul=$(this).css('zIndex', ++jquerypopupmenu.startzindex).addClass("selected").data('$subulref')
if ($targetul.queue().length<=1){ //if 1 or less queued animations
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer=setTimeout(function(){
jquerypopupmenu.positionul($, $targetul, e)
$targetul.show(jquerypopupmenu.animspeed)
}, jquerypopupmenu.showhidedelay[0])
}
})
$li.on('mouseleave', function(e){ //hide sub UL when mouse moves out of parent LI
var $targetul=$(this).data('$subulref')
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer=setTimeout(function(){$targetul.hide(100).data('$parentliref').removeClass('selected')}, jquerypopupmenu.showhidedelay[1])
})
})
$menu.find('ul').andSelf().css({display:'none', visibility:'visible'}) //collapse all ULs again
$menu.data('$targetref', $target)
this.builtpopupmenuids.push($menu.get(0).id) //remember id of popup menu that was just built
},
init:function($, $target, $popupmenu){
if (this.builtpopupmenuids.length==0){ //only bind click event to document once
$(document).bind("click", function(e){
if (e.button==0){ //hide all popup menus (and their sub ULs) when left mouse button is clicked
$('.jqpopupmenu').find('ul').andSelf().hide()
}
})
}
if (jQuery.inArray($popupmenu.get(0).id, this.builtpopupmenuids)==-1) //if this popup menu hasn't been built yet
this.buildpopupmenu($, $popupmenu, $target)
if ($target.parents().filter('ul.jqpopupmenu').length>0) //if $target matches an element within the popup menu markup, don't bind onpopupmenu to that element
return
$target.on("mouseenter", function(e){
$popupmenu.css('zIndex', ++jquerypopupmenu.startzindex)
jquerypopupmenu.positionul($, $popupmenu, e)
jquerypopupmenu.showbox($, $popupmenu, e)
})
$target.on("mouseleave", function(e){
jquerypopupmenu.hidebox($, $popupmenu)
})
}
}
jQuery.fn.addpopupmenu=function(popupmenuid){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $target=$(this)
jquerypopupmenu.init($, $target, $('#'+popupmenuid))
})
};
//By default, add popup menu to anchor links with attribute "data-popupmenu"
jQuery(document).ready(function($){
var $anchors=$('*[data-popupmenu]')
$anchors.each(function(){
$(this).addpopupmenu(this.getAttribute('data-popupmenu'))
})
})
//ddlistmenu: Function to define a UL list menu dynamically
function ddlistmenu(id, className){
var menu=document.createElement('ul')
if (id)
menu.id=id
if (className)
menu.className=className
this.menu=menu
}
ddlistmenu.prototype={
addItem:function(url, text, target){
var li=document.createElement('li')
li.innerHTML='<a href="'+url+'" target="'+target+'">'+text+'</a>'
this.menu.appendChild(li)
this.li=li
return this
},
addSubMenu:function(){
var s=new ddlistmenu(null, null)
this.li.appendChild(s.menu)
return s
}
}
alert('No errors till here 1');
//$('#Span2').addpopupmenu('Div11');
$('#myDiv').append('<span id="Span2" style="text-align: center;">Test Out 2</span> <div id="Div11" style="display:none; overflow-y:auto; min-height:25px; max-height:300px; width:200px; background-color:White;"><div id="Div21"><div id="Div31" class="link font_color_primary content-right">This was dynamically added</div></div></div>');
jquerypopupmenu.init($,$('#Span2'),$('#Div11'));
<div id="myDiv"></div>
@charset "utf-8";
/* CSS Document */
#popitmenu {
position: absolute;
background-color: #58595b;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
padding:5px;
}
#popitmenu a {
text-decoration: none;
padding-left: 6px;
color: white;
font:bold 11px Arial, Helvetica, sans-serif;
display: block;
padding:9px 9px 9px 9px;
line-height:10px;
text-align:left;
}
#popitmenu a:hover {
background:url(../bg_popmenulinkhover.gif) repeat-x bottom left;
line-height:10px;
color:#000;
}
.active {
padding:5px;
display:block;
color:#aecad1;
margin-bottom:3px;
list-style:none;
font:bold 11px Arial, Helvetica, sans-serif;
list-style-image:none;
position:relative;
height:20px;
color:#000;
}
.active a {
border:0;
margin:0;
padding:0;
display:inline;
}
li span {
float:right;
width:100px;
margin-top:-20px;
text-align:right;
margin-right:5px;
}
/*.content {
background:#fff;
border:1px solid #ccc;
width:86%;
margin:auto;
}
li.active {
background:#9cd0df;
color:#000;
}
*/
/* Popup dropdown menu style */
.jqpopupmenu, .jqpopupmenu ul { /*topmost and sub ULs, respectively*/
font: bold 11px arial;
margin: 0;
padding:5px;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background-color: #58595b;
border:1px solid black;
font: font 12px Arial;
line-height: 18px;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}
.jqpopupmenu li {
position: relative;
}
.jqpopupmenu li a {
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: #fff;
background: #58595b;
text-decoration: none;
padding: 4px 5px;
text-align:left;
}
* html .jqpopupmenu li { /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.jqpopupmenu li a:hover, .jqpopupmenu li.selected>a {
background:#fff url( ../bg_popmenulinkhover.gif) repeat-x bottom left;
color:#000;
}
.rightarrowclass {
position: absolute;
top: 6px;
right: 5px;
}
html>/**/body .userss li {
margin:4px;
}