Software Menu simulation
December 3, 2016 12:00 AM
First off, I'm probably making more work for myself than I need to with this project, so if you have comments on simplifying for future reference, definitely offer those!
Right now, I'm working on a software simulation where the toolbar menus have menus that expand from the main menu itself. I've attached a sample here where there is a Utilities menu as part of the File menu. The utilities menu expands when the Utilities option is hovered, then disappears if the Utilities menu is not hovered. If an item in either menu is clicked, both would hide again until clicked.
I'm struggling to simulate this using mouse enter to have the Utilities menu open, stay open while hovering the options there, then closing if moving back to the file menu. Both menus use transparent buttons for where the clickable options are.
I've tried a few different things and this is the closet I've gotten. The Utilities menu opens on mouse enter for the Utilities button. The menu opens, but isn't closing or staying open correctly when going over to the menu or the buttons for the Utility menu. Right now, I have a mouse enter on the buttons and the menu image to try and keep it open, which mostly works. But since the menu image is layered below the actual buttons, it seems to be messing with the mouse enter process.
I'm trying to keep them grouped for easier copy/paste into pages or other modules, but if grouping is part of the problem, I may just abandon this method of creating the page. This method would mean creating a significant number of transparent buttons, so I want to get this working before I dive further. Thanks for the help!
Discussion (8)
Grouping items is always a good idea, as long as this doesn't prevent you from bringing objects into a suitable layering.
You've set the fill style of your buttons for the "Normal" state to "transparent" (opacity = 100). By doing this the buttons are completely invisible, in Edit Mode as well. If you set "Opacity" to "0" the button would be visible in Lectora. It may sound a bit weird that a fully visible transparent button is completely invisible, and an invisible transparent button is visible, but it's nearly 2017 ;-)
In the sample, I have changed it for the "New reminder" button so you can see what I mean. For me it's easier to keep an overview over the layering on the page if all objects are visible.
A problem with your setup is that you hide the utilities menu on Mouse Exit of the Utilities buttons and that you have a gap between the Utilities button and the buttons in the menu. For users who aren't moving the mouse very fastly the menu will be gone before the it can be shown again by one of the menu buttons. And of course the menu should be visible while the mouse is over the background image. This can easily be solved by adding another transparent button / image behind the menu and the Utilities button that does all the hiding. The only thing that is important is that you must not have a gap between the Utilities button and the background image of the Utilities menu so the mouse cannot enter the button behind it while moving it along the button to the menu.
Tim
That's working much better - I ended up adding the Hide On Mouse Over to each of the buttons on the file menu. I couldn't determine where the other transparent button was supposed to go, so in the long run, since this is a smaller menu, it was pretty easy to copy/paste the action.
I did come across an interesting issue that makes a huge difference in how the appearance and functionality works. If you turn on Use Web Accessibility Settings, it breaks and the only way it works in Run or Preview in Browser is if Normal and Over are set with an opacity of 100. And, as you pointed out, when you set the Normal state to 100, you lose visibility in Lectora. The same behavior occurs even when setting the Over to a color, regardless of opacity.
This might be the second bug I've found during my work on this title. I'm not sure if this is "fixed" in 17 as I haven't had a chance to take a look at all the changes yet.
Jason - Can you tell me what breaks when the web accessibility settings are turned on?
Hi @JasonADal,
We have multiple email addresses for you. Can you send me a message with the correct one so I can get the support case setup? Thanks!
Sure! It's jason.dalrymple@state.mn.us
The issue doesn't get in the way of the button functioning and is more of an odd nuance that you need to be aware of when using the web accessibility feature. The button works correctly with accessibility on as long as you configure the states on the button correctly. It just happens that the states need to be configured differently based on whether or not you have the web accessibility turned on or not.
Thanks for the reply, Jason. I'm going to forward this title to our Support team so they can log it as a bug. I'll also ask them to contact you if we can provide you with a solution you can apply until the issue is fixed. For example, is there a specific feature of the Web Accessibility Settings you need to take advantage of - you can still create accessible titles without having that option checked, depending on the requirements you need to fill.
Hi Laura - I apologize for the long delay replying to you. I'll try and put back together the steps I was looking at when I put this out there originally.
In my example, the button is a shape with a transparent fill and opacity set to 100. With that setting, I cannot see the button in the design window unless I click on it in the title explorer. The button works when previewing in the browser.
If I follow Tim's steps and change the opacity to 0 on the button, I can see it in the design window. However, when I preview in the browser, the hover state no longer works correctly in that there's no border around the hovered selection.
If I turn off Use Web Accessibility in the title options, the button works as expected with the opacity set to 0.
So, what breaks is the "over" setting on a transparent button depending on if Use Web Accessibility is checked or not. I attached a zip with two pages that show the difference with Web Accessibility selected.
I can confirm that it's happening, when "Use Web Accessibility Settings" is checked. Lectora 16.1.2
Tim
Discussions have been disabled for this post