How to create a horizontal drop down menu with full size submenu width - 3D Flipping Submenu скачать в хорошем качестве

How to create a horizontal drop down menu with full size submenu width - 3D Flipping Submenu

Smashtheshell : How to create a horizontal drop down menu with full size submenu width - 3D Flipping Submenu Get the source code here: http://codepen.io/smashtheshell/pen/x... In this video I am going to create a full width navigation bar or nav bar using pure html5 and css3 with full width submenu. Here you see how to create a horizontal full width drop down menu with a submenu of 100% width to its layout. Each submenu has a different category for different items. You will learn to how to create a 3d rotate submenu flipping effect using pure css3. We start with creating a the structure for the full width navbar using unordered list and then we go ahead an include the fontawesome library into our html document so that we can use the icons in our dropdown menu. Then we go ahead and include the markup for the fontawesome icons in our menu links. After that I'll go into our css file and start styling the navigation bar, Navigation bar will have two parts, one for the title and second the navigation items itself. Further, we hide the submenu using opacity and visibility property. After that, we display this full width submenu when we hover over cursor to the menu items using css3 combinator selectors. Finally we go ahead and create the 3D space using CSS3 perspective to the parent element which is nav itself and then we go ahead and apply transform and transition property to the submenu itself. Creating html5 and CSS3 nav bar was never been so easier, but you will see how easily we create this horizontal drop down menu with 100% submenu width. At last you will learn how to create a full fledged horizontal navigation drop down menu using pure css3 and html5 with full width submenu. This is 3d animated submenu created in pure css3. So hope you guys like this video. Please hit like to this video and share with your friends if you really like it. If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos. One thing to mention here friends, Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development. You can visit my codepen account for more stuff like this: https://codepen.io/smashtheshell You can follow me on my twitter account here:   / amit4kp   You can add me on facebook too :)   / kumaramit24chd   Share this video and Subscribe to this channel for latest updates and web design tips and tricks. Waiting for feedback :) . Drop a comment