When a vertical menu on my website is clicked, it pops out from the left side of the screen. The content inside is vertically centered using CSS transformations. While expanding to show sub-items, everything remains centered. However, there's an issue when scrolling to the top if the window height is insufficient. Removing the transformation allows smooth scrolling but affects centering. I plan to use jQuery to dynamically adjust the top position on click events for better scrolling experience.
Below is the example HTML code snippet:
<div class="nav">
<ul class="nav__accordion">
<li class="nav__item">
/* Menu items go here */
</li>
...
</ul>
</div>
CSS styles used:
/* CSS styles go here */
Javascript functions included:
// JavaScript functions go here
You can view the JSFiddle demo here.