While trying to make a social bar side-menu I added a hover effect when if hovered the list item would pop out to the left. But for some reason when hovering any list item every other pops out also. I was searching for a solution but sadly didn't find the answer to this problem.
Codepen
you have 2 solutions :
Apply the hover property for the link instead of the li item.
Build a css class for width & margin-left and use jQuery to load it once li item is hovered.
I've made a fast jQuery function :
$('.social-nav-item').hover(function(){
$(this).addClass("link_hovered");
});
https://codepen.io/anon/pen/QoNXZL
Pure CSS to li item :
.social-nav-item:hover{
width:200px !important;
margin-left:-150px;
}
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
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
I get an unordered list by a cms that I want to style.
It works well, but only for the first <li id="link-18"> element. My goal is it to style the <ul> blocks all the way trough, like the first one. See http://jsfiddle.net/UyrdS/3/ (the second and third link shows the toggled <ul> block not on top)
If the second link (level 2 two) is clicked, the toggled new <ul> block shows beside the navigation, but not on top like the level 1 one links does it with his children element <ul>
You can change your css to generate a nice submenu
nav ul>li>ul {
display: none;
margin-left:2em;
}
See the example on http://jsfiddle.net/WrcMX/
I think this is what you wanted
alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
alllinks.hide(); //First hide all the links
e.preventDefault();
if ($(this).parent().children('ul').size() > 0) {
$(this).parent().children('ul').toggle();
}
});
I gave up. I'm a pretty worse inquirer :)
Thanks for the answers. Kudos to you all for spending your time. This fiddle is the closest to my question.
http://jsfiddle.net/UyrdS/6/
But it's not dynamic. It has a static width. That is still the problem.