RESPONSIVE MENUS – RESPONSIVE WEB DESIGN – HTML5 css3
Please have a look at my webpage where you can find extra information
PREVIOUS VIDEO – responsive web design basics
FINAL VIDEO – responsive images, videos, menus, backgrounds and hiding elements
In this video you will learn how to make responsive navigation menus.
You can download the exercise file below.
You might aswell watch video one first, where we explained the basics of responsive design.
We start with a head, a menu, a content body and a footer. We have applied the basics of responsive design as seen in the first video.
To make the main horizontal navigation menu, we will use an unordered list “ul” and give it a class name.
In our css we will remove the standard list style, make it display horizontal and give it some basic styling properties.
When you look at the design now, it responds to different screen sizes.
But we give it some extra styling for smaller devices.
We will use the @media screen property and set it to 600 px.
This means that all screens under 600 px will have these extra styles applied to it.
Make sure to write your @media properties at the end of your css.
Small screens are controlled with a touch screen and you want to make the links easier to click on.
Therefore we enlarge all the links on the page and make them bold.
You can play around with this figures to fit your needs.
When you look now, you see that it is more easy to navigate with a touch screen.
To make the submenu, we will make two div containers. One to display the submenu and another one to hold the main content and we give them an id.
For the links we just use “a” tags and break the lines with the “br” tag.
In our css we set the sub menu and the content to dispay inline block.
And we set the width of those containers expressed in percentage.
You see the width of the sub menu is 22% and the width of the content is 70%. Together they are 92 % witch give us some room for paddings and margins. You should never have more than 100 % width all together. Otherwise the the content container will pop out of its position. And to play save, you set the total width to 98% max.
When you look at your page now, you see that it resizes al the way down.
But we will apply some extra style for smaller screens.
In the @media screen property we reset the min-height for the submenu.
The “auto” is a fix for internet explorer.
And we change the width for the sub menu and the content.
As a result you have navigation menu that look good on any device.
In this video you have learned.
How to make responsive horizontal menus
How to make responsive vertical menus
And how to display these menus on smaller devices.
Maybe you want to watch the final video where we pud together a whole responsive webpage with responsive images, responsive videos, responsive backgrounds and hiding elements.
I leave you a link below.
Did you like this video?
Please subscribe and share.