AngularJS create slidedown menu
<p>I'm building an AngularJS app, and basically I have a menu on top of my page then when I select an item is supposed to slide down some content of my page and show the menu in that area. I've read something about creating a directive but isn't still clear to me how can I do it. I show an example of my page:</p>

<p><a href="https://i.stack.imgur.com/oZiHl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oZiHl.png" alt="enter image description here"></a></p>

<p>Then when I select an item from the Menu, the static image disapears and gives place to a "sub menu" and the sub menu content itself.</p>

<p><a href="https://i.stack.imgur.com/NEaGq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NEaGq.png" alt="enter image description here"></a></p>

<p>In some cases, where the "SubMenu" + "Content" height is bigger then the height of the image, the rest of the content will slide down.</p>

<p>My main concern is how to show this SubMenu depending on the menu selected (in the black square). My idea was to create some menu template (with all the html and css created) and then just bind the different content to this template and show it on the div that I want (in this case the div that started with the static image). But since AngularJS is new to me I'm having some problems to put it in pratice.</p>