Give the admin drop-down menu elements the same hover/click state as …

…their anchors. Also closes stephenmcd#208.
a5an0 · Apr 25, 2012 · 9798473 · 9798473
1 parent 898df1f
commit 9798473
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 7 deletions.
diff --git a/mezzanine/core/static/mezzanine/css/admin/global.css b/mezzanine/core/static/mezzanine/css/admin/global.css
@@ -30,6 +30,9 @@ label.interface {display:inline !important; float:none !important;
     background:#e6e6e6; border-radius:0 0 5px 5px; padding:0;
     border-bottom:1px solid #ccc;
 }
+.dropdown-menu-hover {cursor:pointer;}
+.dropdown-menu-hover a {color:#444;}
+
 .messagelist {margin-top:14px; z-index:0 !important;}
 .inline-stacked ._order, div.dynamic-fields ._order {display:none;}
 .items .placeholder {display:block;}
@@ -49,3 +52,4 @@ fieldset .field-box {margin-right:150px !important;}
 
 /* Fix for IE7 layout issue */
 #content { margin-left: 0; margin-right: 0; padding: 0 15px; }
+
diff --git a/mezzanine/core/static/mezzanine/js/admin/navigation.js b/mezzanine/core/static/mezzanine/js/admin/navigation.js
@@ -10,7 +10,9 @@ $(function() {
                      .append($('.dropdown-menu').show())
                      .css({display: 'inline-block'});
 
-    $('.dropdown-menu a').mouseover(function() {
+    var primaryMenuItems = $('.dropdown-menu a');
+
+    primaryMenuItems.mouseover(function() {
         var menu = $(this).parent().find('.dropdown-menu-menu').clone();
         // If we're over a primary menu link, clone the child menu and
         // show it.
@@ -35,15 +37,11 @@ $(function() {
                 $('.dropdown-menu a').mouseout();
             });
         }
-    }).click(function() {
-        var first = $(this).parent().find('.dropdown-menu-menu a:first');
-        location = first.attr('href');
-        return false;
     });
 
     // Set a timeout to hide visible menus on mouseout of primary
     // menu item.
-    $('.dropdown-menu a').mouseout(function() {
+    primaryMenuItems.mouseout(function() {
         if ($(this).parent().find('.dropdown-menu-menu').length == 1) {
             onMenu = false;
             window.setTimeout(function() {
@@ -52,7 +50,38 @@ $(function() {
                 }
             }, 1000);
         }
-    })
+    });
+
+     // If the primary menu item is clicked, go to the URL for
+     // its first child.
+     primaryMenuItems.click(function() {
+        var thisHref = $(this).attr('href');
+        if (thisHref && thisHref != '#') {
+            return true;
+        }
+        var first = $(this).parent().find('.dropdown-menu-menu a:first');
+        var firstHref = first.attr('href');
+        if (firstHref) {
+            location = firstHref;
+        }
+        return false;
+    });
+
+    // Give the drop-down menu items elements the same hover
+    // state and click event as their anchors.
+    var subMenuItems = $('.dropdown-menu-menu li');
+
+    subMenuItems.live('mouseover', function() {
+        $(this).addClass('dropdown-menu-hover');
+    });
+
+    subMenuItems.live('mouseout', function() {
+        $(this).removeClass('dropdown-menu-hover');
+    });
+
+    subMenuItems.live('click', function() {
+        location = $(this).find('a').attr('href');
+    });
 
     // Provides link to site.
     $('#user-tools li:last').before('<li><a href="/">View Site</a></li>');