Problem

Let's imagine we have more than 5 menu items.
Main menu of a site fills all height of window on smartphones up to 460px width.
Please see screenshot below.

Current menu on small resolution

Solution

Make the main menu collapsible and give possibility to expand/collapse it.
See screenshots below.

Collapsed:
Collapsed menu on small resolution
Expanded:
Expanded menu on small resolution

Demo

Please take a look at implemented solution http://komelin.com/.

Tests

The solution has been tested in several browsers, such as:

  • Opera 12.11 (Win7)
  • Safari 5.1.7 (Win7)
  • FireFox 17.0.1 (Win7)
  • Chrome 23.0.1271.97 (Win7)
  • IE 9 (Win7)
  • IE 7/8 Compatibility modes (issues with PNG backgrounds)
  • Mobile version of IE 9 (WindowsPhone7)
  • Android native browser (HTC Desire S)

Also, tested via responsinator.com.

Tested RTL language support (Arabic).

Tested on different Bartik color schemes.

I'll provide a patch in 10 minutes.

CommentFileSizeAuthor
#4 toggle.png1.05 KBKonstantin Komelin
#2 responsive_bartik-made-menu-collapsible-1873156-2.patch4.45 KBKonstantin Komelin
#1 responsive_bartik-made-menu-collapsible-1873156-1.patch3.43 KBKonstantin Komelin
Expanded menu on small resolution50.04 KBKonstantin Komelin
Collapsed menu on small resolution84.9 KBKonstantin Komelin
Current menu on small resolution45.29 KBKonstantin Komelin

Comments

Konstantin Komelin’s picture

Konstantin Komelin commented
Status: Active » Needs review
StatusFileSize
new responsive_bartik-made-menu-collapsible-1873156-1.patch3.43 KB

Here it is.
Please review.

Konstantin Komelin’s picture

Konstantin Komelin commented
Issue summary: View changes

Updated issue summary.

Konstantin Komelin’s picture

Konstantin Komelin commented
Issue summary: View changes

Updated issue summary.

Konstantin Komelin’s picture

Konstantin Komelin commented
StatusFileSize
new responsive_bartik-made-menu-collapsible-1873156-2.patch4.45 KB

Sorry, I lost binary file of toggle icon in #1 patch. Please ignore it and use improved one.

Anonymous’s picture

Anonymous (not verified) commented

the binary file "images/toggle.png" is not created. Applying patch trough TextMate on Apple MAc

Konstantin Komelin’s picture

Konstantin Komelin commented
StatusFileSize
new toggle.png1.05 KB

Don't know what's the reason. Using console git diff --binary / git apply

I've attached toggle.png to the comment. Please put it into images folder manually if you have problems with #2.

Anonymous’s picture

Anonymous (not verified) commented
Status: Needs review » Reviewed & tested by the community

the patch #2 works perfectly. Pls commit.

mjohnq3’s picture

mjohnq3 commented

This looks great. Let me play around with it for a while and I'll look at committing it.

expressdave’s picture

expressdave commented
Category: feature » support

patch #2 still has ie 8 issues for me. Each menu item appears as stacked horizontal bars.
Works well and collapses nicely on all other browsers.

Konstantin Komelin’s picture

Konstantin Komelin commented
Category: feature » support

expressdave, thanks for your tests!
Could you please provide screenshot of the issue?

I'm not sure we have mobile devices with IE 8.

Konstantin Komelin’s picture

Konstantin Komelin commented
Category: support » feature
expressdave’s picture

expressdave commented
Title: Make menu collapsible on small screen resolutions » Make menu collapsible on large screen resolutions

http://rmchait.com/bartikRes.png is an image of the Responsive theme as it appears in ie8 (Footer 1st - 4th column column also stack like menus). Mobile ios and android look ok (except toggle.png is in image file, but does not show), but unfortunately since ie8 (large screen) does not work, cannot use responsive theme. Perhaps there is a ie8 patch?

Konstantin Komelin’s picture

Konstantin Komelin commented

expressdave, you probably should not change the issue title and Category. Please create a separate issue for your IE 8 problem instead.

mjohnq3, please pay attention to it.

expressdave’s picture

expressdave commented
Title: Make menu collapsible on large screen resolutions » ie8 display issue with Responsive Bartik Theme
Version: 7.x-1.x-dev » 7.x-1.0-beta1

http://rmchait.com/bartikRes.png is an image of the Responsive theme as it appears in ie8. Other modern browsers look ok. Is there an ie8 patch?

Konstantin Komelin’s picture

Konstantin Komelin commented
Title: ie8 display issue with Responsive Bartik Theme » Make menu collapsible on small screen resolutions
Category: support » feature

Rollback of the issue category and title.

mjohnq3’s picture

mjohnq3 commented

Committed and pushed to 7.x-1.x.

mjohnq3’s picture

mjohnq3 commented
Status: Reviewed & tested by the community » Fixed
Konstantin Komelin’s picture

Konstantin Komelin commented

Great! Thanks!

Konstantin Komelin’s picture

Konstantin Komelin commented

mjohnq3, are you interested in D8 patch?

mjohnq3’s picture

mjohnq3 commented

That might be interesting. You could at least propose it for D8 Bartik and see what people think.

Konstantin Komelin’s picture

Konstantin Komelin commented

Created core issue #1880488: Make menu collapsible on small screen resolutions

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

Updated issue summary.