I have created this CSS drop down menu. The menu works flawless as it should, my only question
is how can I get the sub menus to stay open and not instantly disappear when the mouse is removed off of them?
My code is at this link,
http://fiddle.jshell.net/NJ4UP/
I have tried several things but nothing is seeming to do what I want. I would prefer not to use J-Query or JavaScript, as I'm not that familiar them, but any help will be greatly appreciated!!
All I want and need is for the sub-menus to not instantly disappear if the mouse is not hovering over them. I was thinking a timeout option or something that sets it to close after a predetermined amount of time (ie 5 seconds) or another menu or link is clicked.
Thanks in advanced.
In CSS you may expand area that covers <li> when hovered with a pseudo element : DEMO.
li:hover:before {
content:'';
position:absolute;
width:100px;
height:200px;
background:rgba(0,0,0,0.01);/* not 100% transparent, so it gets the mouse over */
}
In CSS you may delay transition to close your menu DEMO.
do not use display to hide/show the submenu
Use a rule that handles number value.
#menu ul > li ul {
position:absolute;
margin-left:-9999px;
transition:0s 0.5s;/* stay open 0.5sec before to hide again */
}
#menu ul > li:hover > ul {
margin:0;
transition:0s 0s;/* show ! don't wait */
}
You could check this out, maybe it helps:
http://www.w3schools.com/css/css3_transitions.asp
In CSS you may use the experimental rule pointer-events and HTML tabindex attribute .
pointer-events to control mouse events hover <a> in <li> first level.
tabindex for <li> first level , so it can be focused via click & tab.
The idea is:
to shortcut the click events on so <li tabindex="0"> can take the :focus and apply
same rule as :hover.
then once <li> has focus , to give back to ability to receive mouse events.
DEMO - CSS click open/close menu
it alows to open close menu via the key tab
At the moment i believe it is better to set a class instead tabindex and use javasript to toggle class on click , or at least to keep the :hover rule effective.
It can be done somehow for a two level menu too
Related
I have CSS(HTML) horizontal menu and everything is working properly, but when i touch with the mouse one of the menu "listing" is appear, but i want to make it clickable.
I try almost everything in this row:
.main-nav-ul li:hover ul {
display: block;
}
But without success...
I`m using Joomla and custom HTML CSS Javascript module.
I use this code:
https://github.com/shahbokhari/webdev/blob/master/Vertical-Drop-Down-Navigation-2015%202/vertical-drop-down-navigation-using-html-css-2015.html
I want when i click on ЧАСТИ ЗА LED ТАБЕЛИ to be able to see sub menus in this category.
With css you can only handle hover(mouse enter and mouse out). to handle click you should use javascript:
$('.main-nav-ul li').click((e)=>{
$(e.target).closest('li').toggleClass('toggled');
});
it will toggle (add/remove) toggled class of li element, when it's clicked.
then you should replace li:hover to li.toggled in css , to apply toggled styles when li has toggled class.
you can see this in codepen
im trying to make the button in hover state while the cursor still in the submenu but can't figure out. Really need help! Thanks!
function hideAllCat() {
$("#categories").hide();
}
hideAllCat();
$("#tab50").mouseover(function(){
hideAllCat();
$("#categories").slideDown();
});
$("#categories").mouseleave(function() {
hideAllCat();
});
http://jsfiddle.net/G5RtR/24/
Your #tab50 element are not the parent to #categories element, therefore you cannot use the pseudo-class :hover. :hover only works when the object is right under you mouse arrow. That being said, you now have 2 (++) possible solutions.
Make #tab50 parent to #categories. The when the sub-menu expands, the #tab50 also expands correspondingly.
Use javascript to do the job. $("#categories").mouseover(function({$("#tab50").css({'background':'#abc','color':'red'})});
And remember to change the colors of #tab50 back to normal in $("#categories").mouseleave();
Note:
#categories should be a class instead of an id, since hideAllCat() should hide all categories, and one cannot have more than 1 id in a html file.
I have a multi-level drop down menu at http://www.theseymourgroup-comm.net/new/. If you hover over Properties, you will see the first drop down menu come down that includes Commercial and Development. But when you hover over Commercial, you will see that the next level with Active and Sold goes way out to the right. I right clicked that panel and chose inspect element but could not determine what I needed to change in the css to make it move over to hug the first drop down menu. Any help would be appreciated. Thanks
The element with the "Active" and "Sold" entries is absolutely positioned, but it doesn't have settings for top or left / right.
If you add this rule
.nav li ul ul {
left: 150px;
}
you'll come closer to what you want. (I leave the finetuning of that value to yourself...)
I think javascript have some problems. Menu Dropdown use css only.
This is my example. It's very simple for newbie
First time asking a question here...
I'm making a drop down menu with some effects that I got from cssdeck.com.
Basically the nav is from one source, and the sub menu from another.
I've mixed two cssdeck.com source to make it look like one.
So far, I got the sub menu to appear on hover, but can't make it stay visible so I can click on the sub menu.
The code is pretty long and complicated and I'm not exactly sure how to show/share it for you to check...
How do I make "A" to appear on "B":hover and make "A" stay visible when I move the pointer to "A" to select something on "A"??????
<nav>
<div class="nav_main ph-dot-nav">
Home
<a href="#">About
<div id="sub_about">
<ul>
<li class="li_first">회사소개 </li>
<li>대표인사말 </li>
<li class="li_last">회사연혁</li>
</ul>
</div>
</a>
Services
Portfolio
Partners
Contact
<div class="effect"></div>
</div>
</nav>
Fiddle Demo here
You can solve this, if you also show the submenu if you hover on it. See
https://jsfiddle.net/7xfrod2s/
#sub_about:hover {
visibility: visible;
}
Also I moved the visible: hidden style to the parents tag of ul (#sub_about).
Maybe you need an other :before tag so that there is no gap between the header and the submenu (a curser-bridge so to say) ;)
To achive this with CSS there's are rules your need to stick with. First take a look as this pic.
http://i.imgur.com/IAsz39w.png
(I'd love it, if someone help me post a pic)
must be have no space in between your Menu tag and subMenu. It will fail if there is 1px in between thse element.
use the simple hover stage like follow
subMenu must be children of Menu
hide the subMenu
.subMenu{
display: none;
}
make subMenu appear when you hover on its parent or itself
.menu:hover .subMenu{
display: block;
}
Explaination: the hover state of DOM quite simple. if you are hovering on a child element it also mean that you are hovering on its parent. So this is while you must not let any space inbetween Menuand subMenu. Because the movement your cursor hover on that 1px for 1ms the DOM will understand as the hover state over. So it will hide the subMenu away
For example: in the pic. Pretending like your submenu not hiding, so if you are hovering on subMenu the DOM also understand as you are also hovering on Menu (parent menu)
I have this problem in Safari and Chrome but not in IE.
When I click a button the mousedown event triggers some kind of CSS rule which makes it slightly wider.
Because of this it drops down onto the next row and the click event is not triggered.
It stays on the next row until the mouse button is released.
I'm working on a large existing site and it's difficult to isolate all the CSS, but I think this could be due to an effect inherent in the browser(s).
Is there a CSS way to stop any effects occuring when the button is clicked?
Thanks for your help.
This is the CSS I have found for :active / :hover.
I don't think this could cause it!
a:hover, a:active
{
text-decoration: none;
}
(The button is an image inside an anchor)
Open your page with Chrome. Right click on the element and select inspect element. On the right handside corner of the inspect element handler, you will see few icons.
Click on the middle one(Which is having a arrow. When you hover it a label will display as "Toggle element State").
Change the element state to active (and to focus if it didn't change anything), and now you will be able to see what css rules are used to apply those changes to your button(It can be a padding or width).
Since now you know what the rule is, you can undo it using another rule (Or using javascript). It's hard to say how to remove the effects without knowing what the effects are.
you can declare a class in css name it for exemple abortmousedowncss :
.abortmousedowncss{
width:yourwidth; !important /* this dont allow any css to overide it ;)*/
}
and you can apply it after with jquery like this :
$('#yourbutton').addClass("abortmousedowncss");