JQuery Navigation Dropdown
<p>I have just written some code for a navigation and dropdown on hover interaction.</p>

<p>Although it works OK, I am really keen to know if I should have taken a different approach or if it could be improved.</p>

<p>I know that a more common technique would be to nest the dropdown within the navigation elements but I really wanted to play around with custom data-attributes as would like to be able to manipulate various elements on any part of the page depending on how the user is interacting with the navigation.</p>

<p>Again, although working as intended, but a little unstable, my reason for writing this entry/question was to get some feedback on a better jQuery script as I really don't know if my method is correct or semantic coding? Can this be improved?</p>

<p>Appreciate any help!</p>

<p>Here is some HTML within an HTML5 boilerplate template:</p>

<pre><code>            &lt;!DOCTYPE html&gt;
            &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
            &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
            &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
            &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
                &lt;head&gt;
                    &lt;meta charset="utf-8"&gt;
                    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
                    &lt;title&gt;&lt;/title&gt;
                    &lt;meta name="description" content=""&gt;
                    &lt;meta name="viewport" content="width=device-width"&gt;

                    &lt;!-- Place favicon.ico and apple-touch-icon.png in the root directory --&gt;

                    &lt;link rel="stylesheet" href="css/normalize.css"&gt;
                    &lt;link rel="stylesheet" href="css/main.css"&gt;
                    &lt;script src="js/vendor/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
                &lt;/head&gt;
                &lt;body&gt;
                    &lt;!--[if lt IE 7]&gt;
                        &lt;p class="chromeframe"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; or &lt;a href="http://www.google.com/chromeframe/?redirect=true"&gt;activate Google Chrome Frame&lt;/a&gt; to improve your experience.&lt;/p&gt;
                    &lt;![endif]--&gt;

                    &lt;!-- Add your site or application content here --&gt;


                    &lt;div id="wrapper"&gt;
                        &lt;div id="globalHeader"&gt;
                            &lt;header class="clearfix"&gt;
                                &lt;div class="innerWrapper"&gt;
                                    &lt;h1&gt;Logo&lt;/h1&gt;
                                    &lt;div id="mainNav"&gt;
                                        &lt;nav&gt;
                                            &lt;a href="#" title="sample" id="sample" data-section="sample"&gt;sample&lt;/a&gt;
                                            &lt;a href="#" title="another" id="another" data-section="another"&gt;another&lt;/a&gt;
                                        &lt;/nav&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;  
                            &lt;/header&gt;
                        &lt;/div&gt;      
                        &lt;footer&gt;
                            &lt;div class="innerWrapper"&gt;
                                &amp;copy;Company
                            &lt;/div&gt;
                        &lt;/footer&gt;   
                    &lt;/div&gt;              


                    &lt;!-- DROPDOWNS --&gt;
                    &lt;div class="dropdown" data-menu="sample"&gt;&lt;h2&gt;Sample&lt;/h2&gt;&lt;/div&gt;
                    &lt;div class="dropdown" data-menu="another"&gt;&lt;h2&gt;Another&lt;/h2&gt;&lt;/div&gt;


                    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
                    &lt;script&gt;window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.9.0.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
                    &lt;script src="js/plugins.js"&gt;&lt;/script&gt;
                    &lt;script src="js/main.js"&gt;&lt;/script&gt;

                    &lt;!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --&gt;
                    &lt;script&gt;
                        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
                        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
                        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
                        s.parentNode.insertBefore(g,s)}(document,'script'));
                    &lt;/script&gt;
                &lt;/body&gt;
            &lt;/html&gt;
</code></pre>

<p>Some CSS:</p>

<pre><code>            /* Structure */
            img{
            width:100%; 
            }

            #wrapper {
            width: 100%;
            margin: auto;
            padding: 0;
            }
            .innerWrapper{
            max-width:1000px;
            margin: auto;
            }
            #main {
            width: 60%;
            margin-right: 5%;
            float: left;
            }
            aside {
            width: 35%;
            float: right;
            }

            header{
            background:#fda10f;
            padding:8px 10px;
            color:#fff;
            }

            header a, header a:visited{
            color:#fff;
            text-decoration:none;
            text-transform:uppercase;
            text-shadow:1px 0 4px #b57715;
            }
            /* Logo H1 */
            header h1 {
            float: left;
            display: block;
            margin:0;
            padding:0;
            font-size:10px;
            } 

            /* Nav */
            #mainNav {
            float: left;
            margin:0 0 0 40px;
            padding:0;
            }

            #mainNav nav a{
            padding:12px;
            font-size:1.1em;
            }

            footer{
            font-size:0.8em;
            margin:30px 0;
            padding:20px 0 0 0;
            text-align:center;
            color:#666;
            }

            #customerNav{
            float:right;
            }

            #customerNav nav a{
            padding:0 10px;
            font-size:0.7em;
            }

            .dropdown{
            display:none;
            position:absolute;
            background:pink;
            width:100%;
            }
</code></pre>

<p>Here is my jQuery:</p>

<pre><code>            // OPEN DROPDOWN
            function dropdownOpen(section){
                var headerHeight = $('#globalHeader').height();
                $('div[data-menu='+section+']').css('top',headerHeight).fadeIn('slow');
            }
            // CLOSE DROPDOWN
            function dropdownClose(section){
                $('div[data-menu='+section+']').fadeOut('fast');
            }
            // NAV AND DROPDOWN INTERACTION
            $("#mainNav a").mouseenter(function(){
                // WHICH SECTION
                var section = $(this).attr('data-section');
                // GET HEADER HEIGHT AND PLACE DROPDOWN DIRECTLY BELOW
                var headerHeight = $('#globalHeader').height();
                // ONLY SHOW THE DROPDOWN IF THE ASSOCIATED DIV IS NOT ALREADY OPEN
                setTimeout(function(){
                    var isVisible = $('div[data-menu='+section+']').is(':visible');
                    if(isVisible === false){
                        dropdownOpen(section);
                    }
                }, 100);
            // ON MOUSE LEAVE EITHER CLOSE OR KEEP OPEN DEPENDENT ON WHETHER THE USER IS STILL ON THE DROPDOWN  
            }).mouseleave(function(){
                var mainNav = $(this);
                var section = $(this).attr('data-section');
                // CLOSE THE DROPDOWN AFTER TIMEOUT
                var timeoutId = setTimeout(function(){
                    dropdownClose(section);
                }, 100);    
                // IF THE MOUSE IS STILL OVER THE DROPDOWN, CANCEL THE TIMEOUT
                $(".dropdown").mouseover(function(){
                    clearTimeout(timeoutId);
                }).mouseleave(function(){
                    //IF THE MOUSE HAS LEFT THE DROPDOWN, CLOSE IT
                    var timeoutDrop = setTimeout(function(){        
                        dropdownClose(section);
                    }, 100);
                    // IF THE MOUSE IS BACK OVER THE NAVIGATION ON THE SAME SECTION, CANCEL THE CLOSE/LEAVE DROPDOWN OPEN
                    $('a[data-section='+section+']').mouseover(function(){
                        clearTimeout(timeoutDrop);
                    });
                });     

            });
</code></pre>
