Advanced Search

Results 1 to 4 of 4

Thread: How do I control the vertical space between subitems in jqueryslidemenu.js?

  1. #1
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How do I control the vertical space between subitems in jqueryslidemenu.js?

    1) Script Title: jQuery Multi Level CSS Menu #2

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_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:

    Code:
    /*********************
    //* 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)

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    274
    Thanks
    3
    Thanked 17 Times in 17 Posts

    Default

    What browser are you viewing this from? I dont see any issues 0.0
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Crazykld69 View Post
    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

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    274
    Thanks
    3
    Thanked 17 Times in 17 Posts

    Default

    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)
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. Jqueryslidemenu
    By moobsuk in forum CSS
    Replies: 1
    Last Post: 08-03-2010, 04:12 PM
  2. Collapsed space then black space appears in ultimate fade-in slideshow
    By cnymike in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-29-2010, 03:35 PM
  3. Simple control gallery button show vertical
    By eliasfrost in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-31-2009, 03:27 AM
  4. Extra Vertical Space in IE
    By Bribunk in forum CSS
    Replies: 2
    Last Post: 07-21-2008, 04:13 PM
  5. DHTML Adjust Bars converted to Vertical Volume Slider control!!!
    By Pol NRG in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-17-2005, 11:36 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •