Smooth Navigation Menu - fix jitter on reload

[barlow]

1) Script Title: Smooth Navigation Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem:
With a drop-down menu the menu bar 'jitters' on page reload because the down arrow GIF and offset are being redrawn. I did a quick fix by eliminating the arrow entirely, and adjusting the offset to match my CSS offset. My resulting code:


My quick fix:

ddsmoothmenu.js:
arrowimages: {down:['downarrowclass', '', 6], right:['rightarrowclass', 'right.gif']}, // remove down arrow and set offset to 6 - same as css

...
//buildmenu function - compensate for lack of downarrow
if(smoothmenu.arrowimages.down[1] == '')
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append('') // two single quotes
else
//original code
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
'<img src="'+ (this.istopheader? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
+'" class="' + (this.istopheader? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
+ '" style="border:0;" />'
)

[ddadmin]

You should be able to minimize any jittering while the arrow images are loading by specifying explicit width/heights for them in the CSS. The code in red is new:

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
width: 5px;
height: 5px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
width: 5px;
height: 5px;
}