WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 15 months ago

Last modified 5 months ago

#19994 closed enhancement (fixed)

Sticky admin menu

Reported by: tillkruess Owned by:
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.3.1
Component: Administration Keywords:
Focuses: ui Cc:

Description

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.

Attachments (1)

19994.diff (2.7 KB) - added by tillkruess 20 months ago.

Download all attachments as: .zip

Change History (26)

comment:1 Ipstenu2 years ago

You mean the grey toolbar?

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

comment:2 tillkruess2 years ago

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

comment:3 follow-up: Ipstenu2 years ago

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

comment:4 in reply to: ↑ 3 DrewAPicture2 years ago

  • Cc xoodrew@… added

Replying to Ipstenu:

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

But the height of the menu still determines the overall height of the screen. That's a given.

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.

Version 1, edited 2 years ago by DrewAPicture (previous) (next) (diff)

comment:5 tillkruess2 years ago

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

comment:6 follow-up: jane2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

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.

comment:7 TobiasBg2 years ago

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.

comment:8 Ipstenu2 years ago

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.

comment:9 in reply to: ↑ 6 ; follow-up: nacin2 years ago

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.

comment:10 in reply to: ↑ 9 tillkruess2 years ago

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.

comment:11 jane2 years ago

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.

comment:12 follow-up: dd322 years ago

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.

comment:13 in reply to: ↑ 12 JosephSilber2 years ago

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.

Last edited 2 years ago by JosephSilber (previous) (diff)

comment:14 nacin2 years ago

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

comment:15 follow-up: tillkruess2 years ago

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

Last edited 2 years ago by tillkruess (previous) (diff)

comment:16 in reply to: ↑ 15 DrewAPicture2 years ago

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

comment:17 tillkruess2 years ago

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

comment:18 arleym20 months ago

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();

comment:19 arleym20 months ago

  • Cc arleym added
  • Resolution wontfix deleted
  • Status changed from closed to reopened

comment:20 SergeyBiryukov20 months ago

  • Milestone set to Awaiting Review

comment:21 tillkruess20 months ago

@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.

comment:22 betzster20 months ago

  • Cc j@… added

tillkruess20 months ago

comment:23 tillkruess20 months ago

I went ahead and made a patch for testing purposes.

comment:24 DrewAPicture15 months ago

  • Component changed from UI to Administration
  • Keywords ui-focus added
  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from reopened to closed

comment:25 helen5 months ago

  • Milestone set to 3.8
  • Resolution changed from maybelater to fixed

Done in [26125] via MP6 merge.

Note: See TracTickets for help on using tickets.