I'm experiencing a firefox specific bug with a simple menu I've built
It's a ul-list that has an on-hover effect for the list items, the list items have transform:translateX(12px) applied on hover, and the text links have a negative indent applied at all times, the combination of the two create a Firefox specific bug where part of the text disappears on hover during its animation, looks like its basically being hidden by its own padding because of the negative value.
Here is a JS Fiddle as well as the code, am I missing -moz- css?
https://jsfiddle.net/CultureInspired/9435v0vy/1/
<ul class="menu_desktop">
<li>Home</li>
<li>About</li>
<li>Press</li>
<li>Contact</li>
</ul>
CSS:
.menu_desktop {
list-style-type: none;
margin: 80px;
padding: 0;
}
.menu_desktop li {
background: #fff;
margin-bottom: 10px;
text-indent: -.8em;
text-transform: uppercase;
letter-spacing: 6px;
display: table;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.menu_desktop li:hover {
transform: translateX(12px);
}
.menu_desktop a {
color: #000;
height: 100%;
padding: 8px;
display: block;
text-decoration:none;
}
I've got the same issue with firefox 49.0.2, it seems like a bug.
You can solve this by using margin-left: 12px; instead of the transform you are currently using.
Here is the fix (works in firefox, chrome & ie):
body {
background: lightgray;
}
.menu_desktop {
list-style-type: none;
margin: 80px;
padding: 0;
}
.menu_desktop li {
background: #fff;
margin-bottom: 10px;
text-indent: -.8em;
text-transform: uppercase;
letter-spacing: 6px;
display: table;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.menu_desktop li:hover {
margin-left: 12px;
}
.menu_desktop a {
color: #000;
height: 100%;
padding: 8px;
display: block;
text-decoration:none;
}
<ul class="menu_desktop">
<li>Home</li>
<li>About</li>
<li>Press</li>
<li>Contact</li>
</ul>
Related
I have 2 examples below which display 4 links and hovering upon them display border bottom with ease effect.
In the Example 1 the border-bottom display from top-bottom. I have tried revering with the padding property which is there in Example 2, Its not consistent across the browsers and it does not works properly.
Example 1: transition default functionality (transition from top-bottom)
<!DOCTYPE html><html class=''>
<head>
<style class="cp-pen-styles">
body {
padding: 50px;
}
a, a:hover {
text-decoration: none;
}
li {
position: relative;
padding-bottom: 3px;
margin-right: 10px;
display: inline;
}
li a {
border-bottom: 0em solid transperant;
color: #777;
}
li:focus > a,
li:hover > a,
li:active > a {
border-bottom: 0.313em solid #206E9F;
transition: border-bottom .2s ease-in-out;
-webkit-transition: border-bottom .2s ease-in-out;
-moz-transition: border-bottom .2s ease-in-out;
-ms-transition: border-bottom .2s ease-in-out;
}
|
</style>
</head>
<body>
<ul>
<li>HOME</li>
<li>PAGE</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</body>
</html>
Example 2: transition from bottom-top (using padding - Compatibility issue with IE browser)
<!DOCTYPE html><html class=''>
<head>
<style class="cp-pen-styles">
body {
padding: 50px;
}
a, a:hover {
text-decoration: none;
}
li {
position: relative;
padding-bottom: 3px;
margin-right: 10px;
display: inline;
}
li a {
color: #777;
padding-bottom:0.4em;
border-bottom: 0em solid transperant;
}
li:focus > a,
li:hover > a,
li:active > a {
padding-bottom:0em;
border-bottom: 0.313em solid #206E9F;
transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
}
</style></head><body>
<ul>
<li>HOME</li>
<li>PAGE</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</body></html>
How to make CSS3 transition working for border-bottom property which starts from bottom to top.
You can simulate your desired outcome by using :after or :before pseudo elements. This way you'll have much greater control over the desired effect (like adding various transforms).
body {
padding: 50px;
}
a {
text-decoration: none;
}
li {
display: inline;
margin-right: 10px;
}
li a {
border-bottom: 0 solid transparent;
color: #777;
display: inline-block;
padding-bottom: 3px;
position: relative;
}
li a > .fancy-line {
background-color: transparent;
content: "";
display: block;
height: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
-o-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
}
li a:hover > .fancy-line {
background-color: #206E9F;
height: 3px;
}
<ul>
<li>HOME <span class="fancy-line"></span></li>
<li>PAGE <span class="fancy-line"></span></li>
<li>ABOUT US <span class="fancy-line"></span></li>
<li>CONTACT US <span class="fancy-line"></span></li>
</ul>
You can do this with a pseudo-element and a transform rather than a border.
body {
padding: 50px;
}
a,
a:hover {
text-decoration: none;
}
li {
position: relative;
padding-bottom: 3px;
margin-right: 10px;
display: inline;
}
li a {
border-bottom: 0em solid transperant;
color: #777;
position: relative;
}
li > a::after,
li > a::after,
li > a::after {
content: '';
position: absolute;
width: 100%;
height: .313em;
background: #206E9F;
top: 100%;
left: 0;
transform-origin: center bottom;
transform: scaleY(0);
transition: transform .2s ease-in-out;
}
li:focus > a::after,
li:hover > a::after,
li:active > a::after {
transform: scaleY(1);
}
<ul>
<li>HOME
</li>
<li>PAGE
</li>
<li>ABOUT US
</li>
<li>CONTACT US
</li>
</ul>
I've got two problems with my CSS drop-down menu: JSFiddle
1) Transitions: Would like the menu to slide-down when the mouse switches to it to open it. The previously opened menu should slide-up to close.
#nav ul li ul
{
-webkit-transition:height .5s ease-in;
-moz-transition:height .5s ease-in;
-o-transition:height .5s ease-in;
-ms-transition:height .5s ease-in;
transition:height .5s ease-in;
}
This doesn't seem to work; possibly under the wrong "ul li" selector, though I tried others.
2) Bring the parent item ("Menu1", "Menu2") on top of the menu item list so that it covers the top border of the first child. That is, there should be no border between "Menu1" and "Item1" since "Menu1" doesn't have a bottom border, but looks like it does since "Item1" is on top of it.
Tried playing with z-index, but can't get it working. Neither the transitions.
I realize the menu is a bit convoluted and probably has more CSS than necessary.
What about it? JSFiddle
#nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav ul li {
display: inline-block;
border: 1px solid #FFF;
border-bottom: 0;
border-radius: 5px;
margin: 0 15px;
position: relative;
-webkit-transition: border-color 0.2s ease-in;
-moz-transition: border-color 0.2s ease-in;
-o-transition: border-color 0.2s ease-in;
-ms-transition: border-color 0.2s ease-in;
transition: border-color 0.2s ease-in;
}
#nav ul li a {
color: #8799B3;
display: block;
padding: 10px 6px;
border: 0;
-webkit-transition: color 0.2s ease-in;
-moz-transition: color 0.2s ease-in;
-o-transition: color 0.2s ease-in;
-ms-transition: color 0.2s ease-in;
transition: color 0.2s ease-in;
}
#nav ul li:hover {
color: #415161;
border-color: #E9E9E9;
}
#nav ul li a:hover {
color: #415161;
}
#nav ul li ul {
opacity: 0;
visibility: hidden;
text-decoration: none;
line-height: 1;
color: #8799B3;
background: #FFF;
position: absolute;
top: calc(100% - 5px);
left: -1px;
z-index: 1000;
width: 165px;
border: 0;
}
#nav ul li:hover ul {
opacity: 1;
visibility: visible;
}
#nav ul li ul li {
border: 0;
display: block;
font-size: 14px;
margin: 0;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
#nav ul li ul li:hover {
border: none;
color: #415161;
background: #F7F9FB;
}
#nav ul li ul li a {
padding: 10px;
border: none;
color: #8799B3;
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
}
#nav ul li ul li:first-child a {
border-top: 1px solid #E9E9E9;
border-radius: 0 5px 0 0;
}
#nav ul li ul li:last-child a {
border-bottom: 1px solid #E9E9E9;
border-radius: 0 0 5px 5px;
}
#nav ul li ul {
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
}
<div id="nav">
<ul>
<li>
Menu1
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</li>
<li>
Menu2
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</li>
<li>
Menu3
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</li>
</ul>
</div>
Good Day, I'm trying to create a slidedown menu using some JS and CSS but it's not working. Here's the fiddle link:
ul.show-child{
height: auto;
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in 2s none;
-o-transition: ease-in 2s none;
transition: ease-in 2s none;
}
https://jsfiddle.net/gkrja9jy/
What I want to do, is to add some cool animation when I show the hidden div. By the way, I just copied the transition effect from this site
There is a pure CSS solution. I corrected your example. Make sure that you write correct HTML code. Here is the new code and a fiddle:
HTML code:
<ul class="custom-sidebar">
<li>
Accountancy
</li>
<li>
Grade School
<ul>
<li>Goals and Objectives</li>
<li>Clubs and Orgs</li>
<li>Photo Gallery</li>
<li>Summer Tutorial</li>
</ul>
</li>
</ul>
CSS code:
li ul {
display: block;
height: 0px;
overflow: hidden;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
li:hover ul {
height: 100px;
display: block;
}
.custom-sidebar a,.custom-sidebar a:visited {
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: -23px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li {
list-style: outside none none;
padding-left: 17px;
}
.custom-sidebar li a {
background-color: #ebecec;
border-left: 6px solid #116b9e;
padding-top: 2px;
margin-bottom: 8px;
}
https://jsfiddle.net/u6yrL0a0/2/
It is usually best to avoid JavaScript if it is not needed.
yo can use jquery to create the animation like this:
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq('.menu-div').hover(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideDown(1000);
}
});
});
jq(document).ready(function(){
jq('.menu-div').mouseleave(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideUp(1000);
}
});
});
and the css will be like this :
ul.hide-child{
display: none;
overflow: hidden;
}
ul li ul{
-webkit-transition: all 1s;
-moz-transition: all 1s ;
transition: all 1s;
display:none;
height:auto;
}
.custom-sidebar .post-link,.post-link:visited{
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: 0px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li{
background-color: #ebecec;
border-left: 6px solid #116b9e;
list-style: outside none none;
margin-bottom: 0px;
padding-left: 17px;
padding-top: 2px;
}
https://jsfiddle.net/gkrja9jy/5/
In Chrome and Safari, the text in this code (http://codepen.io/igdaloff/pen/cgCFt) wiggles subtly when hovered. I'd like the text to remain stable throughout the transition.
I've tried several alternative methods to accomplish this same effect (explained in this post), but the wiggle remains.
I need the text to remain vertically centered and the content to be completely fluid (percentages only). As long as those requirements are true, I'm open to any solutions. I'm using the most recent browser versions.
Thanks in advance.
HTML
<div class="work-home">
<ul>
<li>
<a href="">
<img src="..." />
<h4>Goats</h4>
</a>
</li>
</ul>
</div>
CSS
.work-home {
text-align: center;
}
.work-home li {
display: inline-block;
position: relative;
margin: 0 0 2em;
width: 100%;
}
.work-home li:hover a:before {
opacity: 1;
top: 5%;
left: 5%;
right: 5%;
bottom:5%;
}
.work-home li:hover h4 {
opacity:1;
}
.work-home img {
width: 100%;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.work-home a:before {
content:"";
display:block;
opacity: 0;
position: absolute;
margin: 0;
top:0;
right:0;
left:0;
bottom:0;
background-color: rgba(0, 160, 227, 0.88);
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}
.work-home h4 {
display: block;
padding: 0;
margin:0;
font-family: helvetica, sans-serif;
font-size: 4em;
color: #ffffff;
position:absolute;
top:50%;
margin-top:-.8em;
text-align:center;
width:100%;
z-index:1;
opacity:0;
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
transition: all linear .3s;
}
Im having a problem inside of Chrome only, tested this inside of Opera, FF, Safari and it all works fine.
I know there was a bug with Chrome 17 with transitions on visited links so I even included that thought to be fix
There is still not animation for the transition on hover for border-bottom.
any clues? am I just not seeing something? I've read around and it all seems to be talking about the color of the text, while i'm trying to transition in the border-color.
I tried to animate in border-bottom from none to 1px solid #9ecd41 but found that in all browsers except firefox had a funky jagged animation where it kinda bounced.
any help would be awesome, attached is the code i'm working with.
Ok here is my html
<nav>
<ul class="nav">
<li>ABOUT</li>
<li>SERVICES</li>
<li>MEDIA</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
And here is my CSS
nav {
float: right;
height: auto;
width: auto;
padding: 25px;
}
ul.nav {
width: auto;
height: auto;
overflow: visible;
}
.nav > li {
display: inline-block;
margin-right: 20px;
}
.nav > li:last-child {
margin-right: 5px;
}
/* non-visited links: Chrome transition bug fix */
.nav > li > a:visited {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
/* visited links: Chrome transition bug fix */
.nav > li > a {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
.nav > li > a:hover {
border-bottom: 1px solid #9ecd41;
}
.nav > li > a:active {
border-bottom: 1px solid #f96d10;
}
Just styled the <li> the way I would of styled the li with widths/heights/padding/border etc and then just styled the link to fill the li and just styled the links colour and font properties. Chrome has small bug on border-bottom for link transitions
This aught to be an easy fix.
As far as I can see your problem lies by where you put the transition in.
With chrome it needs to be added to the at most parent.
Try adding it here:
.nav > li {
display: inline-block;
margin-right: 20px;
}
Also add the declaration for the -webkit- elements
for ex.
.nav > li {
display: inline-block;
margin-right: 20px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transition-timing-function: ease-in;
}
See if this works and if not I'll try to build something similar and work on a solution.
I had this problem with Bootstrap 4 navbar component. My menu links had border-bottom and starting from the second one, all were invisible during menu opening on mobile.
Fixed it with transform: rotate(0); on the element with the border-bottom.