Versions

ResponsiveCSSMenu.fwaction (2014-06-27) (Downloaded 527 times)

Contains:

  • style_accessors (library-action) - v. 1.2.7
  • classname_functions (library-action) - v. 0.1
  • Responsive CSS Menu (item-action) - v. 1.0.4

Compatible: Pro 6

Author: Walter Davis

design responsive

Make a CSS menu for your Backdraft site that responds to the breakpoints you’ve set for your layout. When you scale down below the smallest “large screen”, you get a screen-space-preserving “hamburger” menu button.

Apply the Action in a similar manner to the Freeway-provided CSS Menus Action: draw an HTML box, apply the Action, and type your menu items inside the box as an unordered list. To create submenu options, simply enter your secondary options as a sub-list (use the indent arrow buttons in the Inspector to adjust the hierarchy).

Important difference between this Action and the CSS Menu Action – none of your menu options may be left without links. If you have a menu text item, it must link somewhere. (This is just good user experience practice anyway – particularly important for mobile devices, which do not have a cursor for mouseover events to do anything – but the CSS Menu lets you get away with this faux pas as a design preview convenience. Responsive CSS Menu does not have this feature.)

It is also important to set the HTML box that you use as the menu to a fixed height (not the default minimum-height).

This Action only creates horizontal menus with vertical drop-down options, by design.

18 Comments

Rather than load the icon styles from the CDN you could add an icon made from CSS; http://www.elijahmanor.com/css-animated-hamburger-icon/

I'm not a fan of that particular animation style but, again, you could easily extend the icon by using CSS3 animations to toggle the state.

That's a cool suggestion. I may also just put the icons in as data-url in the CSS.

I agree with Walter, that's a really awesome idea. Another item of feedback that I've heard is that clicking on the page title should also trigger the drop down. To me, this makes a lot of sense especially for those who do chose "Navigation" as the page name.

Maybe I miss something, but a responsive menu is defined in my world by percentage widths for each single entry. I even break a menu into two lines if there are more then 8 entries on a breakpoint of 1200px (sometimes). Yes - theoretically doable by .responsive-menu > li {width: 12.5%} but it would be cool to have this in the action. Furthermore I miss the item divider.

Another question:

Why two actions and not combine them both to a one more modern?

Cheers

Thomas

Hi all .. agree with Thomas above but you been been busy upgrading! also when you get a chance to add the onstage color option ( current page color) that would be so great! thanks for all the hard work

@Thomas, what are you referring to when you say "two actions, and not combine them both to a one more modern"? Responsive CSS Menus was written for BackDraft, and was not meant to replace all that the CSS Menus Action could do. I deliberately limited the scope of the Action to only the barest feature set that would work within BD. I would like it to grow, naturally, to include additional options, but I didn't want to start with the Swiss Army knife at the beginning.

thx Walter

Is it possible to set an on state manually when creating a menu using Responsive CSS Menu Action?

Missing feature from css menus.

Matt.

Matt, would you mind explaining what you mean by "on" state? What effect are you trying to achieve?

He means the menu indicating visually which element corresponds to the currently visible page. Making the "self-link" visible, in geek terms.

Thanks Walter for the clarification. Sadly, here is no support for this ATM besides Walter's JavaScript method.

I've just added a patch Action which adds an .active class to any links in the menu that point to the same page. It should do the same thing as Walter's JavaScript solution without the need to load libraries.

Hi Walter, I wondered if there was any way to customise the height of the menu dividers /borders in the Responsive CSS Menus without changing the height of the text and keeping alignment? I have added a border-right to my navigation so there is a black vertical line / divider between each link in my navigation but the line is much higher than the text and i would prefer it to be the same size or shorter. I have tried over-riding this in the Backdraft custom CSS with line-height but this changes the text too and not just the height of border / divider. I have also tried changing the height in the index_responsive-menu.css which seem to be getting closer but the line moves up away from the baseline of the text.

Thanks for your help

Mog

The dimensions of the "touch box" for each link are deliberately made quite large, so that they are easy to hit on a touch device or a desktop browser. To make a line to the right of the link that didn't span across the entire height of that box, I would make a background image that was the height of the box, but contained a vertical line centered vertically across the right side. Set the background to no-repeat and right center positioning. You could then adjust the height of the line independent of the box height. Alternatively, you could continue using the border as you have, but adjust the padding on the A tag so that it wasn't as high. I don't recommend that approach from a usability standpoint, however.

Hi Walter, I'm not sure how adding a background image would work as a divider for responsive CSS menu navigation. I need the dividers to stay in the same place between each link as the browser resizes for each device. Or it may I don't understand what you mean. Would it be ok to email you a link to the test site?

Thanks

Mog

You create a background image, and apply it (with CSS) to the A tag, just as you are doing currently using a border-right property. So in place of border-right: 1px solid #ccc; (or similar) you would have background: transparent url(path/to/image.png) no-repeat right center; The image would be of a single vertical bar of your desired height, and the result would be something like this:

link | link | link |

Hi Walter, I'm trying this but not getting very far. My coding skills are pretty poor so it might be that I have written this completely wrong. I've tried adding the CSS to the custom CSS file but no luck so editing the remote file index_responsive-menu.css but the image is not showing up. I'll keep trying. I may need to email you the link to see what I'm doing wrong. Thanks again

Mog

This is a similar comment to that made by Thomas earlier… i need to add more Main Menu items and i cannot as there is insufficient space across the width of the page, It would be good to have an option to wrap text on the main Menu .. it is there for the sub menu. but probably not that simple… Thx

John

Sign In or Sign Up to comment.