Responsive Navigation Menu Bar - CSS3 Flexbox Mobile First Design | Youtube Video Tutorial
Responsive Navigation Menu - CSS3 Flexbox Mobile First Design | Creating Simple Horizontal Menu Bar • Responsive Navigation Menu Bar - CSS3...
Hi, I'll be creating a very simple horizontal menu bar using css3 flexbox. The purpose of this video is to demonstrate how to use css display flex property to design simple horizontal navigation bar. This will help you to create dynamic and flexible navigation bars writing very few lines of css. Yes, All this is possible with the css3 flexbox module which help you to create better and dynamic layouts for the menu without writing clunky styles and maintaining the legibility of your stylesheets.
=====================See working Demo==============
https://goo.gl/H0WRSc
==================================================
In this video first I'll show you how to create the menu for the mobile and small screen devices listing the items vertically stacked on top of another, and this will be possible with very few lines of css and setting css3 display property to flex and setting flex-direction property to column.
Then we'll use media queries to write the style for our menu bar for large screen devices, such as tablets, laptops and desktops. We'll target about 480px of min-width using media query and then we'll use target the navigation menu container element and set its property to flex-direction row. So that our navigation bar will be displayed horizontally.
By using the css3 flex we have capability to change the visual order of our menu items without changing the source orders of our menu items itself. We have two ways to do that. Either by using column-reverse/row-reverse value for the flex-direction OR by using the order property for the individual list items if its parent container has a property of flex already applied.
CSS3 flexbox is now fully compatible with modern browsers and now its ready to be used. Have fun!
=================Navigate to Specific part=============
1:00 - Applying basic style to navigation structure
3:50 - Using flex to create menu for mobile devices
5:30 - Writing Media queries to target large devices and style our navigation accordingly
====================================================
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=============
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
***********************CONTACT and RESOURCES************
Find all the source codes here:
https://codepen.io/smashtheshell
Follow on Twitter
/ amit4kp
Add on Facebook
/ kumaramit24chd
Like Page on Facebook
/ smashtheshell
Смотрите видео Responsive Navigation Menu Bar - CSS3 Flexbox Mobile First Design | Youtube Video Tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь smashtheshell 07 Декабрь 2016, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 13,872 раз и оно понравилось 182 людям.