I'm trying to do a dropdown menu with a div. The transition on the div is fine and everything is working great. But I don't know how to get the text that's in the dropdown area do be hidden when I'm not hovering?
Html code. not much but it is droping down as it should. I don't want menu to be hidden only the text writen below it.
<div class="dropdown">Menu
<br/>Games
<br/>Food
</div>
CSS code. Transitions and all.
div.dropdown
{
position:absolute;
width:920px;
height:20px;
top:110px;
left:50%;
margin-left:-460px;
z-index:1;
background-color:gray;
-webkit-transition: height 2s ease;
background:black;
text-align:center;
color:White;
}
div.dropdown:hover
{
height: 45px;
-webkit-transition: height 0.1s ease;
}
You can use the css:
overflow: hidden;
in the .dropdown class.
This will allow you to hide everything that displays outside of the elements bounds.
here's a fiddle
Change your html so that your dropdown items are in an ordered list <ul> inside the div
Add some css so that the list is normally hidden
div.dropdown ul{
display:none;
}
div.dropdown ul:hover{
display: block;
}
Also, remove the existing height limit on the dropdown div.
then some JavaScript/jQuery to make the list appear when you hover over the menu
$('div.dropdown, div.dropdown ul').on('hover', function(){
$('div.dropdown ul').show();
}
$('div.dropdown, div.dropdown ul').on('mouseleave', function(){
$('div.dropdown ul').hide();
}
Related
I have a container, and two texts inside where one is hidden, that is display:none. I want that when I hover the container, the hidden text appears. Everything is working well, except that I want a slide down effect the hidden text appears. Here what I did:
<div id="maincontainer">
<p>Hover on the container</p>
<p id="hiddentext">Hey, I'm visible!</p>
</div>
<style>
#hiddentext {
text-align:center;
display:none;
transform: translateY(0);
transition: all .3s ease-out;
color:#fff;
font-family:'lato',sans-serif;
}
#maincontainer:hover>#hiddentext {
display:block;
transform: translateY(10%);
}
</style>
The hidden text is appearing, but not with a slide down effect. I have seen other tutorials where they do this with opacity and visibility, however, it leaves the extra space which I do not want. So, I am using the "display" property here. Can someone help?
I have a blue back grounded div that will be animated to top on hovering on it . I need the div to follow the same effect and reach its original position on UN hovering form it Source code attached . Should i write separate coding for it? The blue color div comes back very quickly when i UN hover it
HTML
<div id="wrapper">wrapper<div id="lion">Hover</div></div>
CSS
#wrapper{ position:relative;top:30px;height:140px;width:150px;overflow-y: hidden;}
#lion{position:relative;width:100px;height:50px;top:20px;padding:20px; background-color: blue;}
#lion a {color:black;text-decoration: none;}
#lion:hover{transform: translateY(-70px);transition-duration: 2s;}
If you add transition-duration: 2s; to the #lion. The blue shape should transition back to original position when hover is removed. Use the css below. Also you can see it working on this jsfiddle.
#wrapper{
position:relative;
top:30px;
height:140px;
width:150px;
overflow-y: hidden;
}
#lion{
position:relative;
width:100px;
height:50px;
top:20px;
padding:20px;
background-color: blue;
transition-duration: 2s;
}
#lion a {
color:black;
text-decoration: none;
}
#lion:hover{
transform: translateY(-70px);
transition-duration: 2s;
}
It seems that you missing the transition property in #lion unhover. Try to add transition-duration in #lion selector. Now with your code, when hover #lion transition is 2 seconds, but in unhover is not duration and is not transition. Good luck
I've been trying to make a navigation bar with small images which respond(by margin 10px from the top) when you hover over them. I applied the hover effects via a class Selector,
however when I hover over one image the rest of them respond as well. So, can I correct this with the class Selector?
Here's the html side.
<img class="menu" src="weight.png" />
<img class="menu" src="height.png" />
Here's the css:
.menu{
height:100px;
width:100px;
transition:all 0.3s ease-in; margin-left:15px;
margin-top:5px;
}
.menu:hover{
margin-top:15px;
transition:all 0.3 ease-in;
}
Thank you for your help.
The default vertical alignment for inline content is "baseline". This means that your images by default stick to the bottom of your a elements. To fix this, you simply need to set the vertical alignment on your img elements to "top":
.menu {
...
vertical-align: top;
}
JSFiddle demo.
I've got two divs, div 1, and underneath it is hidden div 2. When I hover over div 1, I want it to hide, and show div 2. Then, once I mouse off of the area (now div 2), div 1 is displayed again.
Here is the code:
<a href="javascript://" class="hoverable">
<div class="normal" style="background:#666;">Hover over me!</div>
<div class="hover" style="background:#888;">Now you see me!</div>
</a>
and here is the css:
<style>
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
}
.hoverable .hover {
display:none;
}
.hoverable:hover .normal {
display:none;
}
.hoverable:hover .hover {
display:block;
}
</style>
My only problem with this is that is is very quick, cut and dry, and not very "fancy". I'd like to add something simple like a fade effect.
I've gotten this working, without the fade effect, here:
http://jsfiddle.net/pBDGW/
If anyone knows how to make those two divs transition with a fade-out, please let me know!
You can use CSS transition with opacity like this:
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
position: relative;
display: block;
}
.hoverable .hover {
opacity:0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.hoverable .hover,
.hoverable .normal{
transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
}
.hoverable:hover .normal {
opacity:0;
}
.hoverable:hover .hover {
opacity:1;
}
You can see the jsfiddle here: http://jsfiddle.net/pBDGW/12/
Some explanation:
The transition applied to both div are the main code that make them fade in & out. You can read more about it here: http://css3.bradshawenterprises.com/transitions/
Since you want the first div to fade out, and the second div to fade in, there will be a moment when both div have to be visible partially, hence position: absolute and some positioning on the second div (to make it overlap with the first div).
You are wrapping an anchor (<a>) around both div, which is actually not encouraged, so I have to give it display: block; . A better approach (HTML-wise) is to wrap both div inside another div (still use the same class hoverable), and use 2 different anchors inside each div.
EDIT: this approach http://jsfiddle.net/pBDGW/14/ works too. Here you only fade out the first div, while the second div is always visible but is hidden under the first div when not hovering. It is shorter css, but I don't recommend this approach though because I sometimes have issues with getting the first div to go on top on different browsers.
You can use jQuery, it has functions fadeIn and fadeOut and also its easy to hide() and show() on events mouseOver and mouseLeave.
You can see fiddle here.
$(document).ready(function(){$(".hover").hide();
$(".normal").mouseover(function(){
$(".normal").fadeOut(0);
$(".hover").fadeIn(1000);
});
$(".hover").mouseout(function(){
$(".normal").fadeIn(1000);
$(".hover").fadeOut(0);
});});
You can use transitions:
ADD THIS TO YOUR :HOVER
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
This adds the effect of fade IN/OUT
Addition: this will only work if you have property set for :hover, for example if you want to change the color, or background or what ever..
I'm fairly new to web design and I've been working on a CSS way of creating a drop down menu which appears initially when a parent div is hovered. However once visible, I need the menu to stay up until the mouse is moved off the whole menu.
I've been able to make the menu appear and disappear, however it disappears too quickly - disappearing when I leave the parent div. Example below.
I've tried nesting within a third div which changes between display:block and display:none but no luck
Code
<div class="menuc">
<div class="menua"></div>
<div class="menub">
<p class="footertext">Home</p>
<p class="footertext">Home</p>
<p class="footertext">Home</p>
<p class="footertext">Home</p>
</div>
</div>
Css
.menua {
width:200px;
height:50px;
background-color:rgba(0, 0, 0, 0.50);
z-index:999;
}
.menua:hover ~ div.menub {
opacity:1;
z-index:999;
}
.menub {
width:200px;
height:600px;
background-color:rgba(0, 0, 0, 0.50);
opacity:0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-ms-transitiom: opacity .5s linear;
-o-transition: opacity .5s linear;
transition: opacity .5s linear;
z-index:999;
display:block;
}
.menuc {
display:none;
}
.menuc:hover {
display:block;
}
http://jsfiddle.net/qp3wu/
Apologies if this is a fairly amateur mistake (doh).
All answers and suggestions greatly appreciated
Just let .menub element stay when .menub itself is also hovered:
.menua:hover ~ .menub, .menub:hover {
opacity:1;
}
The comma is used the define a new selector. The above is the same as:
.menua:hover ~ .menub{
opacity:1;
}
.menub:hover {
opacity:1;
}
But shorter.
Ignore any event; hide the element, but still use opacity effect
Now to make sure the .menub does not react to any events(like hovering), you can just hide it:
.menua:hover ~ .menub, .menub:hover {
visibility: visible;
opacity:1;
}
and on hover show it again:
.menub {
visibility: hidden;
}
I use css visibility to keep the same effect as you would have with only opacity. It will still have the space of the element(unlike what display: none; does; collapsing the space).
Delete remaining space when not visible
To go even further and fix the remaining spacing, you can add height: 0; as default and when hovered set the height to your desired height(600px in this case).
Remove the gab inbetween menua and menub
If you want to get rid of the gab between menua and menub but still use the default margin, you can reset the top margin of the first <p> element:
.menub p:first-child
{
margin-top: 0;
}
jsFiddle
The text beneath the menu's is to show you that there will be no space when the element is not visible.
You need to make a few changes:
One wrap the menub with menua div to keep the hover effect:
<div class="menua">
<div class="menub">
<p class="footertext">Home</p>
<p class="footertext">Home</p>
<p class="footertext">Home</p>
</div>
</div>
Two position your menub inside menua i use absolute position. With this you avoid other elements to be moved by the submenu.
.menua {
position:relative;
}
.menub {
position:absolute;
top:100%;
left:0;
}
Three you can use opacity to give an effect but to hide and show you really need display property:
.menub {
display:none;
}
.menua:hover div.menub {
display:block;
}
An example http://jsfiddle.net/qp3wu/23/