Why does the animation cease to be smooth if you specify % in the pull-down menu? [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
Percentage Height HTML 5/CSS
6 answers
I'm trying to make a sliding menu
CSS
.menu li ul
position: static;
background:#6b522e;
max-width: 200px;
display: block;
overflow: hidden;
.menu ul li
background:#e32929;
height: 0px;
transition:0.5s;
.menu :hover > ul > li
background:#e32929;
height: 100%;
transition:0.5s;
HTML
<nav role="navigation" class="navigation site-navigation secondary-navigation">
<div class="menu-%d0%b1%d0%be%d0%ba%d0%b8-container"><ul id="menu-%d0%b1%d0%be%d0%ba%d0%b8" class="menu"><li id="menu-item-1278" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1278"><a href="#">Категория 1</a>
<ul class="sub-menu">
<li id="menu-item-1283" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1283"><a href="#">Под категория 1.1</a></li>
<li id="menu-item-1282" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1282"><a href="#">Под категория 1.2</a></li>
</ul>
</li>
<li id="menu-item-1277" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1277"><a href="#">Категория 2</a>
<ul class="sub-menu">
<li id="menu-item-1281" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1281"><a href="#">Под категория 2.1</a>
<ul class="sub-menu">
<li id="menu-item-1280" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1280"><a href="#">Под категория 2.1.1</a>
<ul class="sub-menu">
<li id="menu-item-1286" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1286"><a href="#">Под категория 2.1.1.1</a>
<ul class="sub-menu">
<li id="menu-item-1287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1287"><a href="#">НАЙДИ МЕНЯ!!</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-1279" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1279"><a href="#">Под категория 2.2</a></li>
</ul>
</li>
</ul></div> </nav>
but for reasons unknown to me when I specify% then transition: 0.5s; it stops working when specifying px. Everything that is in sub categories 2.1 does not push the menu, but simply overlaps each other.
I have tried in every way to move this menu.
and float, position.
css
asked Nov 11 at 16:32
zeni1agent
266
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 11 at 19:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
This question already has an answer here:
Percentage Height HTML 5/CSS
6 answers
I'm trying to make a sliding menu
CSS
.menu li ul
position: static;
background:#6b522e;
max-width: 200px;
display: block;
overflow: hidden;
.menu ul li
background:#e32929;
height: 0px;
transition:0.5s;
.menu :hover > ul > li
background:#e32929;
height: 100%;
transition:0.5s;
HTML
<nav role="navigation" class="navigation site-navigation secondary-navigation">
<div class="menu-%d0%b1%d0%be%d0%ba%d0%b8-container"><ul id="menu-%d0%b1%d0%be%d0%ba%d0%b8" class="menu"><li id="menu-item-1278" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1278"><a href="#">Категория 1</a>
<ul class="sub-menu">
<li id="menu-item-1283" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1283"><a href="#">Под категория 1.1</a></li>
<li id="menu-item-1282" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1282"><a href="#">Под категория 1.2</a></li>
</ul>
</li>
<li id="menu-item-1277" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1277"><a href="#">Категория 2</a>
<ul class="sub-menu">
<li id="menu-item-1281" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1281"><a href="#">Под категория 2.1</a>
<ul class="sub-menu">
<li id="menu-item-1280" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1280"><a href="#">Под категория 2.1.1</a>
<ul class="sub-menu">
<li id="menu-item-1286" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1286"><a href="#">Под категория 2.1.1.1</a>
<ul class="sub-menu">
<li id="menu-item-1287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1287"><a href="#">НАЙДИ МЕНЯ!!</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-1279" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1279"><a href="#">Под категория 2.2</a></li>
</ul>
</li>
</ul></div> </nav>
but for reasons unknown to me when I specify% then transition: 0.5s; it stops working when specifying px. Everything that is in sub categories 2.1 does not push the menu, but simply overlaps each other.
I have tried in every way to move this menu.
and float, position.
css
asked Nov 11 at 16:32
zeni1agent
266
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 11 at 19:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
Percentage Height HTML 5/CSS
6 answers
I'm trying to make a sliding menu
CSS
.menu li ul
position: static;
background:#6b522e;
max-width: 200px;
display: block;
overflow: hidden;
.menu ul li
background:#e32929;
height: 0px;
transition:0.5s;
.menu :hover > ul > li
background:#e32929;
height: 100%;
transition:0.5s;
HTML
<nav role="navigation" class="navigation site-navigation secondary-navigation">
<div class="menu-%d0%b1%d0%be%d0%ba%d0%b8-container"><ul id="menu-%d0%b1%d0%be%d0%ba%d0%b8" class="menu"><li id="menu-item-1278" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1278"><a href="#">Категория 1</a>
<ul class="sub-menu">
<li id="menu-item-1283" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1283"><a href="#">Под категория 1.1</a></li>
<li id="menu-item-1282" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1282"><a href="#">Под категория 1.2</a></li>
</ul>
</li>
<li id="menu-item-1277" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1277"><a href="#">Категория 2</a>
<ul class="sub-menu">
<li id="menu-item-1281" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1281"><a href="#">Под категория 2.1</a>
<ul class="sub-menu">
<li id="menu-item-1280" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1280"><a href="#">Под категория 2.1.1</a>
<ul class="sub-menu">
<li id="menu-item-1286" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1286"><a href="#">Под категория 2.1.1.1</a>
<ul class="sub-menu">
<li id="menu-item-1287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1287"><a href="#">НАЙДИ МЕНЯ!!</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-1279" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1279"><a href="#">Под категория 2.2</a></li>
</ul>
</li>
</ul></div> </nav>
but for reasons unknown to me when I specify% then transition: 0.5s; it stops working when specifying px. Everything that is in sub categories 2.1 does not push the menu, but simply overlaps each other.
I have tried in every way to move this menu.
and float, position.
css
asked Nov 11 at 16:32
zeni1agent
266
This question already has an answer here:
Percentage Height HTML 5/CSS
6 answers
I'm trying to make a sliding menu
CSS
.menu li ul
position: static;
background:#6b522e;
max-width: 200px;
display: block;
overflow: hidden;
.menu ul li
background:#e32929;
height: 0px;
transition:0.5s;
.menu :hover > ul > li
background:#e32929;
height: 100%;
transition:0.5s;
HTML
<nav role="navigation" class="navigation site-navigation secondary-navigation">
<div class="menu-%d0%b1%d0%be%d0%ba%d0%b8-container"><ul id="menu-%d0%b1%d0%be%d0%ba%d0%b8" class="menu"><li id="menu-item-1278" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1278"><a href="#">Категория 1</a>
<ul class="sub-menu">
<li id="menu-item-1283" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1283"><a href="#">Под категория 1.1</a></li>
<li id="menu-item-1282" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1282"><a href="#">Под категория 1.2</a></li>
</ul>
</li>
<li id="menu-item-1277" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1277"><a href="#">Категория 2</a>
<ul class="sub-menu">
<li id="menu-item-1281" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1281"><a href="#">Под категория 2.1</a>
<ul class="sub-menu">
<li id="menu-item-1280" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1280"><a href="#">Под категория 2.1.1</a>
<ul class="sub-menu">
<li id="menu-item-1286" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1286"><a href="#">Под категория 2.1.1.1</a>
<ul class="sub-menu">
<li id="menu-item-1287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1287"><a href="#">НАЙДИ МЕНЯ!!</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-1279" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1279"><a href="#">Под категория 2.2</a></li>
</ul>
</li>
</ul></div> </nav>
but for reasons unknown to me when I specify% then transition: 0.5s; it stops working when specifying px. Everything that is in sub categories 2.1 does not push the menu, but simply overlaps each other.
I have tried in every way to move this menu.
and float, position.
This question already has an answer here:
Percentage Height HTML 5/CSS
6 answers
css
css
asked Nov 11 at 16:32
zeni1agent
266
asked Nov 11 at 16:32
zeni1agent
266
asked Nov 11 at 16:32
zeni1agent
266
asked Nov 11 at 16:32
zeni1agent
266
asked Nov 11 at 16:32
zeni1agent
266
266
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 11 at 19:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 11 at 19:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
we cannot use height:100% for transition but if you know element height in px you can use for ex: height:200px.
otherwise hope it help you:
.menu li ul
position: static;
background:#6b522e;
max-width: 200px;
display: block;
overflow: hidden;
.menu ul li
background:#e32929;
transition:max-height 1s linear ;
max-height: 0px;
height: 0;
.menu :hover > ul > li
background:#e32929;
height: 100%;
max-height: 100px;
answered Nov 11 at 17:07
RGhanbari
944
add a comment |
up vote
0
down vote
Because what is 100% height? You need to be specific in this case. Maybe you can try animation by tranform: scale(1 0); to transform: scale(1 1);.
answered Nov 11 at 16:44
Martin Homola
1777
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
we cannot use height:100% for transition but if you know element height in px you can use for ex: height:200px.
otherwise hope it help you:
.menu li ul
position: static;
background:#6b522e;
max-width: 200px;
display: block;
overflow: hidden;
.menu ul li
background:#e32929;
transition:max-height 1s linear ;
max-height: 0px;
height: 0;
.menu :hover > ul > li
background:#e32929;
height: 100%;
max-height: 100px;
answered Nov 11 at 17:07
RGhanbari
944
add a comment |
up vote
1
down vote
accepted
we cannot use height:100% for transition but if you know element height in px you can use for ex: height:200px.
otherwise hope it help you:
.menu li ul
position: static;
background:#6b522e;
max-width: 200px;
display: block;
overflow: hidden;
.menu ul li
background:#e32929;
transition:max-height 1s linear ;
max-height: 0px;
height: 0;
.menu :hover > ul > li
background:#e32929;
height: 100%;
max-height: 100px;
answered Nov 11 at 17:07
RGhanbari
944
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
we cannot use height:100% for transition but if you know element height in px you can use for ex: height:200px.
otherwise hope it help you:
.menu li ul
position: static;
background:#6b522e;
max-width: 200px;
display: block;
overflow: hidden;
.menu ul li
background:#e32929;
transition:max-height 1s linear ;
max-height: 0px;
height: 0;
.menu :hover > ul > li
background:#e32929;
height: 100%;
max-height: 100px;
answered Nov 11 at 17:07
RGhanbari
944
we cannot use height:100% for transition but if you know element height in px you can use for ex: height:200px.
otherwise hope it help you:
.menu li ul
position: static;
background:#6b522e;
max-width: 200px;
display: block;
overflow: hidden;
.menu ul li
background:#e32929;
transition:max-height 1s linear ;
max-height: 0px;
height: 0;
.menu :hover > ul > li
background:#e32929;
height: 100%;
max-height: 100px;
answered Nov 11 at 17:07
RGhanbari
944
edited Nov 11 at 17:18
answered Nov 11 at 17:07
RGhanbari
944
answered Nov 11 at 17:07
RGhanbari
944
answered Nov 11 at 17:07
RGhanbari
944
944
add a comment |
add a comment |
up vote
0
down vote
Because what is 100% height? You need to be specific in this case. Maybe you can try animation by tranform: scale(1 0); to transform: scale(1 1);.
answered Nov 11 at 16:44
Martin Homola
1777
add a comment |
up vote
0
down vote
Because what is 100% height? You need to be specific in this case. Maybe you can try animation by tranform: scale(1 0); to transform: scale(1 1);.
answered Nov 11 at 16:44
Martin Homola
1777
add a comment |
up vote
0
down vote
up vote
0
down vote
Because what is 100% height? You need to be specific in this case. Maybe you can try animation by tranform: scale(1 0); to transform: scale(1 1);.
answered Nov 11 at 16:44
Martin Homola
1777
Because what is 100% height? You need to be specific in this case. Maybe you can try animation by tranform: scale(1 0); to transform: scale(1 1);.
answered Nov 11 at 16:44
Martin Homola
1777
answered Nov 11 at 16:44
Martin Homola
1777
answered Nov 11 at 16:44
Martin Homola
1777
answered Nov 11 at 16:44
Martin Homola
1777
1777
add a comment |
add a comment |
