Make WordPress Core

Opened 12 years ago

Closed 11 years ago

Last modified 9 years ago

#19994 closed enhancement (fixed)

Sticky admin menu

Reported by: tillkruess's profile 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 12 years ago.

Download all attachments as: .zip

Change History (27)

#1 @Ipstenu
12 years ago

You mean the grey toolbar?

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

#2 @tillkruess
12 years ago

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

#3 follow-up: @Ipstenu
12 years ago

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

#4 in reply to: ↑ 3 @DrewAPicture
12 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.

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.

Last edited 12 years ago by DrewAPicture (previous) (diff)

#5 @tillkruess
12 years ago

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

#6 follow-up: @jane
12 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.

#7 @TobiasBg
12 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.

#8 @Ipstenu
12 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.

#9 in reply to: ↑ 6 ; follow-up: @nacin
12 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.

#10 in reply to: ↑ 9 @tillkruess
12 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.

#11 @jane
12 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.

#12 follow-up: @dd32
12 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.

#13 in reply to: ↑ 12 @JosephSilber
12 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 12 years ago by JosephSilber (previous) (diff)

#14 @nacin
12 years ago

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

#15 follow-up: @tillkruess
12 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 12 years ago by tillkruess (previous) (diff)

#16 in reply to: ↑ 15 @DrewAPicture
12 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

#17 @tillkruess
12 years ago

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

#18 @arleym
12 years 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();

#19 @arleym
12 years ago

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

#20 @SergeyBiryukov
12 years ago

  • Milestone set to Awaiting Review

#21 @tillkruess
12 years 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.

#22 @betzster
12 years ago

  • Cc j@… added

@tillkruess
12 years ago

#23 @tillkruess
12 years ago

I went ahead and made a patch for testing purposes.

#24 @DrewAPicture
11 years 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

#25 @helen
10 years ago

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

Done in [26125] via MP6 merge.

This ticket was mentioned in IRC in #wordpress-dev by MarkJaquith. View the logs.


9 years ago

Note: See TracTickets for help on using tickets.