Index: wp-admin/menu-header.php =================================================================== --- wp-admin/menu-header.php (revision 18532) +++ wp-admin/menu-header.php (working copy) @@ -58,8 +58,10 @@ $class[] = 'wp-has-current-submenu wp-menu-open'; else $class[] = 'current'; - } elseif ( ! empty( $submenu[ $item[2] ] ) && isset( $user_settings[ 'm' . $menu_setting_increment ] ) && 'o' == $user_settings[ 'm' . $menu_setting_increment ] ) { - $class[] = 'wp-menu-open'; + // } elseif ( ! empty( $submenu[ $item[2] ] ) && isset( $user_settings[ 'm' . $menu_setting_increment ] ) && 'o' == $user_settings[ 'm' . $menu_setting_increment ] ) { + // $class[] = 'wp-menu-open'; + } else { + $class[] = 'wp-not-current-submenu'; } if ( ! empty($item[4]) ) @@ -75,7 +77,6 @@ else $img = ''; } - $toggle = '

'; $arrow = '
'; $title = wptexturize($item[0]); @@ -92,9 +93,9 @@ $menu_file = substr($menu_file, 0, $pos); if ( ( ('index.php' != $submenu[$item[2]][0][2]) && file_exists(WP_PLUGIN_DIR . "/$menu_file") ) || !empty($menu_hook)) { $admin_is_parent = true; - echo "
$img
$arrow$toggle$title"; + echo "
$img
$arrow$title"; } else { - echo "\n\t
$img
$arrow$toggle$title"; + echo "\n\t
$img
$arrow$title"; } } else if ( !empty($item[2]) && current_user_can($item[1]) ) { $menu_hook = get_plugin_page_hook($item[2], 'admin.php'); @@ -103,9 +104,9 @@ $menu_file = substr($menu_file, 0, $pos); if ( ('index.php' != $item[2]) && file_exists(WP_PLUGIN_DIR . "/$menu_file") || !empty($menu_hook) ) { $admin_is_parent = true; - echo "\n\t
$img
$arrow$toggle{$item[0]}"; + echo "\n\t
$img
$arrow{$item[0]}"; } else { - echo "\n\t
$img
$arrow$toggle{$item[0]}"; + echo "\n\t
$img
$arrow{$item[0]}"; } } Index: wp-admin/js/common.dev.js =================================================================== --- wp-admin/js/common.dev.js (revision 18532) +++ wp-admin/js/common.dev.js (working copy) @@ -5,13 +5,13 @@ init : function() { var menu = $('#adminmenu'); - $('.wp-menu-toggle', menu).each( function() { - var t = $(this), sub = t.siblings('.wp-submenu'); - if ( sub.length ) - t.click(function(){ adminMenu.toggle( sub ); }); - else - t.hide(); - }); + // $('.wp-menu-toggle', menu).each( function() { + // var t = $(this), sub = t.siblings('.wp-submenu'); + // if ( sub.length ) + // t.click(function(){ adminMenu.toggle( sub ); }); + // else + // t.hide(); + // }); this.favorites(); @@ -26,63 +26,87 @@ return false; }); - if ( $('body').hasClass('folded') ) - this.fold(); + this.flyout( $('#adminmenu li.wp-has-submenu') ); + + this.fold( ! $('body').hasClass('folded') ); }, restoreMenuState : function() { // (perhaps) needed for back-compat }, - toggle : function(el) { - el.slideToggle(150, function() { - var id = el.css('display','').parent().toggleClass( 'wp-menu-open' ).attr('id'); - if ( id ) { - $('li.wp-has-submenu', '#adminmenu').each(function(i, e) { - if ( id == e.id ) { - var v = $(e).hasClass('wp-menu-open') ? 'o' : 'c'; - setUserSetting( 'm'+i, v ); - } - }); - } + flyout: function( el, unbind ) { + if ( unbind ) { + console.log( 'unbinding flyout', el ); + el.unbind(); // Unbind flyout + return; + } + console.log( 'binding flyout', el ); + + el.hoverIntent({ + over: function(e){ + var m, b, h, o, f; + m = $(this).find('.wp-submenu'); + b = $(this).offset().top + m.height() + 1; // Bottom offset of the menu + h = $('#wpwrap').height(); // Height of the entire page + o = 60 + b - h; + f = $(window).height() + $(window).scrollTop() - 15; // The fold + if ( f < (b - o) ) { + o = b - f; + } + if ( o > 1 ) { + m.css({'marginTop':'-'+o+'px'}); + } else if ( m.css('marginTop') ) { + m.css({'marginTop':''}); + } + m.addClass('sub-open'); + }, + out: function(){ + $(this).find('.wp-submenu').removeClass('sub-open'); + }, + timeout: 220, + sensitivity: 8, + interval: 100 }); + }, - return false; + toggle : function() { + // Removed in 3.3. + // (perhaps) needed for back-compat }, - fold : function(off) { - if (off) { - $('body').removeClass('folded'); - $('#adminmenu li.wp-has-submenu').unbind(); - } else { - $('body').addClass('folded'); - $('#adminmenu li.wp-has-submenu').hoverIntent({ - over: function(e){ - var m, b, h, o, f; - m = $(this).find('.wp-submenu'); - b = $(this).offset().top + m.height() + 1; // Bottom offset of the menu - h = $('#wpwrap').height(); // Height of the entire page - o = 60 + b - h; - f = $(window).height() + $(window).scrollTop() - 15; // The fold - if ( f < (b - o) ) { - o = b - f; - } - if ( o > 1 ) { - m.css({'marginTop':'-'+o+'px'}); - } else if ( m.css('marginTop') ) { - m.css({'marginTop':''}); - } - m.addClass('sub-open'); - }, - out: function(){ - $(this).find('.wp-submenu').removeClass('sub-open'); - }, - timeout: 220, - sensitivity: 8, - interval: 100 - }); + // toggle : function(el) { + // el.slideToggle(150, function() { + // var id = el.css('display','').parent().toggleClass( 'wp-menu-open' ).attr('id'); + // if ( id ) { + // $('li.wp-has-submenu', '#adminmenu').each(function(i, e) { + // if ( id == e.id ) { + // var v = $(e).hasClass('wp-menu-open') ? 'o' : 'c'; + // setUserSetting( 'm'+i, v ); + // } + // }); + // } + // }); + // + // return false; + // }, - } + fold : function( off ) { + var current = $('#adminmenu li.wp-has-current-submenu'); + + $('body').toggleClass( 'folded', ! off ); + $('body').toggleClass( 'expanded', off ); + this.flyout( current, off ); + + // Remove any potentially remaining hoverIntent positioning. + if ( off ) + current.find('.wp-submenu').css( 'marginTop', '0' ); + // if (off) { + // $('body').removeClass('folded'); + // // $('#adminmenu li.wp-has-submenu').unbind(); + // } else { + // $('body').addClass('folded'); + // } }, favorites : function() { Index: wp-admin/admin-header.php =================================================================== --- wp-admin/admin-header.php (revision 18532) +++ wp-admin/admin-header.php (working copy) @@ -80,6 +80,8 @@ if ( get_user_setting('mfold') == 'f' ) $admin_body_class .= ' folded'; +else + $admin_body_class .= ' expanded'; if ( is_admin_bar_showing() ) $admin_body_class .= ' admin-bar'; Index: wp-admin/css/global.dev.css =================================================================== --- wp-admin/css/global.dev.css (revision 18532) +++ wp-admin/css/global.dev.css (working copy) @@ -91,8 +91,9 @@ #adminmenuback, #adminmenuwrap, #adminmenu, -.js.folded #adminmenu .wp-submenu.sub-open, -.js.folded #adminmenu .wp-submenu-wrap { +.js #adminmenu .wp-submenu.sub-open, +.js #adminmenu .wp-submenu-wrap, +.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open { width: 145px; } Index: wp-admin/css/colors-fresh.dev.css =================================================================== --- wp-admin/css/colors-fresh.dev.css (revision 18532) +++ wp-admin/css/colors-fresh.dev.css (working copy) @@ -930,11 +930,40 @@ border-color: #dfdfdf; } +/*.expanded #adminmenu li.wp-not-current-submenu:hover a.menu-top, +.expanded #adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow { */ +/* background-color: #bbb; /* Fallback */ +/* background-image: -ms-linear-gradient(bottom, #aaa, #ccc); /* IE10 */ +/* background-image: -moz-linear-gradient(bottom, #aaa, #ccc); /* Firefox */ +/* background-image: -o-linear-gradient(bottom, #aaa, #ccc); /* Opera */ +/* background-image: -webkit-gradient(linear, left bottom, left top, from(#aaa), to(#ccc)); /* old Webkit */ +/* background-image: -webkit-linear-gradient(bottom, #aaa, #ccc); /* new Webkit */ +/* background-image: linear-gradient(bottom, #aaa, #ccc); /* proposed W3C Markup */ +/* border-top-color: #ccc; + border-bottom-color: #aaa; + color: #333; +}*/ + +.expanded #adminmenu li.wp-not-current-submenu:hover a.menu-top, +.expanded #adminmenu li.wp-not-current-submenu:hover .wp-menu-arrow { + background-color: #eaf2fa; /* Fallback */ + background-image: -ms-linear-gradient(bottom, #aaa, #f8fafd); /* IE10 */ + background-image: -moz-linear-gradient(bottom, #aaa, #f8fafd); /* Firefox */ + background-image: -o-linear-gradient(bottom, #aaa, #ccc); /* Opera */ + background-image: -webkit-gradient(linear, left bottom, left top, from(#aaa), to(#ccc)); /* old Webkit */ + background-image: -webkit-linear-gradient(bottom, #cfe1f3, #eaf2fa); /* new Webkit */ + background-image: linear-gradient(bottom, #aaa, #ccc); /* proposed W3C Markup */ + border-top-color: #eaf2fa; + border-bottom-color: #cfe1f3; + color: #333; +} + #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, .folded #adminmenu li.wp-has-current-submenu, .folded #adminmenu li.current.menu-top, -#adminmenu .wp-menu-arrow, +#adminmenu .wp-has-current-submenu .wp-menu-arrow, +#adminmenu .current .wp-menu-arrow, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head { background-color: #777; /* Fallback */ background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */ @@ -945,6 +974,16 @@ background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */ } +.expanded #adminmenu li.wp-not-current-submenu li:hover a { + background-color: #eaf2fa; /* Fallback */ + background-image: -ms-linear-gradient(left, #aaa, #f8fafd); /* IE10 */ + background-image: -moz-linear-gradient(left, #aaa, #f8fafd); /* Firefox */ + background-image: -o-linear-gradient(left, #aaa, #ccc); /* Opera */ + background-image: -webkit-gradient(linear, left bottom, right bottom, from(#aaa), to(#ccc)); /* old Webkit */ + background-image: -webkit-linear-gradient(left, white, #eaf2fa 30px); /* new Webkit */ + background-image: linear-gradient(left, #aaa, #ccc); /* proposed W3C Markup */ +} + #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head { @@ -975,12 +1014,12 @@ background-color: #fff; } -.folded #adminmenu .wp-submenu-wrap, -.folded #adminmenu .wp-submenu ul { +#adminmenu .wp-submenu-wrap, +#adminmenu .wp-submenu ul { border-color: #dfdfdf; } -.folded #adminmenu .wp-submenu-wrap { +#adminmenu .wp-submenu-wrap { -moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 ); Index: wp-admin/css/wp-admin.dev.css =================================================================== --- wp-admin/css/wp-admin.dev.css (revision 18532) +++ wp-admin/css/wp-admin.dev.css (working copy) @@ -1096,14 +1096,58 @@ } #adminmenu .wp-submenu { - display: none; list-style: none; padding: 0; margin: 0; + overflow: hidden; + +} + +#adminmenu .wp-not-current-submenu .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + display: block; + position: absolute; + top: -1px; + left: 146px; + z-index: 999; + width: 0; + overflow: hidden; + -moz-transition: width 200ms ease-out; + -webkit-transition: width 200ms ease-out; + -o-transition: width 200ms ease-out; + transition: width 200ms ease-out; +} + +.expanded #adminmenu .wp-has-current-submenu .wp-submenu { position: relative; z-index: 2; + width: 145px; + top: auto; + left: auto; + right: auto; + bottom: auto; + padding: 0; } +.expanded #adminmenu .wp-has-current-submenu .wp-submenu-wrap { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +.js.folded #adminmenu .wp-submenu { + top: -5px; + left: 26px; +} +.js #adminmenu .wp-submenu.sub-open { + padding: 0 8px 8px 0; +} + +/*.js.folded #adminmenu .wp-has-current-submenu .wp-submenu { + width: 0; +}*/ + + #adminmenu .wp-submenu a { font-size: 12px; line-height: 18px; @@ -1186,11 +1230,20 @@ padding-left: 12px; } +.expanded #adminmenu li.wp-not-current-submenu li { + margin-left: 6px; +} + +.expanded #adminmenu li.wp-not-current-submenu li a { + padding-left: 16px; +} + .wp-menu-arrow { display: none; } #adminmenu li.wp-has-current-submenu .wp-menu-arrow, -#adminmenu li.menu-top.current .wp-menu-arrow { +#adminmenu li.menu-top.current .wp-menu-arrow, +.expanded #adminmenu li.menu-top:hover .wp-menu-arrow { display: block; position: absolute; right: -9px; @@ -1198,6 +1251,11 @@ cursor: auto; z-index: 25; } + +.expanded #adminmenu li.menu-top:hover .wp-menu-arrow { + z-index: 1500; +} + #adminmenu .wp-menu-arrow div { width: 15px; height: 30px; @@ -1245,24 +1303,6 @@ border-style: solid; } -.js.folded #adminmenu .wp-submenu { - display: block; - position: absolute; - top: -5px; - left: 26px; - z-index: 999; - width: 0; - padding: 0; - overflow: hidden; - -moz-transition: width 200ms ease-out; - -webkit-transition: width 200ms ease-out; - -o-transition: width 200ms ease-out; - transition: width 200ms ease-out; -} -.js.folded #adminmenu .wp-submenu.sub-open { - padding: 0 8px 8px 0; -} - #adminmenu .wp-submenu .wp-submenu-head { padding: 6px 4px 5px 10px; cursor: default; @@ -1270,9 +1310,8 @@ border-style: solid; } -.js.folded #adminmenu .wp-submenu-wrap { - margin-top: 4px; - border-width: 0 1px 1px 0; +.js #adminmenu .wp-not-current-submenu .wp-submenu-wrap { + border-width: 1px 1px 1px 0; border-style: solid; position: relative; -webkit-border-bottom-right-radius: 3px; @@ -1285,6 +1324,11 @@ border-top-right-radius: 3px; } +.js.folded #adminmenu .wp-submenu .wp-submenu-wrap { + margin-top: 4px; + border-width: 0 1px 1px 0; +} + .js.folded #adminmenu .wp-submenu ul { border-width: 0 0 0 1px; border-style: solid;