Sticky admin menu

[tillkruess]

I'd like to suggest to make the WordPress admin menu sticky/fixed (possibly toggleable?), if the browser supports it, JavaScript is activated and the viewport height is taller than the menu itself, so that it floats down beside the content and it can be accessed without scrolling up. Any thoughts? Happy to write a patch.

[Ipstenu]

You mean the grey toolbar?

It scrolls down with you already on every browser I've seen.

[tillkruess]

I mean the menu on the left (or right) side of the screen (Users, Tools, Posts, etc.).

[Ipstenu]

Considering your screen is often shorter than your menus, I can't fathom how that would work in the long run.

[DrewAPicture]

Replying to Ipstenu:

Considering your screen is often shorter than your menus, I can't fathom how that would work in the long run.

In this instance, scrolling wouldn't be a factor anyway.

I can see valid use in doing fixed scrolling for the side menu on many screens. Some are short yes, but many aren't. Take for instance, the infinite-scroll screens coming in 3.4. Many (probably bloated) plugin/theme screens are also getting pretty long. Mobile is also another consideration.

EDIT: I'm not advocating one way or the other, just saying there are valid points to be made. There's also an argument to be made that that's why the Toolbar has fixed scrolling and the ability to click the empty Toolbar to scroll-to-top.

[tillkruess]

I'm scrolling every day miles upwards in order to access the admin menu.

[jane]

I can see both sides of this, but in general having the left menu remain on screen regardless of position on page feels a little too late-90s frames to me and for someone with lots of added plugin menus and a laptop (or smaller) screen it would be unusable. Going to close wontfix for now and suggest that you try this as a plugin first. If a plugin that does this got some decent adoption numbers, would reconsider.

[TobiasBg]

In a quick test with the Chrome DevTools,

#adminmenuwrap {
  position: fixed;
}

was enough to achieve this.
Could be added to admin_footer() by a small plugin easily.

[Ipstenu]

tillkruess - In 3.4 you can click on the toolbar to scroll to the top of your screen.

TobiasBg - Sure it works, but shrink your screen by half for grins and giggles :) It's unusable on an iPad right away.

[nacin]

Replying to jane:

I can see both sides of this, but in general having the left menu remain on screen regardless of position on page feels a little too late-90s frames to me and for someone with lots of added plugin menus and a laptop (or smaller) screen it would be unusable. Going to close wontfix for now and suggest that you try this as a plugin first. If a plugin that does this got some decent adoption numbers, would reconsider.

I think this ticket draws my attention if it was for when the menu was collapsed only. I could see this working well for tablets.

[tillkruess]

Replying to nacin:

I think this ticket draws my attention if it was for when the menu was collapsed only. I could see this working well for tablets.

You're absolutely right, fixing only the collapsed menu solves a lot of issues I had with a prototype.

[jane]

I'm still not really convinced. Sticking icon menus can still be frustrating. If the person has a shorter screen than icon list or if he/she uses screen zoom they can't get to the ones on the bottom. I've never seen an implementation of this that had the level of smoothness we should be going for. I'd still rather see this as a plugin.

[dd32]

Any implementation of this would have to handle switching between fixed and scrollable on the fly as the page, and/or menu's open changed.. Limiting it to certain conditions helps, but doesn't completely fix it.

I'd like to see this, but agree, that it would be best implemented as a plugin first, even if only for the proof of concept/initial patch.

[JosephSilber]

Replying to dd32:

Any implementation of this would have to handle switching between fixed and scrollable on the fly as the page, and/or menu's open changed.. Limiting it to certain conditions helps, but doesn't completely fix it.

I'd like to see this, but agree, that it would be best implemented as a plugin first, even if only for the proof of concept/initial patch.

---

Here's a quick proof of concept:

jQuery(document).ready(function($)
{
    var $window = $(window),
        $adminmenuwrap = $('#adminmenuwrap'),
        windowHeight = $window.height();

    $adminmenuwrap.click(function()
    {
        $adminmenuwrap.css('position', $adminmenuwrap.height() <= windowHeight ? 'fixed' : '');

    })
    .click();

    $window.resize(function()
    {
        windowHeight = $window.height();
        $adminmenuwrap.click();
    });
});

Just run this in your console, and see how it's switching between fixed and scrollable on the fly as the page, and/or menu's open changed.

[nacin]

Can someone upload a plugin that implements this? It would be really interesting to test.

[tillkruess]

I made a light prototype which floats the admin menu, if it's collapsed. It certainly needs some smoothing adjustments.

​https://github.com/tillkruess/Floating-Admin-Menu

[DrewAPicture]

Replying to tillkruess:

I made a light prototype which floats the admin menu, if it's collapsed. It certainly needs some smoothing adjustments.

Screencast of the plugin in action: ​http://screencast.com/t/1ycKL2cZRDk

[tillkruess]

Just released the fully functional plugin version: ​http://wordpress.org/extend/plugins/floating-admin-menu/

[arleym]

You can do this with a single media query (using vertically oriented responsive web design) if you know what the height will be. I think the jQuery function below is even better as it can take into account as many extra plugin items in the nav as any user could ever have.

2 demos and the code are explained in this CSS Tricks post: ​http://css-tricks.com/responsive-web-above-the-fold/

var setResponsive = function () {

  // Is the window taller than the #adminmenuwrap by 50px or more?
  if ($(window).height() > $("#adminmenuwrap").height() + 50) {

     // ...if so, make the #adminmenuwrap fixed
     $('#adminmenuwrap').css('position', 'fixed'); 
    
  } else {
       
     //...otherwise, leave it relative        
     $('#adminmenuwrap').css('position', 'relative'); 

  }

}

$(window).resize(setResponsive);
setResponsive();

[tillkruess]

@arleym: We need to consider a few more things to make this work flawless. I think it was some Firefox version, which required also the top and left CSS property as well as position. There also occurred a funny display issue, when the menu was fixed and the browser viewport was smaller than the min-width of the <body>. Another issue was jQuery's height() and outerHeight() function weren't calculating the real height because #collapse-menu had no clear-fix. And when the expand button of the menu is clicked, we would want to check the height of the menu again, in case it's now too tall. ​The plugin I wrote fixes all these issues and I'd be delighted to make a patch out of it. Maybe we could also implement a CSS transition, so the menu doesn't jump from fixed to relative, rather it would slide smoothly.

[tillkruess]

I went ahead and made a patch for testing purposes.

[helen]

Done in [26125] via MP6 merge.