ResponsiveCSSMenu.fwaction (2014-06-27) (Downloaded 604 times)
Contains:
Compatible: Pro 6
Author: Walter Davis
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.
Walter Davis
That's a cool suggestion. I may also just put the icons in as data-url in the CSS.
Thomas Kimmich
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
Carla Grande
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
Walter Davis
@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.
Carla Grande
thx Walter
Matt Brooke
Is it possible to set an on state manually when creating a menu using Responsive CSS Menu Action?
Missing feature from css menus.
Matt.
Walter Davis
He means the menu indicating visually which element corresponds to the currently visible page. Making the "self-link" visible, in geek terms.
Mog Fry
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
Walter Davis
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.
Mog Fry
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
Walter Davis
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 havebackground: 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:Mog Fry
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
John Williams
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.