I have an HTML select item that changes style when you hover over it. However, in Chrome on Windows, this effect stops when you navigate through the select drop-down menu and off of the original location. (This issue is not apparent in Chrome on a Mac because that uses default colors.) How do I get the select drop-down menu to continue to trigger hover while the user is navigating it?
Here's a fiddle.
This question looks helpful for li drop-down menus, but I couldn't figure out how to apply it to the select element.
try adding this
select:focus{
background-color:green;
color:blue;
}
Related
I have a menu that uses hover to display submenus on a desktop. It seems with touchscreen devices the menu focus doesn't get initiated until after another element is touched (focused) first. When I touch the menu item to display the submenu, the menu item shows selected but the submenu doesn't display. If I take the focus off by touching another page element, such as an image or form field, and then touch the menu item a second time, the submenu works as expected. It will also work if I focus on a form element first and then the submenu. I have :hover, :focus, and :active all in my CSS but it seems to ignore the first focus/active. Is there a JQuery method to force the touchscreen device to initiate focus as soon as the page loads? Is there another solution to this problem?
From my experience, depending on css status is not enough to do what you are looking for here. It will either only work on desktops or only on mobile. Instead I would use the javascript ontouchstart event (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) for this.
Assuming your css looks something like this:
.your-hoverable-class:hover .submenu{
display: block;
}
You can move that :hover state onto a class of its own (.is-hovered), like:
.your-hoverable-class.is-hovered .submenu{
display: block;
}
Then you can perform the state toggling like this with Javascript (ES6)
const hoverableElem = document.querySelector('.your-hoverable-class');
hoverableElem.addEventListener('touchstart',(event)=>{
event.target.classList.toggle('is-hovered')
});
Now the user can "tap" on that element if they are using a mobile device. the :hover css works quite well with mouse, so you may want to keep the :hover toggling as it is too. Otherwise, you can just use the onmouseover and onmouseout events like above if you want to stick to a pure javascript solution.
I have a Wordpress website that has a horizontal menu bar with a drop down sub-menu that appears when hovering over the parent menu item. The links to the sub menu works in a regular browser, however, when using my iPhone, the links to the sub menu do not work. It previously worked only in a long press mode, but I didn't want the long press mode so I added the following code in my CSS to remove the long press mode:
.navWrap .top-bar2 li.menu-item {
-webkit-user-select:none;
-webkit-touch-callout: none!important;
}
and I also added the following javascript (because the CSS didn't work and some people suggested the javascript solution):
<script type='text/javascript'>document.documentElement.style.webkitTouchCallout = "none";</script>
You can test this by going to the following link: http://sa4iserver1.com/~hoffer/ -- at this time, the only menu item that has a drop down sub-menu is the RENT menu item.
Any suggestions on how to make the sub-menu links clickable via iPhone/iPad would be greatly appreciated!
To be more specific, how do we create a JavaScript menu with CSS styling that occupies the whole page, but the menu bar will be shown. There will be an icon on the top-left. Upon clicking that icon or symbol, the menu should appear and that image should glow. And after cliking it again, the menu goes away. I tried a lot but failed. I am just 14 year old. Please help me.
If there is something like that already which is open source, please post a link so that I can get on it.
UPDATE: I did it own my own.
Try this site here which gives you different menu bars to choose from. all you need to do is download a menu and change the menu details inside the script so that you can change menu names, add more or fewer menu tabs, etc. It uses jquery and contains its own css page which you can manipulate.
In order to hide and show the menu, how about using something like a html tooltip, except for hovering over the button to open/hide the menu, you can set it so that if you click the button, it opens/hide the button ?
Try this its opensource
http://www.interspire.com/content/2005/12/07/building-an-expanding-dhtml-menu-with-css-and-javascript/
http://www.noupe.com/css/13-awesome-java-script-css-menu.html
I wish to create a menu (a sign-up menu), see this to get an idea of it. When user clicks on this button/link a drop-down menu appears, using which he can do something (here login).
The behaviour of the link should be the following:
The drop-down menu should appear when clicked on this button/link.
when clicked anywhere on the page (including the button/link itself), but outside the menu, the menu should disappear.
If clicked somewhere on the drop-down menu, the menu should not disappear.
All the controls in the drop-down menu should work.
I did somehow managed to get first three working, but then the controls within the drop-down menu (4th behaviour) are not working.
The javascript/jQuery code along with html code is given here (jsfiddle link, same as above). You can fork it and make changes.
Thanks.
check this
http://thefinishedbox.com/files/freebies/loginfreebie/index.html
Download tha code
http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/
I made a fork of what you have on your jsFiddle: http://jsfiddle.net/DukyJ/
If you look at the code I just added an extra div to have the page's content so I don't have to assign click events to the whole body just only to that div.
Then, I removed the return false and the stopProppagation and just added a '#' to the link in the href because it wasn't necesary.
And finally just added some style to the signin link and the singin panel so you can see that the menu appears over the content as I suppose you want it to appear.
I've created a watermark/hint solution for a drop down where I absolutely position a label over top of a select element.
Unfortunately, when the user clicks where the label is, the drop down doesn't open - obviously the click is being blocked by the label. Is there any way to have it so when a user clicks on the label, the drop down is opened? I understand you can't open a dropdown via javascript but can you do something like hide the label when the click fires?
Edit: Creating a custom drop down like gmail does on their dropdowns is not a viable option.
CSS can handle that: add pointer-events: none to the label.
That's supported in all modern browsers.. except for current versions of IE (and Opera), so you'll still unfortunately have to use JavaScript.