PDA

View Full Version : How do I control the vertical space between subitems in jqueryslidemenu.js?



Interrobang
10-05-2013, 01:32 AM
1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

3) Describe problem: When submenu items appear, there is a space about 2 pixels wide between each one. The element behind the submenu items shows through. I would like to get rid of that space, so that the top of each submenu item is at the same level as the bottom of the menu item above it.

While that would be enough, I would also like submenu items to be separated by a 1-pixel-wide light gray stripe.

For reference, here's the code for the menu:



/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Update: April 12th, 10: Fixed compat issue with jquery 1.4x

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function (e)
{
var $targetul=$(this).children("ul:eq(0)")
this._offsets = {left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader ? 0 : this._dimensions.w
menuleft = (this._offsets.left +
menuleft +
this._dimensions.subulw > $(window).width()) ?
(this.istopheader ?
-this._dimensions.subulw + this._dimensions.w :
-this._dimensions.w)
: menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function(){
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

Deadweight
10-05-2013, 03:45 AM
What browser are you viewing this from? I dont see any issues 0.0

Interrobang
10-05-2013, 04:31 AM
What browser are you viewing this from? I dont see any issues 0.0

Thank you for your reply. I am using Google Chrome, and I saw the same behavior in IE, I believe version 9. The web site I am working on is http://www.friendsofcrowellhilaka.org . If you hover over "Endorsed By", you will see a 3-item sub-menu appear, with the element behind the sub-menu visible between the items in the sub-menu.

RobR

Deadweight
10-05-2013, 04:42 AM
EDIT: I found your links. I will take a look at them tomorrow then tell you the problem (unless someone else beats me to it)