How can I made JKmegamenu hold its position?

[dzash2000]

Hi -

I'm not sure whether this is a javascript or CSS question. I understand CSS a bit more than javascript (which I don't understand at all) so I posted it here.

I'm playing with a jkmegamenu. I need it pretty wide and now (about 4 columns wide) it protrudes a bit on the right side of the layout's "container". This is not really a big problem - except that if the browser window is too narrow the dropdown megamenu div shifts to the extreme left - hiding the first few columns. This is an ugly problem. It's also unpredictable as to what browser window width triggers the nasty shifting behavior.

I would like the megamenu to stay in the same position no matter how wide or narrow the browser window is. How can I make it do this?

Thanks in advance.
D2
The page I'm working on isn't online but this one is the same layout (http://www.lkylaw.com)WITHOUT the problem I've described. I hope that helps.

[Deadweight]

Post all the code you have?

[dzash2000]

Crazykld69 -
Thanks for your reply.

Here's the web page: to view the puzzle I'm trying to solve. (http://www.newpixelcity.com/LKY/JKMM/)

I was going to isolate the menu but then I started to explain what I was looking for and got a little carried away... as you will see by the length of the explanation there.

Thanks again.
d2

[jscheuer1]

Looks like someone already edited the jkmegamenu.js file a bit in the function that controls this, but for the top position. This is the function from that script that we are concerned with for the positioning. For the left positioning, particularly the highlighted line:


alignmenu:function($, e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $anchor=megamenu.$anchorobj
var $menu=megamenu.$menuobj
var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
var menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu
$menu.css({left:menuleft+"px", top:menutop+"px"})
this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},

To get what you want, change it to:


var menuleft=megamenu.offsetx //get x coord of menu

BTW, for the top position, this works better in Firefox (others were already OK, but this doesn't hurt them):


var menutop=$anchor.parents('div').eq(0).offset().top+$anchor.parents('div').eq(0).height() //get y coord of menu

So you're new function would look like so:


alignmenu:function($, e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $anchor=megamenu.$anchorobj
var $menu=megamenu.$menuobj
//var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
var menuleft=megamenu.offsetx //get x coord of menu
//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
//var menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu
var menutop=$anchor.parents('div').eq(0).offset().top+$anchor.parents('div').eq(0).height() //get y coord of menu
$menu.css({left:menuleft+"px", top:menutop+"px"})
this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},

[dzash2000]

jscheuer1 -

Thanks for the detailed response. It works magnificently!

I also appreciate your coming back with the "BTW" and providing such complete code.

This is a great help. Thanks again.

Josh