1

i successfully done making the menu name to be collapsed on click , but i have a problem with the floating submenu that appears on hover on menu name , i need to make this floating submenu to be open not floating on hover after i click on menu name,

i found this code for the adminmenu

    $submenu_items = array();
    if ( ! empty( $submenu[ $item[2] ] ) ) {
        $class[]       = 'wp-has-submenu';
        $submenu_items = $submenu[ $item[2] ];
    }

    if ( ( $parent_file && $item[2] === $parent_file ) || ( empty( $typenow ) && $self === $item[2] ) ) {
        if ( ! empty( $submenu_items ) ) {
            $class[] = 'wp-has-current-submenu wp-menu-open';
        } else {
            $class[]          = 'current';
            $aria_attributes .= 'aria-current="page"';
        }
    } else {
        $class[] = 'wp-not-current-submenu';
        if ( ! empty( $submenu_items ) ) {
            $aria_attributes .= 'aria-haspopup="true"';
        }
    }

and this js code that i think it responsible for this but i don't know exactly which one

/**
 * Handles the `aria-haspopup` attribute on the current menu item when it has a submenu.
 *
 * @since 4.4.0
 *
 * @return {void}
 */
function currentMenuItemHasPopup() {
    var $current = $( 'a.wp-has-current-submenu' );

    if ( 'folded' === menuState ) {
        // When folded or auto-folded and not responsive view, the current menu item does have a fly-out sub-menu.
        $current.attr( 'aria-haspopup', 'true' );
    } else {
        // When expanded or in responsive view, reset aria-haspopup.
        $current.attr( 'aria-haspopup', 'false' );
    }
}

$document.on( 'wp-menu-state-set wp-collapse-menu wp-responsive-activate wp-responsive-deactivate', currentMenuItemHasPopup );

/**
 * Ensures an admin submenu is within the visual viewport.
 *
 * @since 4.1.0
 *
 * @param {jQuery} $menuItem The parent menu item containing the submenu.
 *
 * @return {void}
 */
function adjustSubmenu( $menuItem ) {
    var bottomOffset, pageHeight, adjustment, theFold, menutop, wintop, maxtop,
        $submenu = $menuItem.find( '.wp-submenu' );

    menutop = $menuItem.offset().top;
    wintop = $window.scrollTop();
    maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar.

    bottomOffset = menutop + $submenu.height() + 1; // Bottom offset of the menu.
    pageHeight = $wpwrap.height();                  // Height of the entire page.
    adjustment = 60 + bottomOffset - pageHeight;
    theFold = $window.height() + wintop - 50;       // The fold.

    if ( theFold < ( bottomOffset - adjustment ) ) {
        adjustment = bottomOffset - theFold;
    }

    if ( adjustment > maxtop ) {
        adjustment = maxtop;
    }

    if ( adjustment > 1 ) {
        $submenu.css( 'margin-top', '-' + adjustment + 'px' );
    } else {
        $submenu.css( 'margin-top', '' );
    }
}

if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // Touch screen device.
    // iOS Safari works with touchstart, the rest work with click.
    mobileEvent = isIOS ? 'touchstart' : 'click';

    /**
     * Closes any open submenus when touch/click is not on the menu.
     *
     * @param {Event} e The event object.
     *
     * @return {void}
     */
    $body.on( mobileEvent+'.wp-mobile-hover', function(e) {
        if ( $adminmenu.data('wp-responsive') ) {
            return;
        }

        if ( ! $( e.target ).closest( '#adminmenu' ).length ) {
            $adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
        }
    });

    /**
     * Handles the opening or closing the submenu based on the mobile click|touch event.
     *
     * @param {Event} event The event object.
     *
     * @return {void}
     */
    $adminmenu.find( 'a.wp-has-submenu' ).on( mobileEvent + '.wp-mobile-hover', function( event ) {
        var $menuItem = $(this).parent();

        if ( $adminmenu.data( 'wp-responsive' ) ) {
            return;
        }

        /*
         * Show the sub instead of following the link if:
         *  - the submenu is not open.
         *  - the submenu is not shown inline or the menu is not folded.
         */
        if ( ! $menuItem.hasClass( 'opensub' ) && ( ! $menuItem.hasClass( 'wp-menu-open' ) || $menuItem.width() < 40 ) ) {
            event.preventDefault();
            adjustSubmenu( $menuItem );
            $adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
            $menuItem.addClass('opensub');
        }
    });
}

