FreewayTalk
13 replies to this thread. Most Recent
[Pro] CSS Menus Acton and Focus
Hi,
Is there any way to set Focus to menus that were created with the CSS Menus Action? Like with an Extension or something?
Thank you.
Yes, it is possible. The way I do it is the give each page an id by going the the Extend option in the Page menu and adding it there. Then I create a CSS style that targets that id.
Freeway Pro 5.5, i7 Macbook Pro 2.2 ghz 8gb ram, 2.3 ghz Dual Core MacPro 10gb ram
Thanks! I’m glad this is possible. I’ll give it a shot, though I’m not quite sure how to pull it off. Focus on menu items is very important for those who navigate with a keyboard—especially for those who are visually impaired.
I appreciate the help.
Sorry to jump in here but I think there may be a confusion with what you want. Are you talking about a visual focus for the menu item (the home link is styled differently from the others because that is the page you are currently on) or a selection focus (so that the menu can be tabbed in and out of and used from the keyboard)? Reading Chuckamuck’s reply his solution would would give you the visual styling but not the selection focus. Thanks, Tim.
Quoting wurliuchi <email@hidden>:
Thanks! I’m glad this is possible. I’ll give it a shot, though I’m not quite sure how to pull it off. Focus on menu items is very important for those who navigate with a keyboard—especially for those who are visually impaired.
I appreciate the help. Extend Freeway the way you want with FreewayActions.com http://www.freewayactions.com
Thanks, Tim.
I need the menu item (tab) to be highlight as if it were being hovered over, but I need this when someone navigates the site with a keyboard using the tab key (or whatever key they use). I had this working when I was trying to create my site with Dreamweaver. I used the focus parameter. Is this possible to apply to menu items that were created with the CSS Menu Action? I was surprised I didn’t see that parameter in the CSS Menu Action box.
Thank you.
Tim, I just read your post again. Yes, the selection focus is what I want (in case I didn’t make that clear in my last post). Some of this terminology confuses me.
Thank you.
No problem. Although the action will allow you to visually style the current page link in the menu (using the Highlight Current Page checkbox) I don’t think it currently supports keyboard access. Are either of these examples close to what you are looking for where you can use the keyboard to navigate the menus?; http://coinet.org.uk/ http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
There may be a way to retrofit a solution like this into the current page depending on the functionality you need. Regards, Tim.
Quoting wurliuchi <email@hidden>:
Tim, I just read your post again. Yes, the selection focus is what I want (in case I didn’t make that clear in my last post). Some of this terminology confuses me.
Thank you.
Extend Freeway the way you want with FreewayActions.com http://www.freewayactions.com
Both those examples are pretty good. The second one’s drop-downs are very good and obvious. The top menus don’t highlight at all, though.
We do have the focus ring in most browsers, and in some we can change the way it looks (if we know how or can see to make the changes), but for a person with a visual impairment (like with only 4% of their site remaining), the more obvious the better. Many of them would like that more than turning on JAWS or Voiceover.
Take a look at these menus: http://www.northcoastsoundsystem.com
It’s a skeleton of our site I just started working on. I want the focus to be the same as the hover. Very obvious.
Thank you so much for the help. Much appreciated.
Try this; http://www.freewayactions.com/test/cssmenufocus/
Assuming you have the tabbing preferences enabled in your browser (Safari calls this ‘Press tab to highlight each item on a webpage’ under the Advanced tab in the Preferences) you should be able to tab through the links in the menus and watch each one ‘light up’ as if you had rolled over it with the mouse.
What I’ve done is to manually extend the CSS styles the CSS Menu action creates to allow the menu items to change using the :focus pseudo class. If you look at the page source code you’ll see where I’ve extended the styles and added extra ones for :focus and :active. In theory we could just use :focus to change the link style when the item gets tabbed into but Internet Explorer has never really worked well with this so by adding another style for :active we ensure that we cover both IE and other, more modern, browsers.
I’ll send a bug report to Softpress and ask them to consider adding these features when the action next gets revised. For the moment I would suggest adding these styles manually as markup items. I hope this helps. Regards, Tim.
On 27 Apr 2009, at 16:55, wurliuchi wrote:
Both those examples are pretty good. The second one’s drop-downs are very good and obvious. The top menus don’t highlight at all, though.
We do have the focus ring in most browsers, and in some we can change the way it looks (if we know how or can see to make the changes), but for a person with a visual impairment (like with only 4% of their site remaining), the more obvious the better. Many of them would like that more than turning on JAWS or Voiceover.
Take a look at these menus: http://www.northcoastsoundsystem.com
It’s a skeleton of our site I just started working on. I want the focus to be the same as the hover. Very obvious.
Thank you so much for the help. Much appreciated.
FreewayActions.com - Freeware and shareware actions for Freeway Express & Pro.
Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com
And yet another saint. Tim, that is fantastic!!! That is it exactly!!!
Thank you so much. Wow, you guys are extremely helpful. That’s two huge hurdles you guys have thrown me over today. ;-)
I’m a little unclear as to how I can get this into my pages, but let me study the code and copy it and then go into FW and mess around with getting it in there. I think I can figure it out…maybe.
Thanks again. I very much appreciate the help.
Specifically you’ll need to add the following styles to your menu page with a block of markup.
Select HTML Markup from the Page menu and in the Before end head (</head>) section paste the following CSS styles;
(I would have pasted it inline using the form on the site but the message preview freaked out for some reason and put all of the code on one line).
Regards, Tim.
Tim,
It works perfectly. Thank you so much for your help, effort, skill, and time.
Just for general information to others who may not know: One thing I noticed about Page Markup and Master Pages. If you add markup to a master page and reapply that master page to pages that already exist, the markup will not be added to that existing page. You have to paste it in each page.
Creating new pages from master pages that have markup does add that markup to the new pages.
Hope that made sense.
Thanks again.
It did. Thanks. It sounds either like a bug or a misguided hidden feature. :-) Regards, Tim.
On 28 Apr 2009, at 12:35, wurliuchi wrote:
Creating new pages from master pages that have markup does add that markup to the new pages.
Hope that made sense.
FreewayActions.com - Freeware and shareware actions for Freeway Express & Pro.
Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com
