CSS3 Flexbox Responsive Horizontal Navigation Menu Bar - Flexbox Multilevel Nested Submenu
CSS3 Flexbox Responsive Horizontal Navigation Menu Bar - Multilevel Nested Submenu | Youtube Tutorial
https://youtu.be/a0Zz9oVGgJc
Learn to utilize the power of css flexbox and media queries to create your horizontal navigation bar which will contain multilevel nested submenu by writing few lines of css codes. Again, the purpose of this video is to show how you can use display flex to create horizontal and vertical menu bars very easily without writing clunky code and at the same time maintaining the readability of your code. Creating nested sub-menu items for you navigation was never been so easier, by harnessing the power of css3 flexbox all possible with few lines of code. We'll be using html5 for structuring the navigation list items.
You'll also learn to integrate fontawesome libary to your document so that you can use font awesome arrow icons for your navigation menu items.
=====================See Source Code===============
https://goo.gl/PSHgI4
======================Summary====================
In short, in this video I'll be creating a flexbox based navigation bar. First of all I will be writing styles for the small screen devices and then I'll show you how to use media queries so that we can target our large screen devices having resolution greater than 480px and restyle the navigation based on the newer viewport size. Media queries and flexbox when combine together they gives us flexibility to easily create almost any kind of layout for our responsive nav bars.
=================Navigate to Specific part=============
4:34 - Applying First Level Nested Submenu For Main Home Menu
14:11 - Adding Second Level Nested Submenu for List Item
17:15 - Adding FontAwesome Arrow Icons to your Navigation List Items which have Submenus.
====================================================
If you have any questions, just comment below in comment section. I will try to respond as soon as possible.
Like, share and comment!
Thanks
============Useful Tutorials=============
Creating Simple Horizontal Navigation Bar using Flexbox
https://goo.gl/oR0lGf
Distributing images evenly in a fluid container
https://goo.gl/w2O1kR
Creating CSS3 Tooltip without using jquery or javascript
https://goo.gl/ah10aw
Styling placeholder text using css3
https://goo.gl/i4CZai
Creating three column responsive layout
https://goo.gl/uj46tI
How to create simple css3 preloading animation
https://goo.gl/GqjXCr
How to add preloader to your webpage using javascript
https://goo.gl/JJuclF
************************CONTACT and RESOURCES*************
Find all the source codes here:
https://codepen.io/smashtheshell
Follow on Twitter
https://twitter.com/amit4kp
Add on Facebook
https://www.facebook.com/kumaramit24chd
Like Page on Facebook
https://www.facebook.com/smashtheshell
Видео CSS3 Flexbox Responsive Horizontal Navigation Menu Bar - Flexbox Multilevel Nested Submenu канала smashtheshell
https://youtu.be/a0Zz9oVGgJc
Learn to utilize the power of css flexbox and media queries to create your horizontal navigation bar which will contain multilevel nested submenu by writing few lines of css codes. Again, the purpose of this video is to show how you can use display flex to create horizontal and vertical menu bars very easily without writing clunky code and at the same time maintaining the readability of your code. Creating nested sub-menu items for you navigation was never been so easier, by harnessing the power of css3 flexbox all possible with few lines of code. We'll be using html5 for structuring the navigation list items.
You'll also learn to integrate fontawesome libary to your document so that you can use font awesome arrow icons for your navigation menu items.
=====================See Source Code===============
https://goo.gl/PSHgI4
======================Summary====================
In short, in this video I'll be creating a flexbox based navigation bar. First of all I will be writing styles for the small screen devices and then I'll show you how to use media queries so that we can target our large screen devices having resolution greater than 480px and restyle the navigation based on the newer viewport size. Media queries and flexbox when combine together they gives us flexibility to easily create almost any kind of layout for our responsive nav bars.
=================Navigate to Specific part=============
4:34 - Applying First Level Nested Submenu For Main Home Menu
14:11 - Adding Second Level Nested Submenu for List Item
17:15 - Adding FontAwesome Arrow Icons to your Navigation List Items which have Submenus.
====================================================
If you have any questions, just comment below in comment section. I will try to respond as soon as possible.
Like, share and comment!
Thanks
============Useful Tutorials=============
Creating Simple Horizontal Navigation Bar using Flexbox
https://goo.gl/oR0lGf
Distributing images evenly in a fluid container
https://goo.gl/w2O1kR
Creating CSS3 Tooltip without using jquery or javascript
https://goo.gl/ah10aw
Styling placeholder text using css3
https://goo.gl/i4CZai
Creating three column responsive layout
https://goo.gl/uj46tI
How to create simple css3 preloading animation
https://goo.gl/GqjXCr
How to add preloader to your webpage using javascript
https://goo.gl/JJuclF
************************CONTACT and RESOURCES*************
Find all the source codes here:
https://codepen.io/smashtheshell
Follow on Twitter
https://twitter.com/amit4kp
Add on Facebook
https://www.facebook.com/kumaramit24chd
Like Page on Facebook
https://www.facebook.com/smashtheshell
Видео CSS3 Flexbox Responsive Horizontal Navigation Menu Bar - Flexbox Multilevel Nested Submenu канала smashtheshell
Комментарии отсутствуют
Информация о видео
27 декабря 2016 г. 0:39:50
00:23:47
Другие видео канала