if ( ! isIOS && ! isAndroid ) {
    $adminmenu.find( 'li.wp-has-submenu' ).hoverIntent({

        /**
         * Opens the submenu when hovered over the menu item for desktops.
         *
         * @return {void}
         */
        over: function() {
            var $menuItem = $( this ),
                $submenu = $menuItem.find( '.wp-submenu' ),
                top = parseInt( $submenu.css( 'top' ), 10 );

            if ( isNaN( top ) || top > -5 ) { // The submenu is visible.
                return;
            }

            if ( $adminmenu.data( 'wp-responsive' ) ) {
                // The menu is in responsive mode, bail.
                return;
            }

            adjustSubmenu( $menuItem );
            $adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
            $menuItem.addClass( 'opensub' );
        },

        /**
         * Closes the submenu when no longer hovering the menu item.
         *
         * @return {void}
         */
        out: function(){
            if ( $adminmenu.data( 'wp-responsive' ) ) {
                // The menu is in responsive mode, bail.
                return;
            }

            $( this ).removeClass( 'opensub' ).find( '.wp-submenu' ).css( 'margin-top', '' );
        },
        timeout: 200,
        sensitivity: 7,
        interval: 90
    });

    /**
     * Opens the submenu on when focused on the menu item.
     *
     * @param {Event} event The event object.
     *
     * @return {void}
     */
    $adminmenu.on( 'focus.adminmenu', '.wp-submenu a', function( event ) {
        if ( $adminmenu.data( 'wp-responsive' ) ) {
            // The menu is in responsive mode, bail.
            return;
        }

        $( event.target ).closest( 'li.menu-top' ).addClass( 'opensub' );

        /**
         * Closes the submenu on blur from the menu item.
         *
         * @param {Event} event The event object.
         *
         * @return {void}
         */
    }).on( 'blur.adminmenu', '.wp-submenu a', function( event ) {
        if ( $adminmenu.data( 'wp-responsive' ) ) {
            return;
        }

        $( event.target ).closest( 'li.menu-top' ).removeClass( 'opensub' );

        /**
         * Adjusts the size for the submenu.
         *
         * @return {void}
         */
    }).find( 'li.wp-has-submenu.wp-not-current-submenu' ).on( 'focusin.adminmenu', function() {
        adjustSubmenu( $( this ) );
    });
}

enter image description here

0

I Successfully Solved it and done making The Requirement in easy way 'that's i found for now'

i added a js file inside my theme folder with this name "admin.js" i called this file from theme function with this code // replace # with js file link

// custom admin menu js
  add_action( 'admin_enqueue_scripts', 'my_enqueue' );
  function my_enqueue() {
    if(is_admin()){
        
        wp_register_script( 'custom-js', 'my js file link');
        wp_enqueue_script('custom-js');
    
        
  }
}
// style for removing floating submenu and make it inside sidbbar

jQuery(document).ready(function($){ 

$('#adminmenu .wp-not-current-submenu .wp-submenu').append(`<style>
   #adminmenu .wp-not-current-submenu .wp-submenu {
       position: relative;
       min-width:auto;
       left:auto;
       top: auto;
       box-shadow:none;
       display:none;
    }
    </style>`);
// this Code to make menu show/ hide the submenu on click

$('#adminmenu > li.wp-has-submenu').click(function(e) {  
        
        // element to toggle
        var $el = $('ul',this); 

        // after clicking any other menu item slide up other elements
        $('#adminmenu > li.wp-has-submenu > ul').not($el).slideUp(); 

        // toggle element
        $el.stop(true, true).slideToggle(400); 
        return false;
    });

    // stop events from bubbling from sub menu clicks
    $('#adminmenu > li.wp-has-submenu > ul > li').click(function(e) {
        e.stopPropagation(); 
    });

});  // end of jquery code

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.