Today we’ll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”). The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is clicked. Once it’s clicked the menu icon slides to the right and the label moves up while the list items fade in sequentially. We’ll add some more style and effects to it in order to make it a bit more interesting.
So, let’s do it!
THE MARKUP
For the HTML we will use a nav element and inside we’ll add a div that will contain the menu icon and the label. We’ll use an unordered list for the menu items:
Each menu item will have a little icon, so we’ll give them all different classes for that. The icons that we’ll be using are from IcoMoon and we’ve created a custom icon set with their brilliant app.
Let’s take a look at the CSS.
DEMO
SOURCE
Không có nhận xét nào:
Đăng nhận xét