Collapsible Menus in Appearance > Menus

Is there a plug-in that will allow for collapsing menu hierarchy of sub-menus in the admin > appearance > menus tab?

  • cajebo
    • New Recruit

    Thanx Max.

    But that was not the outcome for which I search. :wink:

    The ‘menus’ of which I speak are in the admin area, and as noted above: appearance > menu

    I’ve attached an image that is barely one-third of the menu items I’m creating/editing/maintainin.

    I’m looking for a plug-in, if one exists, that allows for this, in the admin area when creating/editing menu items:

    1. Menu Item
    a. sub-menu item
    b. sub-menu item
    c. sub-menu item
    d. sub-menu item
    e. sub-menu item
    f. sub-menu item
    2. Menu Item
    a. sub-menu item
    b. sub-menu item
    c. sub-menu item
    d. sub-menu item
    e. sub-menu item
    f. sub-menu item
    3. Menu Item
    a. sub-menu item
    b. sub-menu item
    c. sub-menu item
    d. sub-menu item
    e. sub-menu item
    f. sub-menu item

    To look like this:

    1. Menu Item
    2. Menu Item
    3. Menu Item

    Or to clarify further, to offer the ability to view it like this

    1. Menu Item
    2. Menu Item
    a. sub-menu item
    b. sub-menu item
    c. sub-menu item
    d. sub-menu item
    e. sub-menu item
    f. sub-menu item
    3. Menu Item

  • Timothy
    • Chief Pigeon

    I’m not aware of any plugin which is designed for use within the admin area of the menus.

    Maybe other members might be aware of something.

    Sorry.

    I’m responding as all tickets require an staff response otherwise they remain active and notifying us.

    Take care.

  • cajebo
    • New Recruit

    Thanks Timothy.

    So then, you have this in your “might do” pile of “might-dos?” :slight_smile: LOL

    I think I’d gladly pay 19.00 for this, or consider even an ongoing membership.

    With the potential length of some menu lists, I honestly can’t imagine why this has not been built yet, or actually part of the core.

    Thanks for your help, and perhaps another member might indeed be aware of something that performs this modification.

    Cheers from Southwest Ohio,

    Michael

  • maxaud
    • The Crimson Coder

    I thought this was a great idea so I created a plugin for it…

    Create a new directory in your plugins directory called “expandable-menu” and create a file in it called “expandable-menu.php” and copy the below into it..

    <?php
    /*
    Plugin Name: Expandable Menus
    Plugin URI: http://playforward.net
    Description: Allows you to expand menus in WordPress admin.
    Author: Dustin Dempsey
    Version: 1.0
    Author URI: http://playforward.net
    */

    // out function
    function EM_admin_head(){

    // echo css and javascript
    echo '
    <style>
    .expand_hidden {
    display: none;
    }
    .minimized .menu-item-handle {
    border-right: 7px solid #298cba;
    }
    </style>
    <!-- Expandable Menu Code -->
    <script type="text/javascript">
    jQuery(document).ready(function(){
    var expand_editing = false;
    jQuery("#menu-to-edit .item-edit").on("click", function(event){
    expand_editing = true;
    setTimeout(function(){
    expand_editing = false;
    },100);
    });
    jQuery("#menu-to-edit li").on( "click", function(){
    if ( expand_editing === false ) {
    var classes = jQuery(this).attr( "class" ).split(" ");
    for(var i = 0; i < classes.length; i++){
    if(classes.substr(0,16) == "menu-item-depth-"){
    var the_depth = parseInt(classes
    .split("menu-item-depth-")[1]);
    var the_index = 0;
    var current_element = this;
    while ( the_index == 0 ) {
    var next_element = jQuery(current_element).next();
    var next_classes = jQuery(next_element).attr( "class" ).split(" ");
    for(var nexti = 0; nexti < next_classes.length; nexti++){
    if(next_classes
    .substr(0,16) == "menu-item-depth-"){
    var next_depth = parseInt(next_classes[nexti].split("menu-item-depth-")[1]);
    if ( next_depth || ( next_depth == 0 ) ) {
    if ( next_depth > the_depth ) {
    // hide/show
    jQuery(next_element).toggleClass( "expand_hidden" );
    current_element = next_element;
    var expanded = true;
    } else {
    // stop execution
    the_index = 1;
    }
    }
    }
    }
    }
    if ( expanded === true ) {
    jQuery(this).toggleClass( "minimized" );
    }
    }
    }
    }
    });
    });
    </script>
    <!-- END expanadable menu code -->
    ';
    }

    // add action to admin head
    add_action( 'admin_head', 'EM_admin_head' );

    ?>

  • maxaud
    • The Crimson Coder

    I revised the above code as I found a bug..

    I cannot edit it there, so here is the new plugin code:

    <?php
    /*
    Plugin Name: Expandable Menus
    Plugin URI: http://playforward.net
    Description: Allows you to expand and collapse menus in WordPress admin.
    Author: Dustin Dempsey
    Version: 1.0
    Author URI: http://playforward.net
    */

    // out function
    function EM_admin_head(){

    // echo css and javascript
    echo '
    <style>
    .expand_hidden {
    display: none;
    }
    .minimized .menu-item-handle {
    border-right: 7px solid #298cba;
    }
    </style>
    <!-- Expandable Menu Code -->
    <script type="text/javascript">
    jQuery(document).ready(function(){
    var expand_editing = false;
    jQuery("#menu-to-edit .item-edit").on("click", function(event){
    expand_editing = true;
    setTimeout(function(){
    expand_editing = false;
    },100);
    });
    jQuery("#menu-to-edit li").on( "click", function(){
    if ( expand_editing === false ) {
    var classes = jQuery(this).attr( "class" ).split(" ");
    if ( jQuery(this).hasClass( "minimized" ) ) {
    minimizing = false;
    }
    for(var i = 0; i < classes.length; i++){
    if(classes.substr(0,16) == "menu-item-depth-"){
    var the_depth = parseInt(classes
    .split("menu-item-depth-")[1]);
    var the_index = 0;
    var current_element = this;
    var children_check = false;
    var children_depth = the_depth + 1;
    while ( the_index == 0 ) {
    var next_element = jQuery(current_element).next();
    var next_classes = jQuery(next_element).attr( "class" ).split(" ");
    for(var nexti = 0; nexti < next_classes.length; nexti++){
    if(next_classes
    .substr(0,16) == "menu-item-depth-"){
    var next_depth = parseInt(next_classes[nexti].split("menu-item-depth-")[1]);
    if ( next_depth || ( next_depth == 0 ) ) {
    if ( next_depth > the_depth ) {
    if ( children_check === true ) {
    if ( next_depth <= children_depth ) {
    children_check = false;
    }
    }
    if ( children_check === false ) {
    // hide/show
    jQuery(next_element).toggleClass( "expand_hidden" );
    if ( jQuery(next_element).hasClass( "minimized" ) ) {
    children_check = true;
    children_depth = next_depth;
    }
    }
    current_element = next_element;
    var expanded = true;
    } else {
    // stop execution
    the_index = 1;
    }
    }
    }
    }
    setTimeout(function(){
    the_index = 1;
    },10000);
    }
    if ( expanded === true ) {
    jQuery(this).toggleClass( "minimized" );
    }
    }
    }
    }
    });
    });
    </script>
    <!-- END expanadable menu code -->
    ';
    }

    // add action to admin head
    add_action( 'admin_head', 'EM_admin_head' );

    ?>

  • maxaud
    • The Crimson Coder

    Ok, I found yet another bug..

    new code:

    <?php
    /*
    Plugin Name: Expandable Menus
    Plugin URI: http://playforward.net
    Description: Allows you to expand and collapse menus in WordPress admin.
    Author: Dustin Dempsey
    Version: 1.0
    Author URI: http://playforward.net
    */

    // out function
    function EM_admin_head(){

    // echo css and javascript
    echo '
    <style>
    .expand_hidden {
    display: none;
    }
    .minimized .menu-item-handle {
    border-right: 7px solid #298cba;
    }
    </style>
    <!-- Expandable Menu Code -->
    <script type="text/javascript">
    jQuery(document).ready(function(){
    var expand_editing = false;
    jQuery("#menu-to-edit .item-edit").on("dblclick", function(event){
    expand_editing = true;
    setTimeout(function(){
    expand_editing = false;
    },100);
    });
    var the_expand_function = function(){
    if ( expand_editing === false ) {
    var classes = jQuery(this).attr( "class" ).split(" ");
    if ( jQuery(this).hasClass( "minimized" ) ) {
    minimizing = false;
    }
    if ( classes ) {
    for(var i = 0; i < classes.length; i++){
    if ( classes ) {
    if(classes
    .substr(0,16) == "menu-item-depth-"){
    var the_depth = parseInt(classes
    .split("menu-item-depth-")[1]);
    var the_index = 0;
    var current_element = this;
    var children_check = false;
    var children_depth = the_depth + 1;
    if ( the_depth || ( the_depth == 0 ) ) {
    setTimeout(function(){
    the_index = 1;
    },2000);
    for(var maini = 0; maini < 200; maini++){
    if ( the_index == 1 ) {
    } else {
    var next_element = jQuery(current_element).next();
    if ( jQuery(next_element).attr( "class" ) ) {
    var next_classes = jQuery(next_element).attr( "class" ).split(" ");
    if ( next_classes ) {
    for(var nexti = 0; nexti < next_classes.length; nexti++){
    if ( next_classes[nexti] ) {
    if(next_classes[nexti].substr(0,16) == "menu-item-depth-"){
    var next_depth = parseInt(next_classes[nexti].split("menu-item-depth-")[1]);
    if ( next_depth || ( next_depth == 0 ) ) {
    if ( next_depth > the_depth ) {
    if ( children_check === true ) {
    if ( next_depth <= children_depth ) {
    children_check = false;
    }
    }
    if ( children_check === false ) {
    // hide/show
    jQuery(next_element).toggleClass( "expand_hidden" );
    if ( jQuery(next_element).hasClass( "minimized" ) ) {
    children_check = true;
    children_depth = next_depth;
    }
    }
    current_element = next_element;
    var expanded = true;
    } else {
    // stop execution
    the_index = 1;
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    if ( expanded === true ) {
    jQuery(this).toggleClass( "minimized" );
    }
    }
    }
    }
    }
    }
    }
    jQuery("#menu-to-edit li").on( "dblclick", the_expand_function );
    });
    </script>
    <!-- END expanadable menu code -->
    ';
    }

    // add action to admin head
    add_action( 'admin_head', 'EM_admin_head' );

    ?>

  • cajebo
    • New Recruit

    Was going to leave this at wp.org, but having issues ATM with log-in.

    Your efforts are outstanding, works as expected Dustin. Thanks again.

    Suggestions:

    Let it remember positions of expanded/closed with subsequent returns to appearance > menus

    Cosmetic:

    I see a bit of a css positioning issue in Chrome (attached capture) for the “+”, looks to be dependent on which level of menu item

    Thanks again!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.