New course! Every coder should learn Generative AI!
Try a free lesson+ 2
Please help me in this code i want to add transition when i hover on menu it will smoothly came down.
28 Answers
+ 4
Sure, you have deleted the transition property definition, and you've changed only the 'sql' class (you must cjhange the others also):
body{
background: rgb(232,232,232);
}
* {
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
transition-duration:1s;
}
#container{
width: 380px;
background:white;
font-family: cursive;
padding-left: 8px;
}
.html{
display:inline-block;
padding: 5px;
border: 2px solid;
border-radius: 5px;
position:relative;
top:0;
}
.css{
display: inline-block;
padding: 5px;
border: 2px solid;
border-radius: 5px;
margin-left: 20px;
position:relative;
top:0;
}
.js{
display: inline-block;
padding: 5px;
border: 2px solid;
border-radius: 5px;
margin-left: 20px;
position:relative;
top:0;
}
.php{
display: inline-block;
padding: 5px;
border: 2px solid;
border-radius: 5px;
margin-left: 20px;
position:relative;
top:0;
}
.sql{
display: inline-block;
padding: 5px;
border: 2px solid;
border-radius: 5px;
margin-left: 20px;
position:relative;
top:0;
}
.html:hover {
background: rgb(61,232,61);
cursor: pointer;
top: 10px;
}
.css:hover {
background: rgb(61,232,61);
cursor: pointer;
top: 10px;
}
.js:hover {
background: rgb(61,232,61);
cursor: pointer;
top: 10px;
}
.php:hover {
background: rgb(61,232,61);
cursor: pointer;
top: 10px;
}
.sql:hover {
background: rgb(61,232,61);
cursor: pointer;
top: 10px;
}
+ 14
* {
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
transition-duration:1s;
}
add this CSS
+ 13
remove position:relative from :hover .....
+ 11
Yes.... (don't forget vendor prefixes.... -webkit- for mobiles e.t.c....)
+ 11
Can't be smoother when you're using pixels.... (cannot be divided thus transition is sharp...)
+ 11
(Looks smooth enough on my mobile.....)
+ 10
Somewhere in your CSS....
+ 5
You can even shorten you css code by better factorizing (and changing a little your html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Menu</title>
</head>
<body>
<div id="container">
<!-- one class name is enough, but you can have many, if you need (but in tis version, html, css, js, php and sql are no more used ) -->
<p class="html menu_item">HTML</p>
<p class="css menu_item">CSS</p>
<p class="js menu_item">JAVASCRIPT</p>
<p class="php menu_item">PHP</p>
<p class="sql menu_item">SQL</p>
</div>
</body>
</html>
body{
background: rgb(232,232,232);
}
#container{
width: 380px;
background:white;
font-family: cursive;
padding-left: 8px;
}
.menu_item {
display:inline-block;
padding: 5px;
border: 2px solid;
border-radius: 5px;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
transition-duration:1s;
position:relative;
top:0;
margin-left: 20px;
}
.menu_item:first-child{
margin-left:0;
}
.menu_item:hover {
background: rgb(61,232,61);
cursor: pointer;
top: 10px;
}
+ 4
check out this code, it has a "smooth" transition. I did this a while ago but pretty sure I had to use keyframes. Best of luck
https://code.sololearn.com/W6okD5AzVCeb/?ref=app
the side nav bar is the example for smoothness
+ 4
Cool. I will try that for my code.
+ 3
You need 2 things to fix your problem:
> move the 'position:relative;' from the :hover rules to the default rules of each of yours menu item (as 'position' is a not animatable css property)
> set to them also an explicit 'top:0;' to be able to (smoothly) animate this property, even if this is the default value ^^
+ 3
There are no option, you need to do both ^^
.css {
/* your rules */
position:relative;
top:0;
}
.css:hover {
/* your rules, in wich you can now delete the 'position:relative;', as it's defined previously */
}
... obviously, for each menu item :P
+ 3
No need for 'position' in the second (but could work):
.sql:hover {
top:10px;
}
But mainly, you need to let the other rules you want to style the targeted elements ;)
+ 3
Thanku So Much 👑@Visph👑Now Itss Work...
u are great.....😁👌👌👌
And also Thanku @ValentineHacker😄
+ 2
@Russel Reeder:
With my simple fix, the transtion is smooth, without using keyframes ;)
+ 1
where i add this..
+ 1
with * selector
+ 1
but it work on background-color not on the smootness
+ 1
so what is should do for smoothness of menu
+ 1
yess but not on desktop...
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help me plss
4 Votes
Android studio emulator
1 Votes
Wrong?
0 Votes
Internal vs external JS
2 Votes
Can anyone guide me
0 Votes
Putting files in another folder
1 Votes