So, I am working on my ecommerce with opencart and I wanted to make the dropdown menu to show with an animation, a simple one.
The problem is that I apply the transition, but it doesn't work.
The code part is this one
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
I am usign version 2.2
As .dropdown-menu has display:none style in bootstrap, you can't animate it with pure css without overriding, you can animate it this way:
.navbar-nav > li > .dropdown-menu {
display: block; /* Override the bootstrap display: none */
height: 0;
opacity: 0;
overflow: hidden;
transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
visibility: hidden;
}
#menu .dropdown:hover .dropdown-menu {
height: auto;
opacity: 1;
visibility: visible;
}
Another example:
.navbar-nav > li > .dropdown-menu {
display: block; /* Override the bootstrap display: none */
height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
visibility: hidden;
top: 200%;
}
#menu .dropdown:hover .dropdown-menu {
height: auto;
opacity: 1;
visibility: visible;
top: 100%;
}
note: don't edit bootstrap files, add above code at the end of your theme's stylesheet: stylesheet.css
Related
I was practicing css on an example i found. I tried to show the submenu above the nav with transition effects. I can change the position of the submenu on hover :
nav li:hover .menu-sub {
display: block;
transform: translateY(-100%);
}
I also modified the code to add a transition effect:
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
display: none;
color: #fff;
padding: 2em;
-webkit-transition: -webkit-transform 1.5s ease;
-moz-transition: -moz-transform 1.5s ease;
-o-transition: -o-transform 1.5s ease;
transition: transform 1.5s ease;
}
The position changed but I don't see any transition effect at all. What am i doing wrong ?
Please modify the transition to shown below, it was written wrong.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
opacity:0;
overflow:hidden;
box-sizing:border-box;
height:0px;
color: #fff;
-webkit-transition: opacity 1.5s ease-out;
-moz-transition: opacity 1.5s ease-out;
-o-transition: opacity 1.5s ease-out;
transition: opacity 1.5s ease-out;
}
Transition does not work with display, instead use the below effect.
Codepen Demo
Where we can toggle the height from 0px to auto(full height) and opacity from 0(invisible) to 1(visible). You can see that we only see the animation on opacity, this will produce the best effect.
Use visibility:hidden then visible
display: none disables it in the active DOM and such elements with this CSS can't be selected for stuffs like animations.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
visibility: hidden;
color: #fff;
padding: 2em;
transition: transform 1.5s ease;
}
nav li:hover .menu-sub {
visibility: visible;
transform: translateY(-100%);
}
I am trying to figure out why the fade in and out of a dialog box in this code is not working properly.
What I'm trying to do is having a fade in and out on click. But I am trying to do this fade in/out with CSS only though.
When i remove manually the class "active" in the console the effect works, but not when I actually click on the link (to open the dialog box).
This is my code
CSS:
.modal {
display: block;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
-webkit-overflow-scrolling: touch;
outline: 0;
background-image: url('pixel.png');
opacity: 1;
}
.modal-dialog {
max-width: 600px;
background-color: white;
z-index: 99;
min-height: 200px;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.modal-dialog .active {
opacity: 1;
background-color: #ffffff;
border: 1px solid #999;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
My JS (just in case):
$('body').on('click', '[data-modal]', function (e) {
e.preventDefault();
$('body').addClass('modal-open');
$('body').append("<div class='modal'></div>").addClass('active');
$('.modal').append("<div class='modal-dialog'></div>")
$('.modal-dialog').html("<div class='modal-inner generic-content'></div>").addClass('active');
Transition needs numeric value in order to set steps in between 2 rules statement.
You should use : opacity instead display:
http://jsfiddle.net/bJz7R/1/
$('a.click-me').click(function(){
$('#open').css('opacity','1');
});
and replace in CSS:
display:none;
by
opacity:0;
I have alot of CSS and its throwing me off. I need an image to become less opaque when I hover on it and a child element, but the child element slides in when the image is hovered on. I got half of it to work, but the image returns to full opacity when the child element is hovered on. I can't get the selector right. Here is whats working now http://www.fuzionvideos.com/#video_recent
Here is the code:
<ul><li id="vid_link" class="box 1"><img src="http://www.fuzionvideos.com/images/uploads/SF_BoT.jpg" alt="Belt - Truth"> <span class="caption description">Armor of the Lord: Belt of Truth</span><b class="title_line">Belt - Truth</b></li></ul>
and the CSS:
#vid_display .box {
cursor: pointer;
height: 199px;
overflow: hidden;
width: 300px;
float: left;
position: relative;
}
#vid_display .box img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
position: absolute;
left: 0;
}
#vid_display .box .caption {
position: absolute;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#vid_display .box .description {
height: 90px;
width: 300px;
display: block;
bottom: -140px;
line-height: 25pt;
text-align: left;
padding-left: 8px;
line-height:normal;
}
#vid_display .box:hover .description {
-moz-transform: translateY(-150%);
-o-transform: translateY(-150%);
-webkit-transform: translateY(-150%);
transform: translateY(-150%);
}
#vid_display ul {
padding-left: 0px;
}
#vid_display li{
display: inline;
margin-right: 18px;
}
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#vid_display a :hover {
color: #ed1c24;
}
.title_line {
background-color:#ebebeb;
position: absolute;
height: 25px;
width: 300px;
top: 169px;
left: 0;
z-index: 101;
padding-top: 8px;
}
and on jsfiddle : http://jsfiddle.net/blalan05/FkV2z/
You're applying opacity to the hovered image. So, when you hover on anchor, the image is no longer hovered. Try applying the :hover for the .box, so when you will hover on the anchor (which is a child of .box) the .box will be still considered as hovered.
Change this:
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
to this:
#vid_display .box:hover img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
I am trying to make a list of social buttons. When one button is hovered it lights up, and the other buttons should darken.
I got it to work partially. When the first button is hovered all works fine, but it is malfunctioning when the other buttons are hovered. I think this happens because all the latter list items are siblings of the first and the :hover event can't cause previous elements to change style.
Does anyone have any thoughts on how to get this to work?
Here's the code (jsFiddle live demo):
<div id="bg">
<ul id="social_buttons">
<li id="item_1"><img src="http://i43.tinypic.com/104rasi.png"></li>
<li id="item_2"><img src="http://i43.tinypic.com/k4tide.png"></li>
<li id="item_3"><img src="http://i44.tinypic.com/2ry0gt3.png"></li>
</ul>
</div>
#bg {
height: 100px;
width: 215px;
background-color: black;
position: relative;
}
#social_buttons img {
width: 24px;
height: 24px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#social_buttons {
list-style-type: none;
position: absolute;
top: 20px;
right: 70px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#social_buttons li {
float: left;
margin-right: 2px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
/* puur css3 multiple hover animaties */
#item_1 {
opacity: 0.8;
}
#item_1:hover ~ #item_2, :hover ~ #item_3 {
opacity: 0.5;
}
#item_1:hover {
opacity: 0.9;
}
#item_2 {
opacity: 0.8;
}
#item_2:hover ~ #item_1, :hover ~ #item_3 {
opacity: 0.5;
}
#item_2:hover {
opacity: 0.9;
}
#item_3 {
opacity: 0.8;
}
#item_3:hover ~ #item_1, :hover ~ #item_2 {
opacity: 0.5;
}
#item_3:hover {
opacity: 0.9;
}
Something like this?
#social_buttons:hover li {
opacity: 0.5;
}
#social_buttons li:hover {
opacity: 0.9;
}
General sibling selector (~) can't select preceding element, it works only in one direction.
This is actually pretty easy with the right selectors
jsFiddle
ul li {
opacity: 0.8;
}
ul:hover li {
opacity: 0.5;
}
ul li:hover {
opacity: 1.0;
}
http://jsfiddle.net/VnMFP/4/
#social_buttons li {
opacity: 0.8;
}
#social_buttons:hover li {
opacity: 0.5;
}
#social_buttons li:hover {
opacity: 0.9
}
Don't select the li:hover, select ul#social_buttons:hover li. Then it works.
I am trying to get my CSS transitions down smoothly, but I'm having one last issue. It's pretty superficial I'll admit, but I'd like to get it "fixed" if at all possible. I've tried it in Chrome, Firefox, and IE and it does this in all browsers.
The UL and LI elements that I'm manipulating are part of a navigation toolbar. The toolbar can be seen in the top left corner of the following URL:
http://fretfast.com/templates/clean/sample.php
When you hover over one of the elements that has an expandable list, such as learn, teach, or community, you will see that it expands very smoothly (assuming your browser supports CSS3 transitions, of course); however, when you move your mouse away from the expandable list, the marginal area at the top of the list gets eradicated immediately which makes all the subsequent text shift up too quickly.
For instance, if you hover over learn, an expandable menu will be presented that gives the options of lessons, questions, and tips. However, when you move your mouse out and the menu collapses, the first option (lessons) is instantly pushed up so that it is right below the button's main text (learn).
Here is the CSS that I am using for the navigation bar, but for the life of me I cannot figure out why the height transition only works in one direction.
#topNav {
list-style-type: none; height: 25px; padding: 0; margin: 0;
}
#topNav * { font-size: 15px; }
#topNav li {
float: left; position: relative; z-index: 1;
padding: 0; line-height: 23px; background: none; repeat-x 0 0;
padding-top: 2px;
}
#topNav li:hover {
background-color: #C0C0C0; z-index: 2;
padding-top: 0;
border-top: 2px solid #59B4FF;
}
#topNav li a {
display: block; padding: 0 15px; color: #000; text-decoration: none;
}
#topNav li a:hover { color: #222222; }
#topNav li ul {
opacity: 0; position: absolute; left: 0; width: 8em; background: #C0C0C0;
list-style-type: none; padding: 0; margin: 0;
}
#topNav li:hover ul { opacity: 1; }
#topNav li ul li {
float: none; position: static; height: 0; line-height: 0; background: none;
}
#topNav li:hover ul li {
height: 25px; line-height: 25px;
}
#topNav li ul li a { background: #C0C0C0; }
#topNav li ul li a:hover {
text-indent: 0.3em;
background-color: #59B4FF;
}
#topNav li {
transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-webkit-transition: background-color 0.2s ease;
}
#topNav li a {
transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
#topNav li ul {
transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
#topNav li ul li {
transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
}
#topNav li ul li a {
transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: text-indent 0.1s linear;
-o-transition: text-indent 0.1s linear;
-moz-transition: text-indent 0.1s linear;
-webkit-transition: text-indent 0.1s linear;
}
I don't believe it has anything to do with the padding-top specification in #topNav li either, because I just added that today for the border highlighting effect and this problem has been going on for longer than that. Any help is greatly appreciated.
The property that is causing that is a line-height; more specifically this one.
#topNav li:hover ul li {
height: 25px;
line-height: 25px;
}
if you look at the transitions, it's specified only on height. You can change the transition to all, it seems to display ok. If not, probably the best would be to set the line-height at 25px in the non-hovered properties instead of on the hovered (that is, making it fixed)
#topNav li ul li {
transition: all 0.5s ease;
}
How can you debug easily issues related to hover ??
In the Chrome inspector, select the item where the hover is defined, go to the styles tab, choose toggle element state and check hover. Now the state is set to hover permanently. Just go around checking and un-checking pro`perties to see where do you have the problem.