Strange animation issue and margin in superfish menu

HTML & CSS
1

Hello all -

I am using a superfish js menu on http://www.computerdepot-online.net/ and having 2 issues.

One, when you hover over something with a child, you will see that it flies out halfway, then the rest of the way, creating a chopping effect.

Then, if you look at Our Services, then one of the services with a child, you will notice a gap between menus. The CSS is below, but I can’t seem to find what is causing that gap.

Any ideas?



/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			20em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			20em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
	border-left:	1px solid #fff;
	border-top:		1px solid #fff;
	padding: 		.75em 1em;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
}
.sf-menu li {
	background:		#3266cc;
}
.sf-menu li li {
	background:		#3266cc;
}
.sf-menu li li li {
	background:		#3266cc;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#7c1d1d;
	outline:		0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}
2

Howdy Matt,

The chopping effect you are getting is due to the ‘animation’ defined in the initialization along with the menu items being a little lengthy. I would recommend using supersubs in addition to superfish.

http://users.tpg.com.au/j_birch/plugins/superfish/#sample5

You can define the min, max and extra widths as you see fit. I’ve included an example below using sample5 and the parameters you used in .superfish({});

Let me know if the gap is still there once you try this (if it works).

Good luck! :slight_smile:

 
 var $j = jQuery.noConflict();
     $j(document).ready(function(){ 
        $j("ul.sf-menu").supersubs({
            minWidth:    12,   // minimum width of sub-menus in em units 
            maxWidth:    27,   // maximum width of sub-menus in em units 
            extraWidth:  1     // extra width can ensure lines don't sometimes turn over
        }).superfish({ 
            animation: {height:'show'},   // slide-down effect without fade-in 
            delay:     200,              // .2 second delay on mouseout 
            speed:       'fast',                          // faster animation speed 
            autoArrows: true,
            dropShadows: false
        }); 
    });

EDIT: the supersubs.js file should be included in the package you downloaded for superfish. Of course you need to include this before the above example will function correctly :).

3

Thanks. It definitely fixed my choppy issue. However, I have now lost my arrows. Not sure why that would be.

Also, I can’t figure out why I have an extra gap in the secondary child pages.

Our Services -> Computer Networking -> Home Wireless Networking

4

Matt,

Check the include to your supersubs.js file. Should it be:

/wp-content/themes/blue-zinfandel-enhanced-20/js/supersubs.js ??

None of the superfish javascript is firing because of .supersubs being undefined. Once this is fixed you should get animations and arrows at least.

(still troubleshooting the gap)

5

Same here!

Try playing with the width declarations inside of the function call to supersubs(), or removing them altogether. I think it might have something to do with it using those values to calculate the offset of the sub-menu relative to its parent so it displays (im)properly.
:shifty:

6

You’re welcome …

Glad I could help! :smiley:

7

Looks like I got it with:

minWidth: 5, // minimum width of sub-menus in em units
maxWidth: 17.5, // maximum width of sub-menus in em units

Thank you, thank you, thank you!

8

Duh. I forgot to add the first part of the location. Oops. Thanks for that catch. Works like a dream now.

Yeah, that gap is baffling to me.