I have some <li> tags in an <ul>. On hover, <a> tags in <li> change their background; and I added transition property in li a style in CSS to give some sort of animation effect.
I also want to change their font size along the window width so I added some media query with #media all and .... The problem is that the transition delay is applied to font size changes.
Here are my codes.
HTML(paste any place in <body>):
<ul>
<li>Home</li>
<li>Sites</li>
<li>Events</li>
<li>Support</li>
</ul>
CSS:
li a{
padding: .4em 1em;
text-decoration: none;
color: #000;
transition: .4s;
}
li a:hover{
background-color: #ddd;
}
//...
#media all and (min-width:1px){
ul{font-size: .8em;}
}
#media all and (min-width:480px){
ul{font-size: 1.2em;}
}
I tried in two ways:
1) writing transition: .4s in li a:hover{...}. In this case the font size changes immediately but transition does not work when cursor leaves the list element.
2) writing transition: 0 in ul {...} in media query. This makes no changes.
What do I have to do in this case?
Edited: I'm sorry but I cannot upload the full code because the codes are fragmented to all components in an Angular2 project. Hope these codes are enough.
You need to specify which properties the transition should use
transition: background-color 1s;
Stack snippet
li a{
padding: .4em 1em;
text-decoration: none;
color: #000;
transition: background-color 1s;
}
li a:hover{
background-color: #ddd;
}
#media all and (min-width:1px){
ul{font-size: .8em;}
}
#media all and (min-width:480px){
ul{font-size: 1.2em;}
}
<ul>
<li>Home</li>
<li>Sites</li>
<li>Events</li>
<li>Support</li>
</ul>
Related
Just trying to imitate an effect you can find here: (https://www.gaastrastore.com/en-de/men):
(top menu, mouse over on the list items, entry moves to the right and gets two arrows in the front)
I'm trying to get those two arrows working. I got the move to the right working. The arrows I tried to get going using transition and font-size from 0px to 10px. Any ideas? I'd like to stick with CSS if possible.
Cheers
Instead of using font-size to increase from font-size 0px to 10px, you can use margin-left to hide and show span tag on which you are adding that transition as below,
ul {
padding: 0;
margin: 40px;
overflow: hidden;
}
ul > li {
list-style-type: none;
}
ul > li > span {
margin-left: -10px;
transition: 0.5s ease;
}
ul > li:hover > span {
margin-left: 0px;
}
<ul>
<li><span>></span> Home</li>
<li><span>></span> About</li>
<li><span>></span> Contact</li>
</ul>
So I've always animated with JavaScript but I wanted to try doing simpler animations with CSS. I have followed the guide on w3schools exactly but I can't seem to get any results.
nav ul li {
display: inline;
}
nav ul li a {
margin: 0em 2em;
text-decoration: none;
color: #000;
}
nav ul li a:hover {
animation: borderGrow 2s;
-webkit-animation: borderGrow 2s;
}
#keyframes borderGrow {
from { border-bottom: 0em solid #000; }
to { border-bottom: 1em solid #000; }
}
#-webkit-keyframes borderGrow {
from { border-bottom: 0em solid #000; }
to { border-bottom: 1em solid #000; }
}
<nav>
<ul>
<li><a href="#">Link One</li>
<li><a href="#">Link One</li>
<li><a href="#">Link One</li>
</ul>
</nav>
For some reason, the animation doesn't seem to work when the border property is not set on the original element itself (before the animation). Adding the border property to the original element does seem to solve it.
Based on MDN's list of animatable properties, it seems like while the border-color and border-width are animatable, the border-style is not and this could possibly be the reason why we are having to add it in the original element. However adding just border-style: solid by default produces a border in almost all browsers (if not all) and so it is better to specify the border-width: 0 also along with it.
Note:
Behavior seems to be consistent in IE10, IE11 and Firefox. So it is more likely to be the expected behavior and not a bug.
I will update the answer with further details if and when I manage to find a clear and specific source explaining the reason for the behavior.
nav ul li {
display: inline;
}
nav ul li a {
margin: 0em 2em;
text-decoration: none;
color: #000;
border-bottom: 0em solid #000;
}
nav ul li a:hover {
-webkit-animation: borderGrow 2s;
animation: borderGrow 2s;
}
#-webkit-keyframes borderGrow {
from {
border-bottom: 0em solid #000;
}
to {
border-bottom: 1em solid #000;
}
}
#keyframes borderGrow {
from {
border-bottom: 0em solid #000;
}
to {
border-bottom: 1em solid #000;
}
}
<nav>
<ul>
<li>Link One
</li>
<li>Link One
</li>
<li>Link One
</li>
</ul>
</nav>
Alternately this same effect can be achieved by just using transition instead of animation also. And for transition the need to set a border on the element before hover seems to be completely optional. Below is a sample snippet.
nav ul li {
display: inline;
}
nav ul li a {
margin: 0em 2em;
text-decoration: none;
color: #000;
border-bottom: 0em solid #000; /*optional for transition */
-webkit-transition: border-bottom 1s;
transition: border-bottom 1s;
}
nav ul li a:hover {
border-bottom: 1em solid #000;
}
<nav>
<ul>
<li>Link One
</li>
<li>Link One
</li>
<li>Link One
</li>
</ul>
</nav>
Problem 1.
You didn't complete ... tag in html. Below this right code is....
<nav>
<ul>
<li>Link One</li>
<li>Link One</li>
<li>Link One</li>
</ul>
</nav>
Problem 2.
You didn't add the primary border value for a tag. just add this css below to nav ul li a.
border-bottom:0em solid #000;
Check out my answer on jsfiddle
Right now I have the same problem on Safari/Webkit Browser. The border property does not work when I use this on css animation keyframes. You have to set/declare first the border property on the css file in order to work.
Example:
div.menu-menu-1-container ul li a, div.menu-menu-1-container ul.navbar-nav li.open ul.dropdown-menu li a,
.search-box .dropdown a i, .button-search
{
border: 10px groove #ffd700; /* do not forget to declare the border property and value or it will not work; */
animation: HHootteeLL 4s linear infinite;
-webkit-animation: HHootteeLL 4s linear infinite;
-moz-animation: HHootteeLL 4s linear infinite;
-ms-animation: HHootteeLL 4s linear infinite;
-o-animation: HHootteeLL 4s linear infinite;
}
I am trying to sort out my navigation div. I am having a whole variety of problems and I have been trying to sort them out for hours. I am a rookie programmer so please forgive me.
First here is a snap of my css
#navigation {
background: rgba(109, 183, 229, 1);
display: block;
position: static;
height: 40px;
width: 96%;
padding: 1% 2% 0% 2%;
clear: both;
border-style: solid;
border-color: #31679a;
border: 0% 0% 1% 0%;}
The border isn't behaving, because it is displaying it all the way around even though I clearly specify 0% for 3 sides. (SOLVED: changed to border-width, and changed % to px as border doesn't allow %)
Next I can't seem to center it perfectly in the middle. I've tried all sorts of things, but I can't seem to get it to function properly. (SOLVED: Magesh and Adam both provided good solutions to this problem, however Adam's achieved my desired results much easier)
I can't seem to get it to not be squeezed when resizing the window. This used to work, but after a couple of changes, it has stopped. I want it to disappear when the width is too small.
I feel like this will be a silly question, and the answer will be a small % here and there I have overlooked. But it is becoming very frustrating. (You may also notice the main body is overflowing over the border I've put at the bottom - no idea why). I will be extremely greatful for any help here.
EDIT: Sorry, I forgot to add. View it here: www.dweeman.com/eb/sitetemplate.html
EDIT: I've created this fiddle for you
NOTE: This answer is for your centering problem
HTML:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
</ul>
CSS
ul{
display:table;
width:100%; /*This ensures that the element covers the entire width*/
text-align:center; /*To center the text*/
list-style:none; /*Remove the bullets*/
margin:0; /*Remove margins*/
padding:0; /*Remove extra padding*/
}
ul li{
display:table-cell;
}
See here for example -> Click here
Warning : This is just for example, you could style this better.
Direct Solution: Replace this code with the code on your website,It'll work perfectly :)
#ddmenu {
display: table;
width: 100%;
text-align: center;
background: #31679a transparent;
border-radius: 0.125em;
cursor: pointer;
color: #8aa8bd;
}
#ddmenu li{
display: table-cell;
font-size: 1.20em;
text-shadow: 1px 1px 0 #fff;
border-right: 0px solid #dae0e5;
}
#ddmenu li a {
display: block;
padding: 0 0.750em;
line-height: 1.40em;
font-weight: bold;
text-decoration: none;
color: #31679a;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
If you remove the width:100% from the #ddmenu and then put a text-align:center on #navigation that should centre the menu.
To make it stop scaling down at a certain width you can use a min-width
#navigation {
min-width:700px;
}
To make it completely disappear at a certain width you can use a media query in your css. Insert it at the end of your main css.
#media only screen and (max-width: 700px){
#navigation {
display:none;
}
}
I have a menu list as below:
<div id="menubar">
<ul class="menulist">
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
What I'm trying to do is that initially, the font-color for the menu items is dark grey. But when user hovers over any menu item, that particular item remains dark grey but rest of the items turn light-grey.
I have following CSS.
#menubar a {
color: #202021;
display: block;
padding: 6px;
text-decoration: none;
}
#menubar a:hover {
display: block;
padding: 6px;
background-color: #97979B;
border-radius: 3px;
font-weight: bold;
}
#menubar .menulist:hover {
color: #747478;
}
But color given in .menulist:hover is not applied to menu items other than hovered item, while properties other than color is applied to rest of the menu items when I hover on any menu item. I followed this SO question which had somewhat similar requirement.
How can I get this behavior with pure CSS?
Change your two selectors as follows:
#menubar .menulist:hover a {
color: #747478;
}
#menubar .menulist:hover a:hover {
display: block;
padding: 6px;
background-color: #97979B;
border-radius: 3px;
font-weight: bold;
}
DEMO
A quick word on the second selector #menubar .menulist:hover a:hover:
Normally, this is only necessary to apply your css because you don't change the color of the anchor when a:hover:
#menubar .menulist:hover a {
color: #747478;
}
#menubar a:hover {
...
/* no color change here */
}
If you decide to change the color of the anchor that is hovered though, it will not be applied because the selector #menubar .menulist:hover a has a higher specificity than #menubar a:hover
Example
Making the second selector #menubar .menulist:hover a:hover ensures it has a higher specificity than #menubar .menulist:hover a and rules overrides correctly
Example
Further reading:
CSS Specificity And Inheritance
CSS Specificity: Things You Should Know
The CSS code:
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left, border-right;
-webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
}
.css3_nudge ul li a:hover {
background-color: #efefef;
color: #333;
padding-left: 50px;
border-right: 1px solid red;
}
The HTML code:
<div class="css3_nudge nudge">
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Register</li>
<li>Contact</li>
</ul>
</div>
The transition is working fine for all elements but border, it just appears at the end of 400ms, there is no effect on border.
What I'm trying to achieve is a effect like the new google gmail buttons.
Thanks in advance for any help
This is a pretty simple fix. You just need a border to already exist before the hover effect. So just set the border-right: 1px solid #fff; like below:
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left, border-right;
-webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
border-right: 1px solid #fff; /* added property */
}
Then the transition is effectively just changing the colour of the border instead of creating a border.