 What is going on people, my name is Roddy and I make weekly website design and development videos here on this channel. Today we are going to create a simple responsive navigation bar with a hamburger menu using Telvin CSS and Applying GIS. Telvin CSS is a utility-first CSS framework that we are ready to use classes that can be used to pretty much compose and build any design directly into your marker. And Applying GIS is a regular minimal tool for composing behavior directly into your markup. Think of it like jQuery for the modern web. And both of them Applying GIS and Telvin CSS can be used without ever leaving your HTML, which is super nice. Those have written a fairly detailed blog post on the same topic, explaining pretty much everything so if you wish check it out, it will be linked in the description below. And now let's jump on the computer and get started. Hey welcome everybody and let's get started. I've already created a project folder called menu and inside this project folder I have index.html and I have an image that we're gonna use for our background just so our website doesn't look too empty. Let's start by actually starting our website and I'm gonna be using the live server extension in Visual Studio Code purely because every time we make a change we won't have to refresh the browser. Awesome. Let's open the explorer here and start our website by doing right click and open live server and this should open in our browser. Let's remove the explorer here and start typing HTML. Let's select HTML5 and we can get started. So if I save this you will see that things are being formatted for me and this is because I'm using prettier and I've configured that every time I save the document you actually format the document for me instead of doing right click and format. That's all. Save this and let's go back to the browser and go to tailwindcss.com. If you click on get started you will see a couple of options to install tailwindcss and in my previous video where I've done a crash course on tailwindcss I used the tailwindcli which is a very good option but today I'm going to be using the play cdn purely because it's super easy to get started and mess around with tailwindcss but saying this it's actually not a good choice for prediction and this is because the cdn it's actually fairly large. I believe that is roughly 370 kilobytes and that is gzipped so it's a fairly large file don't use it for prediction but it's awesome for messing around. Now to get started with the cdn we need to do is scroll down and copy this script and we need to paste this script into our head element. So I'm going to go back to my website here index.html and paste this inside the head like so save it and we're done. We should be able to start using tailwindcdn so if we go back we could use this example action here so I'm going to copy this and then paste it inside the body and if we save this and go back let's go back to the website you will see if we refresh the first time you will see that we're getting the fancy font which is underlined awesome tailwind seems to be working and another proof we can do right click and inspect and then if we go to the body here you will see that we get loads of tailwind variables which is good cool for this tutorial we're going to be starting from our first and working or way up let me move this to the left side and let's start developing or navigation. So to start with let's remove the h1 and let's give our body like a little bit of a color or I'm going to be using an image just so it looks a little bit more interesting that's all and because we're going to have a flyout menu and a blurry background it might look a little bit better when we have content on the website so to do this what I'm going to do is use this image a as a background color as a background image for the body obviously you don't have to do this but and I'm going to be probably removing that at the end of the tutorial anyway so let's do that by doing a class name here background dash and in brackets like so we can do euro and inside here we can do in curly brackets we can do single quotes and put the name and the path of the image so this is going to be unsplash.jpeg and also because this is in the main directory here I don't have to specify a path so that should be absolutely fine and also I want this image to be covering the whole background when we're mobile so I'm just going to do background cover don't worry too much about this image I'm going to be removing it anyway but if you see some sort of an image here and if I toggle the mobile you will see that it's covering our cover which is what I want to okay let's start building our header so to do this I'm going to be using the HTML5 element header press enter and inside here is where we're going to be creating all elements for the header so we're going to have three main components so the first one is going to be the logo the second one is going to be the menu toggle and the third element is going to be the main navigation for like bigger screens so main navigation like so okay let's start by creating the logo for the logo we can just wrap everything in a link so a href and this is going to be slash which is going to be going to the home page of our website and then inside here we can paste our logo I don't actually have a logo so what I'm going to do is put logo like so and save so this is not going to look very pretty as you can see it's kind of smooth so what I'm going to do is I'm gonna give it a class name and make it a little bit bolder so let's do text of large and font bold like so save this go back and as you can see this is looking better now the next thing that I want to do is create the mobile toggle button as we're starting from mobile we create the mobile toggle first and then we create this one after so what's gonna happen in here let's create a button and inside this button I actually want to have a nice hamburger menu so what I can do is go back if you go to here icons.com just search for menu and I'm going to be using this the first one here so I'm going to copy the svg and paste the svg inside the button like so this is perfect this should come up in our website as you can see it's here maybe I can zoom in a little bit so you can see like so and if you wish to we can even add a little label here just say menu so you could put something like span and put menu and we can start this in a second as well so let's have a look this is looking great now as you can see the logo and the menu are here on the left side what I want to achieve is I want to have the logo on the left side and the menu to be on the right side I mean the toggle menu and the actual desktop menu to be on the right side so what I'm gonna do is I'm actually gonna start styling the header so let's go back to the header here and give it a class name so first of all for the header we can give it a background of white just so it looks a little bit better and maybe a drop shadow of small as you can see we definitely need some space between the on the left side and the top so what I'm going to do is give it some padding so padding on the y-axis could be something like four and padding on the x y axis could be eight you can see that we have padding on top bottom left and right which is what I want and now let's paste the items so they're not stuck together so this is on the left side and this is on the right side so what we can do is make the header a flex element so I'm going to put it here flex and I can justify stuff between now and now because this is a flex I can actually justify the elements between and this should push the elements as you can see on the left side and the right side but now I'm getting the problem where the logo is not in the middle and probably the menu wouldn't be in the middle as well but because it's filling the whole header it kind of has itself so I definitely want the menu to be kind of like middle aligned center aligned so what I can do is inside here we can do item center and save I think that's going to be pretty much it that's already looking great obviously the logo is a bit basic but that doesn't matter too much now let's concentrate on the actual button styling we can do exactly the same thing as the header so what I'm going to do for the button let's give it a class we can even give it a background if you wish it's up to you or border whatever makes it more visible and easy to use for this what I'm going to do is make it flex but because the foot is flex row I think that the elements are going to be next to each other so I don't want that I want this to be columns so what I'm going to do is flex and then call so that should fix the problem here as you can see and I want to centerline them um middle align them everything I want I want everything to be centerline in here so what I'm going to do is do items center and maybe align middle let's save this and as you can see this is looking a lot better obviously you don't have to have the menu maybe we can make the menu a little bit smaller so to do this on the span here we can give it a class and the class can be just text extra smaller let's have a look that looks quite nice I like it what I want to achieve next is when we go on a bigger screen we actually want to hide this so to do this we can go to the button so we can say after the flex here maybe we can say median screens hidden like so save this and if we go back you will see that when we go above above middle screens which is just about 760 pixels you will see that the menu is now disappearing which is exactly what I want so after this point we actually want to create another menu desktop menu and make it appear so we can use the reverse thing of what we've just done so let's start by creating the desktop menu now let's go back and we can create the around here so for the desktop menu we can wrap it in an F tag and inside here we can have an unordered list with a list element and an A element so the first thing that we need to do is let's start by writing two simple links so the first one let's give it a hash so it's not broken so the first one let's say it's her let's copy this by doing all shifting down and let's say about so we have two links let's save this and let's see what we get as you can see we have them here stacking up next to each other which is great but obviously we want to hide them on small screens so the first thing that we can do is on the nav here we can give it a class and the class name needs to be hidden as we're starting from mobile and then on medium screens so we're basically doing the reverse here on medium screens we actually want to display this as flex so look at what happens now if we save this no main menu here it's all working and if I go up this is gonna hide now and the other menu is showing which is exactly what I want now we definitely want to style the main navigation a little bit it looks it doesn't look so great so let me zoom in and we can style this a little bit better so basically one thing that I spotted right now is that I've got one list with the two links which is wrong we need to have the links in individual lists which is absolutely fine here so I can create another list and I can paste the link of about in here great if I go back as you can see we have the lists in here and they're stacking underneath each other and this is not what we want I actually want them in one single row to do this we can go to the URL and we can give it a class name and we can use flex and just give it a flex row like like so and this should solve our first problem as you can see but now the items are very close to each other so there are a couple of ways of actually doing this but what I'm going to do is just give him a gap of two so this is going to give him a little bit of a gap what I want to actually achieve is I actually want to give a pattern on each button itself on each link itself so it's easier to press obviously I've zoomed in a lot now and it's easy to press now but it won't be if it's like so so let's do that that needs to be the pattern needs to be done on the actual links so I'm going to have to do that individually let's start with the home first of all so for the home we can do inline flakes or block and I think both will work let's give each button a little pattern so this is going to have a pattern on the y-axis of two and maybe pattern on the x-axis of three let's also give this one a background of slate 200 and round it round it like so let's have a look we obviously have our home button here as active and that's why I wanted to give it a background color but maybe we can do hovers on the other ones so let me show you what I mean so we're going to have to do similar things for the about I'm going to give it a class name inline flex uh padding y of two padding y of two padding x of three and instead of background slate 200 which is the gray color we're going to do hover and this is going to be background slate of 200 and then round it like so let's save this and let's have a look so if I was to hover over about okay so hover background slate 200 okay so if I was to go back and refresh you will see that the uh when I hover about we have this nice hover effect which is absolutely fine exactly what I want and now we can literally duplicate the about button a couple of times so let's grab the you the list and copy it two more times and let's say maybe we can have articles and maybe we can have contact just for the demo let's go back all of them seem to work and they're all looking nice perfect now as our home is the active one we can also go back in here and on the link we can potentially give it an area current area dash current and this is going to be equals to three I'm not going to mess around with this too much obviously that needs to be then depending on what page it is so I'm not going to mess around with this too much but just so you know you can't have this for accessibility purposes let's now have a look at what's going on so we have all main navigation here perfect and when we scroll down it hides and we get all mobile navigation which is ideal exactly what we wanted so far and now we can concentrate on or fly out menu for the mobile okay let's start by creating all pop out navigation so I'm going to use nav and inside the nav we're going to have two main elements so the first one is going to be or an order list which will include the links and the second one is going to be a close button so let's start by creating the another list and this is going to be very similar or pretty much the same as this one here so what I'm going to do another list and inside the list we're going to have a list item and inside the list item we're going to have a link like so so the first one is going to be code home and let's create one more just for the example uncle about I'll add some more once we do the classes so I don't have to copy and paste them all the time but now if we go back you will see that we have home and about cool let's create the close button here as well so the close button is just going to be a standard button so this is going to be button and inside this button we are actually going to have an icon a close icon so if you go to hero icons and if you look for close you can see this x icon this one I'm going to choose so I'm going to copy the SVG and go back paste it in here and save if I go back you will see that we get the close button we can actually start styling this slowly starting from the top I want the navigation to be full width and full height also I want it to be at the top of everything else which means that we're going to have to bump up the z index let's convert this into a fixed element so it's floating on top of everything so let's do now class this is going to be fixed and this is going to start from top zero right zero bottom zero and left to zero now we won't be able to see this unless we put some sort of a background and in fact I'm just going to do a background blur which is going to be super cool when we finish the navigation so let's do a backdrop blur and small so we don't want it to be way too blur and also we want the setting this to be set to 10 I believe in tailwind tss it starts from zero to 10 20 and so on so I think this might work and if we go back you will see that everything is now blurred which means that the navigation is taking the full width and full height of the window here which is awesome this is exactly what we want now this unordered list I want to have from the left side to the right side but I want it to be only roughly 80 percent let's have a look at how we can do that so full the unordered list let's give it let's give it a class name and maybe we can start by position a absolute so absolute then we can do top zero right zero and bottom of zero now we don't have to put left in this one because I'm actually going to give it a width so if we go back you will see that the navigations is here on the right side if I hover over here the actual element might be able to zoom in you might be able to see a little bit better like so you will see when I hover over when I hover over this element is here on the right side which is fine so I need to give it a little bit of width and I want it to be roughly 80 percent so for this I went back to tailwind and if I put width and click on this so if you go to sizing and width the one that I'm going to use is going to be you have to scroll down a little bit but the one that I want to use is the 80 percent one which is this one here so I want to use the W10 slash 12 and this is 83 percent which should work perfectly fine for what I'm trying to achieve so I'm going to give it a width of that save it and let's have a look and as you can see now our menu is up to here which is fine obviously we don't have a background color so we can't tell but what I'm going to do I'm actually going to give it a padding y of 4 and then let's give it a background color of white let's give it a little bit of a drop shadow of 2xl and that might just work let's have a look okay this is already looking quite nice as you can see we have the shadow the background is white and separate from the foreground here so what I'm going to have to do now is potentially just style the lists and the links border links I want to give them a little bit of padding but that has to happen on the A just so they're easier to press so let me show you what I mean so first of all on the list we could potentially give them a border just like a little separate so let's do a class and this is going to be border and the border is going to be bottom and we can do border inherit and this is actually going to be very light gray color or you can just choose whatever color you wish so hopefully you will see that we have a very light gray color in there which is absolutely perfect and now we can start styling the actual buttons so for the buttons let's give them a class and first of all I want them to be a block element the reason for this is because I want them to be full width and nice and easy to press after this let's give them a button of four round and what else do we have to do and I think that might be it so obviously I have to copy this for the next element as well as well as just copy it just to see what's going to happen and we also need the border as well let me copy this for the list save it and we go back okay this is looking quite nice obviously you could have some sort of a nice heading or whatever you could make this a little bit better you could center line the items you could you can do so much in here but this is already looking fine the next thing I want to do let's copy the rest of the navigation so I'm going to have two more items so we had articles articles and we had what did we have contact cool we could potentially set this to be kind of like an active one so earlier we chose the background slate 200 and we had the area the area currently true so I could potentially do that in here as well let's give it a damn and let's give it the area currently true obviously we're not going to mess with this here but just so you have the example okay that works quite well but it looks like this is just selected which is true but I don't like it so I'm going to remove this okay and leave it as it is all right I think this is nice so the next thing that I want to do is obviously this we have a close button in here so this close button is basically when we open the navigation I want the user to be able to tap anywhere around here and to close the navigation so in order to do this I'm actually gonna have to position this button to be kind of like full width and full height and then we position the icon here on the top just so it's clickable to do this this year we'll have to have a bigger Z index just in case so we could potentially put Z index to this to be 10 as well so let's do that and for the button let's have a look how this is gonna go so first of all let's give it a class so the class is gonna be absolute and then we can start top zero right zero zero and left zero like so we could put a quick background color just to see whether this is working so I could do background slate or 400 let's save this and have a look as you can see this is working so we're getting the background color obviously I'm gonna remove any sec and now we just need to give the the actual icon some styling just so it's here and you could wrap this into another diff if you wish to or span or whatever but I'm just gonna but I'm just gonna do it straight away on this element so this is gonna have a class of absolute it's gonna be top two left two and I think that's here actually that should be fine let's save it and have a look okay this is exactly what I wanted the action icon and now as you can see the button is clickable it's full within here which is what I wanted this is why they were displayed as block and the actual x is not clickable here which is fine so technically speaking as you can see when I click the this section here it kind of turns a blueish which means that everything we've done so far is good so obviously I want to remove this background that was just to test like so and let's tidy things up okay I think that now is a good time to start writing or logic so we can open this navigation and close it with this button so first of all go to alpinejs.dev and grab the cdn so this is the one I'm going to be using so we can copy this we can paste the around here under our head we can put it in here as is the third and we can start using alpinejs so because all elements are separate or header and on navigation I'm actually gonna have to write the script on the body so let me show you how this works if we go back to the website and if you scroll down you will see this x data this is how we declare a new alpine component and it's data for block of html and then we can use click event and change the open to true and this is how we can manipulate the DOM and open and close things it's gonna make a lot of sense in a second this is actually a good example here of how we can dynamically hide data and show it in a second so I'm gonna be using this quite a lot and it's gonna make a lot of sense as we get started so first of all we need to declare a new alpine component and its data so to do this I'm gonna do on the body so behind here let's do x dash data and this is gonna be equals curly brackets like so and then I'm gonna call this one open menu and the open menu is gonna be set to false like so and this is gonna be the default value so when the menu open is set to false I want the actual nav to be hidden so what I can do here this is a very basic example and it's just gonna we're gonna go from here and develop it as we go so inside here I mean I can write anyway I can write it behind here what I can do is column hidden equals and an inside here exclamation mark open menu so if this is if the open menu is false then we want this to be hidden it's that simple look at this now if we go back or menu is no longer appearing this is because where is it where is it this is because we have hidden which is set to true now okay so now in order to be able to toggle this so it's not hidden if you remove the hidden obviously it should pop up and as you can see in order to be able to toggle this we need to be able to put an onclick event on this button here in order to do that we can go back to our .js and inside here they've got an example and also they've got another example inside here but let me show you if you were to go to the document and we put I think it's x dash on this is where they have the shorthand syntax we can literally do this on pretty much anything so we can put at click and then whatever we wanted to do so let's do that so what I'm going to do on the actual button here which is this one here so this is our hamburger menu I can put an onclick event behind here we can do at click equals open menu equals exclamation mark open menu so basically if we click on this it's gonna set open menu to true and if we click it back it's gonna set it to false which is the default value let's have a look let's go back click on this and as you can see it appears and obviously we can do exactly the same thing on the x button the close button so let me copy this click event and I can literally copy this on the close button here like so and this should be actually the same because if it's clicked it's gonna be true and if it's if you click again it's gonna set it to false let's have a look so I click the menu it opens I click around it's all good we're not breaking anything and if I click on the x the menu closes perfect so this is the very basic and of course if I go up nothing else is gonna break this is the main menu and for those of you who want to stop here that's absolutely fine but we also need to add a lot more to this so now I actually want to add some area labels these area labels are good for accessibility so let me go back and start adding them one by one so first of all on the actual button here this is the button that is expanding the menu so what we can do somewhere I mean it's getting a little out of hand with the glasses and everything here but maybe we can put on another line maybe we can just put the this logic on another line I know it's not the best but it is what it is so I can do column area expanded equals and then we can just put open menu because basically what I'm trying to achieve here is when we press the button I want this area expanded to say whether the menu was expanded or not and this is how the screen readers will know whether this is whether the menu is expanded or not so this is how it's gonna work and also let actually let's test this first of all so I'm gonna go back where's the button the button is here so we have is that the one now we need to go to we need to go to header we need to go to button and inside here you will see area expanded is equals to false so at the moment the menu is closed and if I click it look what happens it's set to true so this is how we want to do everything and let's finish this as well so we need to do one more thing in here and yeah it's because I saved and I'm using prettier it's gonna be breaking it but it doesn't matter too much and now let's do area controls so this is basically saying okay when we click this button what area are we trying to control so I'm gonna do let's say area controls and this is gonna be maybe mobile let's say mobile navigation like so just so it's a little bit more descriptive and now we need to give or mobile navigation this id so inside here now this is our main navigation sorry inside here the mobile navigation we need to give it an id so let's give it an id and this id is gonna be equals this mobile navigation so when we click it we know what's expanding so that's perfect so for the closed button we need to do exactly the same thing so we could potentially copy all of this and paste it on the closed button somewhere around here we already have the click event so area labels and this is gonna be doing exactly the same thing but the opposite obviously because we're gonna be closing in with the button cool I think let's test this super quickly I think this is working it's true false cool I think this is all good okay so this is a fairly basic menu as you can see it's working quite nice it looks nice but I also want to animate it so for those of you who don't want to carry on I think this is good enough but obviously I want to make it a little bit better and animate it so let's have a look at how we can do that or now pop out navigation instead of toggling hidden to true or false which will basically kill animation what we can do is let's put this on another line by the way just so we can see we can remove this and we can do something very similar so we can do column we can do class and this is gonna be equals and inside here we can use the open menu which is usually true or false and we can then use conditional ternary operator which is gonna be question mark and inside here we can choose what classes we want to add and what classes we want to remove like so with the columns so the class that I want to add if this is true if open menu is set to true is visible and if it's false I wanted to set it to invisible which classes from tailwind css like so save it now let's go back and this should work exactly the same way so if I put it out it's just gonna toggle the where is it the navigation that pops out to visible as you can see here and it removes it sorry it changes to invisible awesome this is exactly what I wanted so we can do exactly the same logic to animate everything so let's start with maybe we can animate this section here so I want this section to kind of like fly out so to do this this is the ul and we have it set to absolute which is fine and maybe we can use translate x full so what this is let me show you what this is so if we put translate x and then the amount here you will see so this is basically translating the actual ul we can translate it to the left to the right top and so on we can just move it and this is gonna allow us to do some really cool animations so let me show you how we can do this and as you can see and also as you can see we can add some hardware acceleration here which is pretty cool but I'm just gonna ignore this for now and just do the animation let's go back on the ul let's maybe do at the bottom so we can put on a new line and you can see what's going on what I'm gonna have to do here is I'm gonna have to do very similar thing like here so I'm gonna do class and I want to toggle so if open menu basically true or false then I want to add the ternary operator conditional operator and if it's true we want to set the translate to zero so this is going to be the default basically this is not going to change anything it's just going to be set to zero it's not going to move anything anywhere we can then translate there whoops we can then translate there translate dash x and we can use full like so because our menu as default is set to false this is going to be the default value which is going to move our url to the right side of the screen I believe and when we set it to true it's just going to bring it back to where the original position of the url is now this is actually not enough we also need to add some transition so we need to add a transition class in our class names similar on here so we can do transition all and this can be set to all there are obviously different transitions you can use but I think this one is going to just work fine so let's have a look if we press on it as you can see it coming out okay we do have one more problem and this is when we refresh the page the menu is navigating this is because alpine js is loading later on and it's adding the visible class to the navigation after so you might be thinking okay why don't you just add the invisible class to the navigation so if I was to copy this and add it here that should work but as you can see it's not popping up we don't have that error but if I was to open the menu it's not working this is because the class is not actually replaced we wanted this visible class to be replaced in the invisible so this is a little bit of a problem there might be a few ways of fixing it but I'm going to use this cloak function from alpine js so if you go to the documentation and you scroll down under directives if you click on cloak then you will see that they have a couple of methods here and I'm going to be using this one here so we need to add this as a css somewhere let's copy it and it doesn't really matter where we add it so maybe I can just add it in here to be honest really doesn't matter so let's put it as style and just put it here obviously if you have a style sheet just move that to the style sheet I don't have one now in here but so this should work as well anyways let's scroll down and now what we can do grab this x cloak and we can literally add this to all navigation so if I put x cloak hopefully I go back I refresh it's not coming up as before and if I press the menu it's not working because I didn't remove the invisible class so let's remove the invisible class and let's have a look so f5 it's not popping up which is good and if I press on the menu you will see that the menu is working and so on okay one thing that I totally forgot is to add area labels on the buttons and for the mobile menu toggle we need to add area label and this area label needs to say navigation menu and this is because this button is obviously toggling the navigation on mobile and then on the close button here that closes the navigation then we need to do the same at area label but this one needs to say close navigation menu as this button is actually closing the navigation menu perfect the last thing that I wanted to talk about is that at the moment we don't have any scroll on our website but if we did create some scroll let's create some fake scroll in here so I'm going to create a div and this div is going to have a style with the height of 800 pixels so it doesn't really matter let's create an h1 in here so normally on your website you will have a lot of content and you will have a scroll which is totally no now what's going to happen here is when I open the menu this scroll will still be there which is a little bit annoying so you might want to have the actual menu if you have a lot of items to scroll but you don't really usually want the body to scroll so what we're gonna have to do is we're gonna have to append a class to the body so the overflow is hidden and we've already done this a couple of times now with alpinejs so what we can do is go to the top here on the body and inside here let's do another line just so you can see and inside here we can do column class equals open menu like so and then we check whether the menu is open or the menu is closed if the menu is open we need to set overflow hidden which is a tailwind class and if the menu is closed we want to have the scroll obviously so the users can scroll so we can do overflow visible let's start it things up save this and let's have a look whether this works so if you go back to the website we have the scroll as normal then we click on the menu and the scroll is now gone which is perfect so that's pretty much everything from this tutorial and if i go to the desktop you'll see that the menu is still working and if i refresh it's all good so that's gonna be everything from this tutorial i know that it was a very detailed tutorial i hope that you enjoyed it i hope that you learned something new please consider subscribing to my channel give this video a like and let me know what do you think of Therwin CSS and AlpineJS in the comments below and i will see you in the next one