Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Extends bulma.io CSS framework's Menu component to make sub-menu items expand and collapse. Requires jQuery and Font Awesome.
$("ul").addClass('menu-list').not(':first').addClass('is-closed');
$(".is-closed").siblings('a').addClass('menu-has-children has-closed');
$("a.menu-has-children").on('click', function(){
var firstUL = $(this).siblings('ul');
if(firstUL.hasClass('is-closed'))
{
$(this).removeClass('has-closed');
firstUL.removeClass('is-closed');
}
else
{
$(this).addClass('has-closed');
firstUL.addClass('is-closed');
}
});
ul.menu-list {
a.menu-has-children {
&:after {
font-family: Font Awesome\ 5 Free;
font-weight: 900;
margin-left: 8px;
content: "\f107";
float: right;
}
&.has-closed:after {
content: "\f105";
}
}
&.is-closed {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment