Bug in dropdown menu
0
Can somebody tell me where my mistake was done? It's a dropdown menu but it doesn't do the transition thing. I played around with it several hours but cant find the bug.
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
} .sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.2s;
}
<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>Where is my mistake?
Thank you
javascript css
edited Nov 24 '18 at 11:48
Sarvan Kumar
850523
asked Nov 24 '18 at 11:35
secretsecret
11
add a comment |
0
Can somebody tell me where my mistake was done? It's a dropdown menu but it doesn't do the transition thing. I played around with it several hours but cant find the bug.
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
} .sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.2s;
}
<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>Where is my mistake?
Thank you
javascript css
edited Nov 24 '18 at 11:48
Sarvan Kumar
850523
asked Nov 24 '18 at 11:35
secretsecret
11
add a comment |
0
0
0
Can somebody tell me where my mistake was done? It's a dropdown menu but it doesn't do the transition thing. I played around with it several hours but cant find the bug.
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
} .sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.2s;
}
<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>Where is my mistake?
Thank you
javascript css
edited Nov 24 '18 at 11:48
Sarvan Kumar
850523
asked Nov 24 '18 at 11:35
secretsecret
11
Can somebody tell me where my mistake was done? It's a dropdown menu but it doesn't do the transition thing. I played around with it several hours but cant find the bug.
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
} .sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.2s;
}
<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>Where is my mistake?
Thank you
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
} .sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.2s;
}
<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul> var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
} .sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.2s;
}
<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>javascript css
javascript css
edited Nov 24 '18 at 11:48
Sarvan Kumar
850523
asked Nov 24 '18 at 11:35
secretsecret
11
edited Nov 24 '18 at 11:48
Sarvan Kumar
850523
asked Nov 24 '18 at 11:35
secretsecret
11
edited Nov 24 '18 at 11:48
Sarvan Kumar
850523
edited Nov 24 '18 at 11:48
Sarvan Kumar
850523
edited Nov 24 '18 at 11:48
Sarvan Kumar
850523
850523
asked Nov 24 '18 at 11:35
secretsecret
11
asked Nov 24 '18 at 11:35
secretsecret
11
asked Nov 24 '18 at 11:35
secretsecret
11
11
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
You cannot set a transition on the display property as you can see in that question : Transitions on the display: property.
Instead you can play with the height, the visibility.
answered Nov 24 '18 at 11:43
Nico_Nico_
769723
add a comment |
0
Transitioning display isn't possible, however, you can transition the opacity of the element. If you set the opacity to 0 when the section is hidden, and transition it to 1 when it is shown, you can get a fade in effect. To get other effects, you can toggle the max-height of the section as well. You also must change the visibility of the element to go it to behave as expected when hidden and shown:
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}.sub-menu {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity 2.3s, max-height 0.6s ease-in;
-webkit-transition: opacity 2.3s, max-height 0.6s ease-in;
}
.sub-menu.selected {
visibility: visible;
opacity: 1;
max-height: 300px;
transition: opacity 2.3s, max-height 1.2s ease-out;
-webkit-transition: opacity 2.3s, max-height 1.2s ease-out;
}<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>answered Nov 24 '18 at 12:13
Nick ParsonsNick Parsons
8,8882824
add a comment |
0
You cannot transition display. However you can change the max-height and achieve a nice animation.
I have made a simple example on how to make it work
$("#myItem").on("click", function(){
if( $('.sub-menu').hasClass('reveal'))
{
$('.sub-menu').removeClass('reveal');
}
else {
$('.sub-menu').addClass('reveal');
$('.sub-menu').addClass('transition');
}
});.sub-menu {
overflow:hidden;
display:block;
max-height:0;
}
.transition
{
transition:max-height 3.3s ease-out;
}
.reveal
{
max-height:200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-has-children">
<a href="#0" id="myItem">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>answered Nov 24 '18 at 13:59
Alex LeoAlex Leo
7771213
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53457709%2fbug-in-dropdown-menu%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You cannot set a transition on the display property as you can see in that question : Transitions on the display: property.
Instead you can play with the height, the visibility.
answered Nov 24 '18 at 11:43
Nico_Nico_
769723
add a comment |
1
You cannot set a transition on the display property as you can see in that question : Transitions on the display: property.
Instead you can play with the height, the visibility.
answered Nov 24 '18 at 11:43
Nico_Nico_
769723
add a comment |
1
1
1
You cannot set a transition on the display property as you can see in that question : Transitions on the display: property.
Instead you can play with the height, the visibility.
answered Nov 24 '18 at 11:43
Nico_Nico_
769723
You cannot set a transition on the display property as you can see in that question : Transitions on the display: property.
Instead you can play with the height, the visibility.
answered Nov 24 '18 at 11:43
Nico_Nico_
769723
answered Nov 24 '18 at 11:43
Nico_Nico_
769723
answered Nov 24 '18 at 11:43
Nico_Nico_
769723
answered Nov 24 '18 at 11:43
Nico_Nico_
769723
769723
add a comment |
add a comment |
0
Transitioning display isn't possible, however, you can transition the opacity of the element. If you set the opacity to 0 when the section is hidden, and transition it to 1 when it is shown, you can get a fade in effect. To get other effects, you can toggle the max-height of the section as well. You also must change the visibility of the element to go it to behave as expected when hidden and shown:
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}.sub-menu {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity 2.3s, max-height 0.6s ease-in;
-webkit-transition: opacity 2.3s, max-height 0.6s ease-in;
}
.sub-menu.selected {
visibility: visible;
opacity: 1;
max-height: 300px;
transition: opacity 2.3s, max-height 1.2s ease-out;
-webkit-transition: opacity 2.3s, max-height 1.2s ease-out;
}<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>answered Nov 24 '18 at 12:13
Nick ParsonsNick Parsons
8,8882824
add a comment |
0
Transitioning display isn't possible, however, you can transition the opacity of the element. If you set the opacity to 0 when the section is hidden, and transition it to 1 when it is shown, you can get a fade in effect. To get other effects, you can toggle the max-height of the section as well. You also must change the visibility of the element to go it to behave as expected when hidden and shown:
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}.sub-menu {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity 2.3s, max-height 0.6s ease-in;
-webkit-transition: opacity 2.3s, max-height 0.6s ease-in;
}
.sub-menu.selected {
visibility: visible;
opacity: 1;
max-height: 300px;
transition: opacity 2.3s, max-height 1.2s ease-out;
-webkit-transition: opacity 2.3s, max-height 1.2s ease-out;
}<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>answered Nov 24 '18 at 12:13
Nick ParsonsNick Parsons
8,8882824
add a comment |
0
0
0
Transitioning display isn't possible, however, you can transition the opacity of the element. If you set the opacity to 0 when the section is hidden, and transition it to 1 when it is shown, you can get a fade in effect. To get other effects, you can toggle the max-height of the section as well. You also must change the visibility of the element to go it to behave as expected when hidden and shown:
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}.sub-menu {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity 2.3s, max-height 0.6s ease-in;
-webkit-transition: opacity 2.3s, max-height 0.6s ease-in;
}
.sub-menu.selected {
visibility: visible;
opacity: 1;
max-height: 300px;
transition: opacity 2.3s, max-height 1.2s ease-out;
-webkit-transition: opacity 2.3s, max-height 1.2s ease-out;
}<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>answered Nov 24 '18 at 12:13
Nick ParsonsNick Parsons
8,8882824
Transitioning display isn't possible, however, you can transition the opacity of the element. If you set the opacity to 0 when the section is hidden, and transition it to 1 when it is shown, you can get a fade in effect. To get other effects, you can toggle the max-height of the section as well. You also must change the visibility of the element to go it to behave as expected when hidden and shown:
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}.sub-menu {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity 2.3s, max-height 0.6s ease-in;
-webkit-transition: opacity 2.3s, max-height 0.6s ease-in;
}
.sub-menu.selected {
visibility: visible;
opacity: 1;
max-height: 300px;
transition: opacity 2.3s, max-height 1.2s ease-out;
-webkit-transition: opacity 2.3s, max-height 1.2s ease-out;
}<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}.sub-menu {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity 2.3s, max-height 0.6s ease-in;
-webkit-transition: opacity 2.3s, max-height 0.6s ease-in;
}
.sub-menu.selected {
visibility: visible;
opacity: 1;
max-height: 300px;
transition: opacity 2.3s, max-height 1.2s ease-out;
-webkit-transition: opacity 2.3s, max-height 1.2s ease-out;
}<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}.sub-menu {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity 2.3s, max-height 0.6s ease-in;
-webkit-transition: opacity 2.3s, max-height 0.6s ease-in;
}
.sub-menu.selected {
visibility: visible;
opacity: 1;
max-height: 300px;
transition: opacity 2.3s, max-height 1.2s ease-out;
-webkit-transition: opacity 2.3s, max-height 1.2s ease-out;
}<ul>
<li class="item-has-children">
<a href="#0">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>
<li class="item-has-children">
<a href="#0">November</a>
<ul class="sub-menu">
<li><a href="#x">Sub Item One</a></li>
<li><a href="#0">Sub Item Two</a></li>
<li><a href="#0">Sub Item Three</a></li>
<li><a href="#0">Sub Item Four</a></li>
<li><a href="#0">Sub Item Five</a></li>
<li><a href="#0">Sub Item Six</a></li>
</ul>
</li>
</ul>answered Nov 24 '18 at 12:13
Nick ParsonsNick Parsons
8,8882824
edited Nov 24 '18 at 12:28
answered Nov 24 '18 at 12:13
Nick ParsonsNick Parsons
8,8882824
answered Nov 24 '18 at 12:13
Nick ParsonsNick Parsons
8,8882824
answered Nov 24 '18 at 12:13
Nick ParsonsNick Parsons
8,8882824
8,8882824
add a comment |
add a comment |
0
You cannot transition display. However you can change the max-height and achieve a nice animation.
I have made a simple example on how to make it work
$("#myItem").on("click", function(){
if( $('.sub-menu').hasClass('reveal'))
{
$('.sub-menu').removeClass('reveal');
}
else {
$('.sub-menu').addClass('reveal');
$('.sub-menu').addClass('transition');
}
});.sub-menu {
overflow:hidden;
display:block;
max-height:0;
}
.transition
{
transition:max-height 3.3s ease-out;
}
.reveal
{
max-height:200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-has-children">
<a href="#0" id="myItem">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>answered Nov 24 '18 at 13:59
Alex LeoAlex Leo
7771213
add a comment |
0
You cannot transition display. However you can change the max-height and achieve a nice animation.
I have made a simple example on how to make it work
$("#myItem").on("click", function(){
if( $('.sub-menu').hasClass('reveal'))
{
$('.sub-menu').removeClass('reveal');
}
else {
$('.sub-menu').addClass('reveal');
$('.sub-menu').addClass('transition');
}
});.sub-menu {
overflow:hidden;
display:block;
max-height:0;
}
.transition
{
transition:max-height 3.3s ease-out;
}
.reveal
{
max-height:200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-has-children">
<a href="#0" id="myItem">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>answered Nov 24 '18 at 13:59
Alex LeoAlex Leo
7771213
add a comment |
0
0
0
You cannot transition display. However you can change the max-height and achieve a nice animation.
I have made a simple example on how to make it work
$("#myItem").on("click", function(){
if( $('.sub-menu').hasClass('reveal'))
{
$('.sub-menu').removeClass('reveal');
}
else {
$('.sub-menu').addClass('reveal');
$('.sub-menu').addClass('transition');
}
});.sub-menu {
overflow:hidden;
display:block;
max-height:0;
}
.transition
{
transition:max-height 3.3s ease-out;
}
.reveal
{
max-height:200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-has-children">
<a href="#0" id="myItem">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>answered Nov 24 '18 at 13:59
Alex LeoAlex Leo
7771213
You cannot transition display. However you can change the max-height and achieve a nice animation.
I have made a simple example on how to make it work
$("#myItem").on("click", function(){
if( $('.sub-menu').hasClass('reveal'))
{
$('.sub-menu').removeClass('reveal');
}
else {
$('.sub-menu').addClass('reveal');
$('.sub-menu').addClass('transition');
}
});.sub-menu {
overflow:hidden;
display:block;
max-height:0;
}
.transition
{
transition:max-height 3.3s ease-out;
}
.reveal
{
max-height:200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-has-children">
<a href="#0" id="myItem">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>$("#myItem").on("click", function(){
if( $('.sub-menu').hasClass('reveal'))
{
$('.sub-menu').removeClass('reveal');
}
else {
$('.sub-menu').addClass('reveal');
$('.sub-menu').addClass('transition');
}
});.sub-menu {
overflow:hidden;
display:block;
max-height:0;
}
.transition
{
transition:max-height 3.3s ease-out;
}
.reveal
{
max-height:200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-has-children">
<a href="#0" id="myItem">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>$("#myItem").on("click", function(){
if( $('.sub-menu').hasClass('reveal'))
{
$('.sub-menu').removeClass('reveal');
}
else {
$('.sub-menu').addClass('reveal');
$('.sub-menu').addClass('transition');
}
});.sub-menu {
overflow:hidden;
display:block;
max-height:0;
}
.transition
{
transition:max-height 3.3s ease-out;
}
.reveal
{
max-height:200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-has-children">
<a href="#0" id="myItem">December</a>
<ul class="sub-menu">
<li><a href="blogproto.html#3">Sub Item One</a></li>
<li><a href="#5">Sub Item Two</a></li>
<li><a href="#4">Sub Item Three</a></li>
<li><a href="#3">Sub Item Four</a></li>
<li><a href="#2">Sub Item Five</a></li>
<li><a href="#1">Sub Item Six</a></li>
</ul>
</li>answered Nov 24 '18 at 13:59
Alex LeoAlex Leo
7771213
edited Dec 23 '18 at 18:45
answered Nov 24 '18 at 13:59
Alex LeoAlex Leo
7771213
answered Nov 24 '18 at 13:59
Alex LeoAlex Leo
7771213
answered Nov 24 '18 at 13:59
Alex LeoAlex Leo
7771213
7771213
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53457709%2fbug-in-dropdown-menu%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
