Creative Css Code: Accordion Animation with Simple Hand Coding

1. Trailer : Hello and welcome. My name is loose coddles. I'm an engineer and Web developer. For these new class, I will create a dynamic navigation menu where you can see all the power off HTML CSS properties and Flax box. If you are tired off creating the typical navigation menus, then this is the ideal curse for you. Let's do something you together that Bress is, and we'll surprise you, thinking you toe a higher level. Let's create, Transform and bill together an interactive and modern navigation menu that you can apply in your own websites or online business, So let's start. 2. Dynamic Navigation Menu / Image accordion slider (Part 1) - Layout Creation: Hello. Let's start with this new project, where I apply flex spots model and CSS effects to create a different type of navigation menu. The project was designed to be a blight, as the main menu often image gallery, and for this example, I choose a stockman. You dead presents for Image Cities buries London, New York and Madrid files that I f in my Made Fuller di Di is to wear four different Web pages for each one off the cities. And this page that I will create in the next few minutes work as initial menu death can link in the future to the four individual pages. It just a possible idea for using this page, but of course you can use it in many different situations. Now you see the finally out off the page in the brother that was designed with the proposal best over one off the sections, creating an over effect in the image and respective texts. This is just in overall picture about the single batch that now I'm going to develop. I start first with HTML cold. That is very simple, where I have a container and for flex items, insides, debt contained the image for each one of the cities. So I create my DIF with glass name, container and for thieves, wheat class name Mame containing and adding teg with the name off the cities, starting with Berries, London, New York and finally, Madrid's. As you see, HTML code is very, very simple. Now. Time for CSS to create the different styles, starting with CSS coat. First, I defined the style for the glass container that only need to display property with the flex value that defines this element as a flex container and enables the flex context for all direct Children's that are inside container Dave now creating the style for my flex items. First, I defined the width and I'd properties toe have the space occupied by each one of the flex items since I F. Four different images to occupy. Similar with I define this property, with the value off 25% off the view parts for each image off by 1/4 off the weeds for the eyes. I want each like sytem stoked by 100% of the view parts, and then I define text the line we'd center value for the text inside the flanks items to be central. At the moment, it's visible that we don't aren't their images in the flax items. That is the next step where I will use then child selector for each one off the flex items and death, a background image starting now with flex Item one that is my first child. I used for this element to property background image that receives inside who are l value that is inside the file name corresponding to the background image being for this first flex item image Berries dot j peg. You see now that the image does not appear all visible because that I mentioned is much bigger than the dimension off the flex item. To solve this situation, I used three different properties in our main class. First, the background position that receives the center value to center the image inside the flex item. Then the background repeats property that is used with the value no repeats that forced the image to appear on Lee ones. And finally, the property background size with the value cover Death resize the background image to say with same dimension off the flex item. After adding these three properties, you see that the background image is already completely visible inside the first Lex elements. I will now perform the same procedure for the remaining two reflex items. First, using the end child selector for the second child, where I'm going to have a new background image this time with the name off London dot jay Peak. The next image to insert inside the third flex item. We'll have a background image with the file new york dot j. Peg that is now visible after London, imaged that you put inside the second flex item and to finish we f r reflects item for where I have to file with the name Madrid's Dodge a peg to insert inside the respective flex item. We have then finalized this part off the project with all the inserted images and with size resized correctly using some background properties. 3. Dynamic Navigation Menu / Image accordion slider (Part 2) - Tuning Layout: The next step is defined textile as well over effects in order to resize the flex items, starting with text that I have inserted inside the adding Tex. I used the line I've property that allow vertical alignment on the tests. If I give a value off 100% of the view part to this property, that makes that a single line occupies all the ICT, 15% off the view part to be busy above the decks and the other 50% off the view port below the decks. If I enter a value less than 100% you see that dext will no longer be central. Then I will give a margin with the value zero and to wear background color to my having that, as I said, occupy the entire space off the flex item. I will use the background property with the RGB, a function to define color receiving values between zero and 2 155 for the tree para meters , respectively to 115 for rev. 145 for green and 46 4 blue and the last perimeter offer that defines the opacity of the Golar that I defined with three previous perimeters giving the value 0.32 alpha. After setting the ethnic background color that occupy all the space off the flex item, I assigned white value to the color of the debts and a fun family, the Piras with the font size 15 pixels. I have now completely defined my heading before going to the over effects. I want now to f an over effect on my adding element that changes the background color for this event. I used over selector toe affect adding elements using again background property with RGB a function this time with the values zero zero zero that defined the Bleck color and Alfa value 0.1, giving a very high capacity being visible, the changing in the background when I best over the flex items to win this parts, I used the letter spacing property with the value off far pixels to increase spice between letters and for the transition off. This effect not be very fast. I give value off one second to the transition effects. We have reached the end of the changes to the adding effects when I best miles over to finish. I want an over effect that makes the flex item, wrote his. We talk by 50% off the view parts to make that change. I create a rule for the main class and when I pass over the flex item, the wheat simply changes to 50% off the view part. Like I said and I apply a transition time off one second to this change situation that happens now when I pass over one off the flex items. At this point, I have 99% of the project then and you see when I pass over when image, the effect happens with a slight position that not happens when I stopped going over the flex item, making the transition off flex item with very fasts happening the same with line I've off the adding When returns to our additional value to get around the situation, I just have to define unequal transition time when the flex item returned to the first states where there is no over effects that was defined by the initial blast mine for the flex item with and similar situation with adding style to define this transition, I simply apply the transition property in our main class, with the value off one second and same situation for the ending, we have now reached to the end of the project with all effects created, like expected. Thanks for watching.