Five Useful Interactive CSS/jQuery Techniques Deconstructed - Practical JavaScript Techniques - page 29

// hide the dropdown
$ ( this ). removeClass ( 'main-nav-item-active' );

});

});

Here, we use jQuery's position() method to get the left offset from the current tab. We

19

then use this value to position the dropdown directly beneath the appropriate tab.

However, with the tabs on the right side, the dropdown menu will end up poking out of the tab
area. Besides looking bad, this could lead to overflow issues , with portions of the dropdown
falling outside of the browser window.

Let's fix the positioning with some JavaScript:

$ ( function () {
var $mainNav = $ ( '#main-nav' ),
navWidth = $mainNav . width ();

$mainNav . children ( '.main-nav-item' ). hover ( function ( ev ) {
var $this = $ ( this ),
$ dd = $this . find ( '.main-nav-dd' );

// get the left position of this tab
var leftPos = $this . find ( '.main-nav-tab' ). position (). left ;

// get the width of the dropdown
var ddWidth = $ dd . width (),
leftMax = navWidth - ddWidth ;

// position the dropdown
$ dd . css ( 'left' , Math . min ( leftPos , leftMax ) );

// show the dropdown
$this . addClass ( 'main-nav-item-active' );
}, function ( ev ) {