Versions

ResponsiveCSSMenu.fwaction (2014-06-27) (Downloaded 604 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.

13 Comments

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

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.

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

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 to comment.