Is it possible to trigger changes to CSS of an element that is completely unrelated to the hovered div?
I have a CSS hover effect on a dropdown menu, that I also want to trigger the opacity of a div right at the bottom of the page to create a background overlay effect.
This is the CSS I'm using:
#overlay {
background:rgba(0,0,0,0.5);
position:absolute;
top:120px;
left:0;
z-index:0;
height:120%;
width:100%;
visibility:hidden;
opacity:0;
}
#menu-main-menu li.menu-parent-item:hover ul.sub-menu,
#menu-main-menu li.menu-parent-item:hover #overlay {
visibility:visible;
opacity:1;
}
The hover of the sub menu works fine, but the div #overlay is right at the bottom of the page, and doesn't get called when it's hovered.
I've tried all kinds of alternatives such as :hover > #overlay, :hover + #overlay, but nothing seems to trigger it. I also can't seem to find a definitive answer to the question.
Is it possible?
Yes. You can load this style in a php file and then use jQuery to apply the css when your div has been hovered on.
No there is no way to select parent element in css and that means that you cannot move up in hierarchy.
<ul class="hover-parent">
<li></li>
</ul>
<div>Something here</div>
<div class="target"></div>
From this point :
.hover-parent li:hover you cannot go up (to ul or div).
Selectors which you tried to use are "next":
A>B - This will select only direct B children of A
A+B This will select B immediately preceded by A
Here you can find W3C documentation of CSS selector
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
And demos:
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Notice that it will be really confusing for user that different part off app/page is changing when he is hovering something else. Bad UX idea.
You're going to have to use JavaScript to do this.
Your posted selector #menu-main-menu li.menu-parent-item:hover #overlay is looking for #overlay somewhere inside of an ancestor element of li.menu-parent-item that is somewhere inside of an ancestor element with an id of #menu-main-menu.
Using the child selector > will not work as the overlay element is not a child of the list element you're hovering in your menu from what you have described and from comment responses.
As #Paulie_D has pointed out the two target elements, the element to be hovered and the overlay element, need to adjacent siblings to use the sibling selector +. From what you have described and the comment responses they are not adjacent siblings.
I have setup a basic example for you using jQuery. This example displays the overlay as long as you are hovering any element in the .main-menu element.
HTML
<ul class="main-menu">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
</ul>
</li>
</ul>
<main>
Content here.
</main>
<footer>
<div class="overlay">This is my overlay.</div>
</footer>
CSS
body {
margin: 25px auto;
width: 500px;
}
ul,
li {
margin: 0;
padding: 0;
}
main {
min-height: 300px;
}
footer,
.overlay {
height: 50px;
}
footer {
position: realative;
background-color: yellow;
}
.main-menu {
list-style: none;
height: 50px;
}
.main-menu > li {
float: left;
padding: 0 10px;
position: relative;
}
.main-menu > li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
list-style: none;
position: absolute;
left: 10px;
width: 150px;
}
.overlay {
display: none;
text-align: center;
}
jQuery
$overlay = $('.overlay');
$('.main-menu > li').hover(
// when hovered
function() {
$overlay.css('display','block');
},
// when NOT hovered
function() {
$overlay.css('display','none');
}
);
jsFiddle: http://jsfiddle.net/ednf2pzq/
Edit
You could simplify the jQuery hover selector to .main-menu.
jQuery
$('.main-menu > li').hover(
// same code as before
);
jsFiddle: http://jsfiddle.net/ednf2pzq/1/
Related
I have a simple menu, everytime i click an element the others fadeOut and the clicked one goes up if it's not the first element, and after that i activate the href of the link.
To activate the link i need to make sure that the element is in the top of the page, after the addClass slideUpSm the clicked item gets new position top but i think the position top needs to be refreshed because the addClass slideUpSm gets the css top 0
setTimeout(function() {$('.main-nav li').addClass('slideUpSm')}, 1200);
After that, i can activate the window location, i have tried the hasClass methode and also tried to check if the new position top equals zero, here is my attempt https://jsfiddle.net/n37kgv4r/
setTimeout(function() {window.location = href}, 100);
If you just want to hide the other links and navigate to only the clicked node, we dont need to use the css top. We can achieve this with simple jquery code.
$(document).ready(function(){
$('.main-nav li a').click(function(e){
$(this).parent().addClass('show');
$('.main-nav li').not('.show').slideUp(1200);
var obj = $(this);
setTimeout(function(){
//remove the alert
alert("Navigating to "+ obj.attr('href'));
window.location.href=obj.attr('href');},2000)
return false;
});
});
a {
text-decoration: none;
color: black;
}
.main-nav {
position: relative;
}
.main-nav li {
position: sticky;
display: flex;
font-size: 60px;
line-height: 43px;
letter-spacing: -3px;
margin-bottom: 11px;
transition: all 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul class="main-nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
I want to only show the sub-menu that is the child of the clicked li and button when it is clicked. Currently the click and show and hide are working but the code below shows both the sub-menus on click, I want only the child sub-menu of the li button to show on click.
<ul id="menu-main-menu" class="nav-menu">
<li class="menu-item">Menu link
<button aria-expanded="false" class="dropdown-toggle"></button>
<ul class="sub-menu">
<li class="menu-item">link1</li>
<li class="menu-item">link1</li>
</ul>
</li>
<li class="menu-item">Menu link 2
<button aria-expanded="false" class="dropdown-toggle"></button>
<ul class="sub-menu">
<li class="menu-item">link1</li>
<li class="menu-item">link1</li>
</ul>
</li>
</ul>
<div class="site-content"></div>
jQuery:
jQuery(document).ready(function ($) {
$("#menu-main-menu").on('click', 'button', function (event) {
$('ul.sub-menu').appendTo('.site-content');
if($('ul.sub-menu:visible').length)
$('ul.sub-menu').hide();
else
$('ul.sub-menu').show();
});
});
CSS:
#menu-main-menu ul.sub-menu {
display: none;
}
ul.sub-menu {
display: none;
position: absolute;
z-index: 200000;
top: 0;
left: 1.5%;
right: 1.5%;
margin: 0 auto 0 auto;
padding: 20px;
list-style: none;
}
ul.sub-menu li {
width: 24%;
display: inline-block;
padding: 8px 9px;
text-align: center;
}
ul.sub-menu .toggled-on {
display: block;
}
.site-content {
display: block;
position: relative;
}
Solution: So the solution here was to not use appendTo(), as I had to put the element back where it came from when toggled off. The solution was to merely toggle the menu item using correct position: absolute CSS for the .sub-menu and $()on('click' to toggle it.
jQuery('#menu-main-menu').on('click', 'button', function(event) {
if($(this).closest("li.menu-item").children("ul.sub-menu").length > 0)
{
$(this).closest("li.menu-item").children("ul.sub-menu").slideToggle('fast');
return false;
}
});
See it working here: http://jsfiddle.net/abdqt6d9/
The problem is that you are writing incorrect selectors for your jquery:
$('ul.sub-menu')
That means it will grab all matching elements within the page.
What you need to do is grab the corresponding li. Within your click(), the $(this) becomes the button that is clicked. Using .parent() will give you the li element. From there, search for your corresponding sub-menus within the li_element:
var $li_element = $(this).parent()
var $sub_menu = $li_element.find(".sub-menu")
if ($li_element.find(".sub-menu:visible").length > 0) {
$sub_menu.hide()
} else {
$sub_menu.show()
}
The other problem is that perhaps your styling for your sub-menu is above the buttons. so once you show it, you can no longer press the button. So you need to restyle your sub-menus.
$("ul.sub-menu") will apply to all the sub-menus, so you need to change it to only look for the sub-menu within the buttons parent. You can do this using .closest (or just .parent()) and then .find
//closest("li") will find the closest parent that is an li
//find(".sub-menu") will find the sub-menu within
$(this).closest("li").find(".sub-menu").show();
If you your button is always going to be before the sub-menu you can slim it down to just .next(".sub-menu")
$(this).next(".sub-menu").show();
I have a sliding menu that should be displayed over an image, actually a logo. However, when it does, it is shifted as if the text of the menu wanted to avoid touching the image.
See :
the problem in image http://fruityhotchocolate.com/m.png
(note: the website is in french)
I deal with the event as follows:
$("nav>#menu>ul>li").hover(function(e) {
$("ul",this).css("display","block");
});
Thanks.
You don't need javascript, you can do it with CSS:
Add the following code:
#menu>ul>li>ul {
display: none;
list-style: none;
}
#menu>ul>li:hover>ul {
display: block;
}
Moreover, you should use child selectors (>) instead of descendant selectors:
#menu>ul
#menu>ul>li>ul
#menu>ul>li>ul>li
#menu>ul>li>ul>li>a
#menu>ul>li>a, #menu>ul>li>a:hover, #menu>ul>li>a:visited
Basically, what happens is that the li expands to the same width as the ul because it does not have a fixed width. Try:
$(document).ready(function() {
$('#menu ul').children('li').each(function () {
$(this).css('width', $(this).css('width'));
});
});
Try it with CSS:
<div class="content">
<img src="https://www.google.com.br/images/srpr/logo3w.png" />
<ul class="menu">
<li>Item 1</li>
</ul>
</div>
CSS:
.content {
position: relative;
}
.content:hover .menu {
display: block;
}
.menu {
position: absolute;
display: none;
}
Demo: http://jsfiddle.net/nfKc4/
Would you mind to take a look at my jsfiddle?
As you can see, I putted a horizontal line below an active list item anchor.
I want the horizontal line to be at the bottom** of an anchor, just like a border-bottom when hovering, not at where my cursor stands. Can anybody help me out?
Thank you in advanced!
With Kind Regards,
Jonathan
The problem is because you were using an li element for the line that it was stopping the mouseover of the ul and reversing the animation. Instead use a div inside a containing element, with a lower z-index to stop it intercepting the mouseover event.
HTML:
<div id="container">
<ul>
<li>sub nav</li>
<li>sub nav</li>
<li>sub nav</li>
<li>sub nav</li>
</ul>
</div>
Amended javascript:
var animation = $('<div>').css({
'position': 'absolute',
'height': active.outerHeight()-1,
'width': active.outerWidth(),
'marginTop': (active.parent().index() * active.outerHeight()),
'borderBottom': '1px solid #000',
'z-index': -10
});
Example fiddle
Also, you need to make the border-bottom transparent on the ul li a elements for the line to show through them. You could use margin-bottom: 1px if you prefer.
Not sure exactly what you're trying to achieve, but if it's just getting a line under the active <li> element then this jsfiddle might do the job.
It uses your css to apply the underline, with some simplified jQuery:
$(document).ready(function() {
$('ul').mouseout(function(){
$(this).removeClass('active');
}).
$('ul > li').mouseenter(function(){
$(this).addClass('active');
});
});
The problem is that the animated li has a higher z-index than the other list elements. And you need to remove the white border from the links.
Take a look at this fiddle: http://jsfiddle.net/YFUsJ/12/
CSS:
ul li {
display: block;
position:relative;
z-index:1;
}
ul li a {
text-decoration: none;
height: 30px;
line-height: 30px;
display: block;
padding:5px;
color: #555;
font-size: 1.4em;
}
I'm Designing a website which involves slideDown.
Initially i have set up a template which looks like the image below
When i hover over each black blocks a ul list will be displayed... But a problem arises when i hover... All the content below the block moves down (This is illustrated in the following figure)
I cant give the position to be absolute because all the content above and below are floating (They Don't have a fixed height). So what else can be done to get a slideDown by holding the rest of content there and by displaying the hover content over the text?
To achieve what you want you should slideDown() an inner submenu element instead of the block itself.
Consider this sample markup:
<div class="item" id="mybox">floating box
<ul class="submenu" style="display: none;">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
<p>More content... Just to illustrate</p>
<p>More content... Just to illustrate</p>
The CSS would be something like:
.item {
position: relative; /* to hold absolutely positioned submenu inside */
background: #2684b7;
color: #fff;
padding: 10px;
float: left;
}
.item .submenu {
position: absolute; /* the menu would go on top of everything */
background: #2684b7;
width: 100%;
left: 0;
}
p {
clear: both;
}
And finally the JavaScript is simple, just don't forget to bulletproof your animation:
$('#mybox').hover(
function() { /* mouseover */
$(this).find('.submenu').slideDown();
},
function() { /* mouseout */
$(this).find('.submenu').slideUp();
}
);
Here's the example on jsFiddle: http://jsfiddle.net/zxrvC/
Good luck.
Make a div with position: relative and z-index:55 and inside that div add a new div with position: absolute and also give width. Hope this will solve.
Regards
iijb