added code for new Top Panel #5770

wants to merge 4 commits into


None yet

10 participants



I added a new Top-Panel. I also created a demo test page here: . You can use it to perform the appropriate testing in different devices.

Please let me know if there are any issues or suggestions.



@rdavidwu - This looks great - thanks! Curious about how this react to different heights of content. Could you update the demo page to drop in a listview with 10-12 items to simulate a menu so we have example of longer and shorter top panels? Might also be good to have an example that has content that wraps so we can see how if adapts across withs and orientations.


The panel is being set to a specific height right now. I have created a second demo with an increased height to show how it would look with a listview. Originally this top panel idea was intended to show things like a navbar, which don't occupy much height. We could make the panel height re-sizable if its needed.
However, I think that it would be hard to use if the panel was too long in height (ie. closing the panel).

The link for the second demo is here

I also added the listview to the first demo page so you can see how it gets cut off.

Let me know you thoughts and suggestions.


Is it possible to implement the same for bottom?


I havent tried that, but it should be possible.


@rdavidwu - This look great and checks out on iOS 6, Android 4.1 and more.

I completely agree that this would be better for shorter panels, if they are too long, it could be confusing. I do think we need to support variable heights, and even multiple top panels on the same page, each with different heights.

Ideally, we'd script this so the plugin would measure the panels' height before opening and set the css as needed. We'd need to calculate this when opening because the person could change orientations and the height may shift due to reflow or different styles being applied.

A bottom version would be suoer slick too, but let's see how much work it will be to get the top one working with variable heights first.


Looking at the styles, the height of the panel is referenced 13 times in the CSS to handle offsets, animations and vendor prefixes so this isn't going to be easily scriptable. I think we're going to have to give some thought to how to make this work in a generic way. In the meantime, if you want to take a crack at a bottom panel, I'd be curious to see if that is workable. That is a tougher thing to position and animate cross-platform.



The bottom panel is workable. I have added a demo for the bottom panel onto the first demo page.



Just created a demo with different panel sizes. This is using JS to add the different css transforms.


@rdavidwu - hey, that's great news. Mind updating the PR so we can review the code?


One little remark, a header with data-position="fixed" also opens and closes when top panel opens or closes.



PR updated!

jQuery Foundation member

@rdavidwu it looks like you haven't signed a CLA. Could you visit and sign it?



Is there a particular reason why top and bottom panels haven't existed since the very moment left and right panel have? I mean, are they more difficult to implement, or is there some reason that makes the need for left and right panels somehow more obvious than the need for bottom and top panels?

jQuery Foundation member

@rdavidwu there are a bunch of conflicts here because of changes we have made to panels. love the feature though and would love to try and make this happen for 1.5 im going to close this PR just because it is now outdated however would like to work with you to land this in hopefully next version

@arschmitz arschmitz closed this Aug 6, 2013
jQuery Foundation member

@rdavidwu @arschmitz

I agree top/bottom panels are a nice feature to add. Before we start working on this for 1.5 I want to create a new roadmap to see if it fits in the planning. And because we made some bigger changes to the panel widget for 1.4 we first have to make sure it's bug free.
Before creating a PR we should first discuss the approach in a feature request ticket.


@rdavidwu If we have to wait for 1.5, to use this feature could you please give us an independent js and css that's easy to attach and remove?


I agree, would an independent js and css be possible?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment