I am currently working on setting up a horizontal sliding div for a menu. The layout consists of a left DIV that remains visible at all times, and a sliding DIV that appears horizontally when the menu is activated. My HTML code looks like this.
<div id="app-menu">
<div id="menu_left">
<img src="menu_left.png" />
</div>
<div id="menu_slider" class="menu-content">
<img src="menu_1.png" />
<img src="menu_2.png" />
<img src="menu_3.png" />
</div>
</div>
The animation of the slider is achieved using CSS as shown below:
.menu-content {
position: fixed;
height: 175px;
left: -606px;
top: 35px;
overflow-x: hidden;
overflow-y: hidden;
transition: ease-in-out 400ms left;
}
.menu-content-opened {
left: 125px;
transition: ease-in-out 600ms left;
}
The class of the menu_slider DIV toggles between 'menu-content' and 'menu-content-opened' in a click event on the menu_left DIV, which functions correctly.
However, my menu_left DIV includes an image called menu_left.png with an alpha channel and transparent areas. When the menu_slider DIV closes behind the menu_left DIV by sliding to the left, I can see the content of the menu_slider DIV peeking through those transparent areas.
My goal is to have the menu_slider DIV slide to the left without being visible behind the menu_left DIV, essentially cropping it somehow. While one solution could be to fill in the transparent areas of the PNG with the page background color, I would prefer not to do so. I am currently utilizing Angular 6, Typescript, and .less style files for this project.
If you have any suggestions or ideas, please feel free to share them. Thank you!