Is there a way to get a hover effect like the effect on the Google Chrome website (http://www.google.de/intl/de/chrome/browser/) with CSS3 transition? My problem is, that the animation goes into the wrong direction:
HTML:
<ul>
<li>Nav#1</li>
<li>Nav#2</li>
<li>Nav#3</li>
</ul>
CSS:
ul{ list-style: none; }
ul li{
float: left;
padding: 25px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
ul li:hover{ border-bottom: 5px red solid; }
http://jsfiddle.net/HMZKP/
If you apply a padding to the bottom in it's normal state, then remove that padding when hovered you get the desired effect.
ul li {
float: left;
padding: 25px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
border-bottom: 0;
padding-bottom: 5px;
}
ul li:hover {
border-bottom: 5px red solid;
padding-bottom: 0;
}
See this jsfiddle: http://jsfiddle.net/xTjXK/ (Tested in Chrome, Firefox & Safari)
Related
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>
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>
I have the following CSS / HTML code:
CSS:
#buttons a {
margin: 0 30px;
display: inline-block;
position: relative;
padding: 9px 3px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
#buttons a span{
background: #242424;
font-size: 1.7em;
color: #fffae6;
border: 1px solid #fff;
outline: 4px solid #242424;
position: relative;
width: 100%;
height: 100%;
padding: 5px 40px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
HTML:
<a class="restaurant_book_button" href="/book"><span>Book Online</span></a>
How it renders in Safari:
How it renders in Chrome:
Any ideas what could be causing this?
Try box-sizing with -webkit prefix in span because you are using padding while your span width is 100%.
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.
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.