Simple Responsive Navigation Menu Bar with Logo on Left Using only HTML5 and CSS3 Flexbox – Youtube Tutorial – smashtheshell
WHAT WILL YOU LEARN?
How to a simple Responsive Navigation Menu Bar or navbar Design using only HTML and CSS Flexbox Module for mobiles and small screen devices without using jquery or bootstrap framework.
In this video tutorial for responsive navigation menu design, for the larger devices like desktop or laptop logo will be on the left-hand side and menu links will display on the right-hand side of the screen.
And for the smaller screen devices like handheld or mobile phones, the logo will be displayed at the top and beneath the logo, our navigation menu items will be displayed.
This is the simple and mobile first responsive navigation bar with the logo without dropdown.
So I’ll design this menu bar for the mobile devices first and then we’ll scale it up for the larger devices like desktop, tablets or laptops.
WHAT ELSE WILL I LEARN?
You will learn CSS tricks to add a nice animated underline hover effect for menu items in your responsive navbar. Two underlines will slide from left and right and meet at the bottom center of you menu links on hover. I will show you nice css3 tricks create custom underline using after and before pseudo element selectors.
HOW WILL WE CREATE OUR NAVIGATION MENU?
We will start creating the HTML markup for the navigation menu and use the HTML5 nav element and unordered lists with the anchor tag to put our all of the internal site links. Then we will go ahead and start writing our CSS for the mobile navigation menu which will have the logo on the top in the header. We will use the css flexbox in combination with CSS media queries to control how our navbar will look on the larger devices by specifying an efficient breakpoint.
Media queries are very powerful and let you write different styles for different devices based on the max-width or min-width of the devices. There are lots of other characteristics of the device that you can target via media queries.
=================Navigate to Specific part=============
1:38 – Creating the navigation Menu markup in HTML5
3:50 – Writing Navigation Bar CSS for Smaller Devices
9:26 – Styling the Navigation using Media Queries for Larger Devices
18:26 – Applying a nice animated underline effect on hover for our desktop navigation menu items using css3 pseudo element selectors.
WHAT DO YOU NEED?
You can follow along with this tutorial to create your own responsive navigation menu bar if you are little familiar with the HTML and CSS. You don’t need to be an expert to follow along with this tutorial. If you have the basic understanding how HTML and CSS work you are good to go.
You need a web browser to see the preview and any code editor that you prefer to use.
===============Responsive Menu Source Code=========
Creating Multilevel horizontal Navigation Bar using Flexbox
Creating Simple Responsive Horizontal Menu using CSS3 Flex
Creating a Masonry Layout Using Pure CSS3
Creating a Custom Select Box Element
How to create simple css3 preloading animation
================CONTACT and RESOURCES==============
Find all the source codes here:
Follow on Twitter
Add on Facebook
Like Page on Facebook