Advanced Dropdown Menu – React & CSS Animation Tutorial for Beginners

I don’t log into Facebook often but the last time I did I was super impressed by its simple intuitive and fast new UI in today’s video I’ll show you how to reverse engineer some of its UI features specifically the top navigation bar is icon buttons and this multi-level animated drop-down will do it using HTML CSS and because I mentioned the word Facebook I’m legally obligated to use react in this demo in the following code tutorial you’ll learn how to create icon buttons with flexbox.

you’ll learn how to use CSS transforms to create sliding animations and fundamental concepts in react white component composition hooks and how to create CSS animations based on the state of your react application and I’ll throw in a bunch of other cool tips along the way if you’re new here like and subscribe and let me know if you want to see more beginner friendly UI tutorials like this in the comments before we get started let’s take a closer look at what we’re building today by the end of this video you’ll have several reusable react components that you can use for navigation and drop downs at the top we have a navbar component where the children are nav items represented at icon buttons these buttons have children that you can toggle on or off by clicking them when we click the carrot it renders our drop down component it contains multiple drop down items and the ones with a chevron can toggle to a secondary drop down menu notice.

How the hold menu slides out to the left and the new one comes in from the right and because the height of the two menus won’t be the same we’ll animate that as well now before we get started I’d just like to say this is a beginner friendly video but we move at a very fast pace on this channel so feel free to pause the video or slow down the playback speed as you follow along the first thing we’ll need is a react app assuming you have nodejs’ installed open up the command line and run npx create react app and of course the name of our app is Facebook to keep this demo simple I’m going to delete everything that’s not the index JSF KS or index dot CSS files the index.js file is your initial entry point

I’ll go ahead and remove the serviceworker stuff here then you can ignore this file for the rest of the video from there I’m removing all the boilerplate code from the app.js file will be using functional react components in this video when you see a function whose name starts with a capital letter you can think of that as a component the return value of a functional component is your UI or HTML or more specifically JSX JSX is not actually HTML but it’s a syntax extension for JavaScript that allows you to write HTML like templates in your components but before we get too deep into react let’s open up the index CSS file the CSS in this video is pretty generic.

so feel free to use it with your favorite framework I’m starting by defining some global CSS variables that we can think of as our theme and I’m also defining a speed variable that represents the animation speed which will come into play later in the video then below that I’m overriding the default unordered list style and then for our link elements I’ll match them to the text color variable in our color scheme that takes care of our initial setup now we’re ready to start building the top navigation bar react and especially functional components make it really easy to break your application down into a lot of small reusable pieces and this is a practice.

we call a component composition in our App J’s file we’ll define a new component named navbar and it returns JSX inside these parentheses we’ll go ahead and add an HTML nav element with an unordered list inside of it we can apply a CSS class to these elements using class name notice how this is different than regular HTML which is normally just class and we’ll apply a class for navbar and navbar now have to make these elements easy to style now if we go up to the JSX for the app component we can declare this navbar there and notice how we declare it almost like a regular HTML element.

now I’m going to open up the CSS here on the right side and we’ll apply some styles to the navbar the navbar is basically just a rectangle that sits at the top we’ll give it a fixed height based on our nav size variable and then some coloring and padding the unordered list that sits inside the nav is the container for the children which we’ll set up as a flexible row we want it to take up 100% of the width and the height of the parent and then we’ll set the display property to flex and we could have all the children’s start on the right-hand side instead of the default left side by saying justified content flex and now at this point we have some actual UI that we can take a look at go ahead and run NPM start from the command line to serve your app it should open in the browser automatically and you should see this horizontal gray bar up at the top and now the question becomes how do we add items or children inside the navbar in react components can pass data and UI elements to each other using props add props as an argument to your function and then you can reference it in your template props has a built in property name children and it will project or reference any UI elements.

you pass in inside of the actual of that component for example if we go up to our navbar and add a list item inside of its tags it will be rendered in the location that we called prop stock children so if we open up the browser you should see the letter X here up in the top left corner but this gives us a great opportunity to create a new component called a nav item our nav item component will also take props and we’ll set up a list item as its main element and then we’ll nest in a or link element inside of it the a element represents the icon button so we’ll give it a CSS class accordingly now this time instead of referencing props children.

we’re going to pass our own custom prop called an icon instead of adding UI elements inside of the tags we reference our icon prop as we would with a regular HTML attribute so props allow you to pass data from the parent to the child similar to how you might pass an argument to a JavaScript function because remember your react component is just a JavaScript function for now I’m just going to pass some emoji icons so we can focus on the CSS each nav item is a box that is slightly smaller than the nav bar itself an easy way to manage its width is to calculate it dynamically so we’ll take our nav size variable which is 60 pixels and we’ll multiply it by 0.08 or 80% with the calc function now each of these now items should display their children directly in the center we can easily do that with flexbox by aligning items to the center and just find the content to the center so that gives us a box with its children in the middle but now we want an icon button with a circular shape I’m going to scope a new CSS variable to this class called button size it also uses the calc function to give us a size that is exactly 50% of the original navbar size and now we can apply that value to the width and the height of this class.

then to make the shape circular we can apply a border radius of 50% which creates a perfect circle now inside of this circle we also want to Center the children directly in the middle so again we’ll set up a Flex container and a line and justify everything to the center if you open your app in the browser you should now see these three icon buttons here at the top as an added touch we might want to change the color slightly when these items are hovered over an easy way to handle that is with a CSS transition we’ll apply it to the filter property and set it to a duration of 300 milliseconds then we’ll target the hover cito selector on the icon button and we’ll filter its brightness to 1.2 to make it slightly brighter as we have over it however in the full demo and on Facebook.

you’ll notice that it’s using SVG icons you can find all the SVG s I used in the source code on github they live in this icons directory but how do we use these SVG icons and react it’s actually very easy to use an SVG icon as a react component directly in your code at an import statement to the top of the file that references the path to your SVG icon you import a react component and then name it whatever you want using the as keyword and then you can do the same thing for all the other SVG is that you want to use in your code from there we can go back down to our navbar and instead of using an emoji we’ll use braces to pass on one of our SVG components directly and now your icon buttons can handle both SVG graphics and emoji strings equally but your SVG’s don’t inherit a size by default.

so we’ll want to go ahead and set a fixed width and height for them and now if we preview things in the browser we should have an icon nap that is very similar to the actual facebook UI and now we’re ready for the fun part building an animated multi-level drop-down menu now the reason we’re not passing the icon as a direct child of an ad item is because some of our nav items might have a drop-down menu and we want that to serve as the children.

Leave a Comment