Dynamic Nested Dropdown Menu | HTML, CSS, Javascript (Part 1)

[Music] how about there guys this is for Louie back with another video and today I am going to show you how to create this nested navigation menu so and this is also responsive as you can see here so without any further ado let's get started with the video here I have created some files here first one is index dot HTML then script your J's then start our CSS and also an SVG file for the arrow icon so let's get started with some boilerplate HTML let's give it a name of nested navigation so initially I'm going to use a container here that nav and then for the mobile menu I am going to create this div with a span of menu than class of nav BTN let's open this with live server I import some font awesome let's see okay let's copy this one let's link my CSS and then the script differ so that the script will load later after the whole document loaded so pretty and then I come off font awesome with that is in fate parse let's see if it works it's working let's keep it on the site after nobleman is done then let's create menu as usual and the menus evil alike this one will be gallery than this one is services and then the last one will be about so as I am going to show you how to create nested navigation menu so let's put some nested items here with another you well then let's copy this one and this has gallery and suppose this one very big then on the services understood another evil with services a and services B so nested items are done let's put another nested item here that I can demonstrate multi-level nested items let's copy it is what of this and so it says okay my HTML is already done now let's move forward to the CSS part so as you can see here in the HTML under the character is Gallery and B and under services there is service air then again under services a there is two nested items so let's look forward to the CSS part now okay first of all let's we set some of the defaults of HTML 0 padding:0 sizing of products then the body tag let's do the phone Trinity of sense Sheriff nice idea after the the container part let's give it a margin of zero adult width of 75% to make it on the center of the page then the container height of 100 viewport so the first element is my mobile F which will be hidden initially so this pixel CSS their background color of dark gray and then of white display will be initially none but I will into that later mmm justifying constant pace between Allen items Center then give it a height of 35 pixel and adding of 20 pixels and font size of 20 bucks so you need to look like this if I use to testify if I use the display of flex I will do that later on my mobile version next the mobile in p.m. will be cursor:pointer then let's move forward to the medication menu give you a background of Cointreau and blow all the you weld all the list items would be like no bullet points then display flag to make it side by side also give it a background of cornflower blue then what else so let's see all the ink attacks and also all the li items give it a cursor of pointer and font size of pallet pixels and text decoration obviously none after that my items will be bearing with 15 people then a background-color once again come flower to color of white pratap display clock and let's copy this one pasted here and then on the anchor tag on let's give me the top and bottom 15 pixel and left and right of 25 pixels padding and the crown will be same colors will be white in this plane block no let's give a style on the hover state background color light gray the color of black maybe yep enough trip that okay I guess I should put some classes on the nested navigation buttons that we see which one has an aesthetic event this one let's put a class of drop-down it should be easier to use this when I work with JavaScript part [Music] also this one okay let's go back to the CSS part ground color of Darkrai padding-left 5px position at sleep with off 10:00 p.m. display will be non listening but I will not do that right now as you can see the the I am almost there but there is a lot of stuff still left line takeoff padding 10 pixel and background color of dark gray so okay Oh what else sorry the hovercraft let's keep it the same background as this one after that evasion affirmative intent privation of absolute stop give it five pixel left off hundred percent last year after that so let's cover of the immediate usual item and also on the active State let's get Rick display:block right so let's see if it's so working if someone's here so now let's work with I come Eric on for the nested nested items those who have both of these nested values so I will put the arrow icon and besides and those items true drop down a bit over then drop down what I'm doing here at this time so let's keep it background hi sweetie picked round position right parents sighs captain pixel from repeat and know a bit then color white so you can see with the listed items there is this down arrow of that let's move forward to the responsive part mix root of 768 mobile Neph will be display flex yep it's working the words put some animation to the active state of navigation transform translate y -1 and 20% the city's 0 transition 0.5 second is in and out on the toggle towel I mean when I click the navigation button then it will travel it will add the class double on the navigation menu will be written visible cross left Y of 0 city 1 and I don't need this one so well let's not do this right now let's check that later okay now it will give you the flex direction of column and list items over Oh hidden border and copy this thing they stick here then on the nested items under the list I mean when I click here this will trigger the nested items and give it a position of relative with of mine tippers padding on the top and bottom and on the left-hand right give it a 5% or transformed of translate X minus hundred percent this height 0 overflow:hidden transition of transform for Thomas it's okay after that again on the nested items on the second state of the nested items so there can be multi-level of necessary items so I am providing the second stage or third stage or fourth stage any of the any of the stages after the first stage it will work with this CSS so do the position of a new shield the background not white Darkrai top CFO and weight of 96% padding of top and very no sear on the top and bottom and 2% on the left and right after that let's copy this thing it will be seen for the responsive items and then let's copy this one and change only the background position 95% top and bottom and 50% on left and right its former this now on the active State let's give it a transform very strands from transform of translate X 0 and visibility:hidden not height and then hide top hundred percent it will work when I put some JavaScript here on the desktop menu it's working and then that's so I guess I need to put some JavaScript right there let's select some of the initial items the wondered query selector all all of the drop-down items weight anchor tags let's copy paste and the button then donation menu the button is for the mobile button and navigation is evil with the class of nav let's uncover this first is hidden so when I put even a listener of clay when I click on that button here I will trigger that class with toggle which I previously set on the CSS and see if it's working it's not working because of why this console oh it is not all it will be this is simpler limit so all will not work there okay this is working now let's do that for each elements on the navigation for each of the elements I will check next thing if each of the elements has a sibling of this evil then it will work otherwise it will not work so each of that element let's give it even listener of click and I will check if the window width of the window is less than 768 pixel and then I will add a class to the parent element which is which is this one crop down oh let's see what's working okay still not cooking okay what's wrong what's wrong with this one tom so I did something mistake here it will be cropped down and that's a visual train it's adding the class but not showing that and it means my CSS I have something wrong with that okay this will be taught some typing mistakes okay what else don't know pairing so much but in here let's remove that and I forgot to change this one it will be visible let's see open me up if you want you can add more nested items here let me show you suppose you want more items here right let's do this copy this one is it here services so a coughs Oh Grob don't check that out again it's working so so this is how you create a nested navigation menu and I will provide the links in my description there you can check it out and in my next part of this video I will show you how can you create dynamic nested item using PHP and MySQL so stay tuned and thanks for watching this video and please like this video and subscribe to my channel so that's it for today see you guys in the next video

Channel: Fazley Rabbi

Views: 1,789

Keywords: html, css, web developement, developement, frontend, frontend developement, technology, web, tutorial

Id: l_tG9cRCHK8

Length: 31min 43sec (1903 seconds)

Published: Sun Jun 07 2020