Responsive Internet Design Navigation Menu Tutorial

by birtanpublished on July 3, 2020

hello everyone in this lesson we are

going to learn how to create a website

navigation menu that's responsive

now the word responsive in this context

means that we want to use the best

layout depending on the size of the

users device or browser window so for

example if someone's using a traditional

monitor or a laptop or a large tablet

then the layout in front of us make

sense for a navigation menu but once

someone is using a smartphone which is

only about this size we can see that the

navigation is taking up too much of the

important screen real estate

so instead and I'm going to switch over

to a new tab with new code instead what

we want is something that uses

horizontal navigation on larger devices

but for smartphones we want to have a

menu that you tap or click and then

reveal the navigation so this way on

initial page load our main content is

still in prime viewing space for all

users so in this video we're going to

review the JavaScript and CSS we're

gonna write it by hand so that you can

create this navigation yourself so let's

dive right in now this was the final

product but I'm gonna switch over to the

version without any of the responsive

code so we can write it together so

let's review what we do have at the

moment we have a div with a class of nav

menu and we're using the standard

structure of an unordered list with list

items for our links in the CSS we've

simply floated the list items to the

left to create the horizontal layout so

that's what we currently have now let's

review a plan of attack for adding in

the responsive styling and behavior so

it's a two-step process step one is the

CSS we're gonna target the way that this

navigation looks on small screens so

that each link sits on its own line and

has more space around it so it's easier

to tap step two is the JavaScript we're

going to hide the navigation initially

for small screens and then we're going

to set up the event handling so that

when we click on something then it

slides down the navigation so let's

begin with step one the CSS so we want

the new CSS that we're going to add

to only take a place if the screen is

about this size but not when it's this

size so I'm going to add a new line in

our CSS file media screen and max width

480 pixels so now whenever the browser

window or the device is smaller than or

equal to 480 pixels any styles we place

between this bracket and this bracket

will be applied to the layout so let's

write the CSS so that the links sit one

per line instead of stacking

horizontally so we'll say div nav menu

unordered list list item float none so

now if we refresh we see that we have

one per line let's go ahead and add a

faint border to the bottom of each link

so we'll create a new declaration border

bottom two pixels solid and then I'm

just gonna paste in a slightly darker

blue color so now if we refresh we see

that we have a very subtle border well

let's go ahead and set it up so that

this last link the final item does not

have the border so we'll create a new

rule have menu and we can use this

pseudo selector named last child and

that will select only the last link or

the last list item and then we could say

border bottom none if we refresh you see

that now it's gone so now that the

navigation menu itself is styled

correctly let's add the menu trigger

button that we tap to reveal the nav so

in our HTML we'll create this trigger

element directly above the menu itself

we'll give a class of menu trigger will

include the word menu inside it so now

if we refresh we see that the word menu

is directly above the navigation and

you'll notice that even if we make our

browser larger that word is still there

menu and we do not want that we only

want it to show for small screens so in

our CSS we'll create a rule directly

above our media query as this will

target larger screens are actually all

screens and we'll say

menu trigger display:none so now if we

refresh it's gone but that means that

it's gone everywhere so then inside this

media query for small screens now we'll

say menu trigger display block so now we

have something that does not display for

large screens and does display for small

screens so now our next step is to add

CSS so that the navigation menu does not

display at all for small screens and

then we'll use JavaScript so that if you

click this menu trigger then it reveals

so we'll hide the navigation menu

entirely for small screens ok and now

we're going to write a bit of JavaScript

within our script file we're using the

popular JavaScript library named jQuery

anything we place between this bracket

and this bracket will run on page load

and we'll have access to all of jquery's

neat functions

so we'll say jQuery when the menu

trigger element is clicked run a bit of

code so any code now between this

bracket in this bracket will run when we

tap that menu text so now we will select

the navigation menu and use jQuery slide

toggle method and it's that easy

so now if we refresh and we click the

menu button or if we tapped it on a

smartphone it reveals the navigation and

if we tap the menu button again it hides

it so that's what the word toggle here

is doing for us it's toggling between

slide down and slide up automatically so

our responsive navigation is now almost

complete well there's one last thing I

want to do to make it bulletproof so

currently if we click to reveal the

navigation and then click to hide it and

then make our browser window larger to

use the traditional layout we can see

that the navigation is still missing and

that doesn't make sense we want the

navigation to always show for larger

screen sizes now to fix this issue all

we need to do is run a bit of custom

code alongside this slide toggle method

so we'll say take 400 milliseconds to

complete the slide toggle and then when

it's

dun run this callback function so now

anything we place between this bracket

in this bracket will fire when this

slide toggle is finished so what we want

to do now is basically toggle another

class so that only the mobile hides the

navigation but the desktop never tries

to hide it so we will select the

navigation and then we will toggle a

class we could use any name we want I'm

going to use nav expand it then we also

want to chain on another method here

called CSS and we want to make sure that

jQuery after it completes the toggle

then it sort of offsets or removes any

CSS that it used inline so we'll just

select the display property and set its

value to empty so this way we can use

our CSS and our media queries to control

different code at different screen sizes

so now if we hop over to our CSS first I

want to call out this class now I've

expanded we just need to go add a rule

in our CSS for nav expanded within the

media query for small screens so we'll

say div nav expanded display:block so

now if we refresh you go to the mobile

level we show the navigation we hide the

navigation and then we make our screen

larger again you can see that the nav is

still there so now everything is in

place and our menu is complete although

I suppose we could style this menu

trigger a bit so I'll just paste in some

code that I've read earlier basically

we're just adding a background color and

a color and a bit of padding so that it

looks something like this instead so

this is the final product to review we

used CSS media queries and a little bit

of JavaScript and jQuery to create a

responsive navigation menu that works

for all devices thank you very much for

watching I hope you feel like you

learned something and stay tuned for

more web development tutorials thanks

bye

Related Videos

Be the first to comment “Responsive Internet Design Navigation Menu Tutorial”

Your email address will not be published.

There are no comments yet.