Here's the concept I'm aiming to achieve:
- When "PORTFOLIO" is clicked, smoothly push down everything on the page;
- New links should fade in smoothly;
- If "PORTFOLIO" is clicked again, reverse all animations.
This is my current code snippet:
$(function(){
$('[data-toggle]').on('click', function(){
var id = $(this).data("toggle"),
$object = $(id),
className = "open";
if ($object) {
if ($object.hasClass(className)) {
$object.removeClass(className)
} else {
$object.addClass(className)
}
}
});
});#list{
display: none;
}
#list.open{
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#" class="hide" data-toggle="#list">Portfolio</a>
<ul id="list">
<li><a href="#">Commercial Projects</a></li>
<li><a href="#">Residential Projects</a></li>
<li><a href="#">Institutional Projects</a></li>
<li><a href="#">Buildings</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>Is it possible to achieve this without using JavaScript, only with CSS? I'm struggling with the animation part and have tried using CSS Transitions property without success.
Any suggestions for improving the HTML markup and JS implementation? I feel like there might be a better way to do this... any advice would be greatly appreciated.