SICK Dropdown Navigation with Micro-Interactions (PURE CSS)

Key Takeaways

check out this really cool micro interaction it's basically a hover-based drop down navigation and I'm going to show you exactly how to do this by reverse engineering it from this website that I saw I think is really awesome so the tools of choice for this tutorial will be HTML and SAS that is it typically you might use gsap or the green talk animation platform for this sort of thing but I thought it'd be cool to show you how to do this to Pure CSS way so let's get started all right project structure real quickly we simply have an index.html here I already have the HTML written out I will overview this real quickly we're linking up a style sheet of CSS forward slash main.css that's in here we're using SAS for this so make sure you watch that SAS with the live SAS compiler and currently we only have two rule sets in the SAS we'll get that to that in a second so control B get rid of that sidebar and let's take a look at what's happening here so essentially we're starting off overall with this nav element and this nav element wraps around everything all right inside of there we have this big old beefy juicy link and inside of that a tag we have this section and it's really kind of just a a duplicate of each other right here and here it's everything's exactly the same with exception to this area hidden equals true so the reason we have two of these where it says work as the anchor text and work here as well is because we want to create that effect where we take this man class inner with transform translate Z and move it up so I like that effect that you saw you're going to see these two little work buttons right here which currently look ugly uh they're going to transition between those two pieces of text we also have the span class icon which is this thing right here it's currently all screwed up we're going to style that with CSS with just a simple SVG element inside and then we have our section class drop down with an unordered list with a list item and some links inside of it nothing exciting happening there there that's what that currently looks like over there so now let's get to the fun stuff so this is our CSS here um just a body background uh margin zero font family Poppins nothing exciting happening here of course you want to import that from Google fonts if this is our serious project and then we're just taking all of our links here and just making them color black and text decoration none okay so I one thing the first thing I want to do is fix this big old ugly looking drop down arrow to do that I'm not going to be doing anything too exciting we're just doing span icon here with a background of black uh we're taking a width in the height eye to um five n units the Border radius to 50 to round that off a position absolute I which is going to allow us to take this circular icon and position it to the right of its parent element which is going to be position relative I that's why we also have right here a right of zero padding point three and display Flex actually helps Center that SVG icon in the middle of it alright after that we're going to go ahead and work on the SVG itself because currently we don't really see it it's just this tiny little square this blip over here so we're going to do SVG we're going to do a width of 0.5 M units in a transition of transform 0.6 seconds now this is going to come into effect when we add a hover State on the nav element that will transition and basically rotate that Arrow upwards so this is what this is for so we get a nice smooth animation after that our inside of that rather we're going to take the path itself we're going to say stroke white and fill none because it does have this black fill in between the arrow itself can't really see it because it's so tiny but once we work on the next part we'll fix that all up so let's take our nav and what we're going to do is go right here now uh padding bottom we're going to set at 5m units and this is something you really can't see the effects of just yet but it has to do with uh giving the nav container itself some white space underneath that unordered list at the bottom then we're going to take our span.inner and we're going to say transform Translate y to zero and transition transform to 0.6 seconds all right so what this is going to do is um our span.inner if you recall up here is this element right here these two elements so initially we're setting the trans uh the transform translates y to zero and then we want to transition it once we change this value based on a future hover effect that we're going to add all right after that let's also take this this link right here let's get this working because we see work work and it's really small let's work with that so we're going to say and a so we're selecting the um the direct a tags right inside of here which simply means we're selecting this element from nav all right what we're going to say is display inline Flex we're going to go ahead and give this a height of 1.2 M units so we need explicit height because we're going to specify overflow hidden so these two properties right here work hand in hand to allow us to hide the type if that makes sense now we're going to take the flex Direction and make this column at this point now it's hidden there's actually a work text right around here but because we use overflow hidden in an explicit height we don't see it anymore after after that we're going to give ourselves a font size of five REM it's very big now it's starting to come and take shape you can see now that our down arrow is looking good we're going to go also and specify justify items Center that's going to Center things vertically there and then give ourselves a line height of 1.2 M units didn't really seem to change much but it actually centers this work text inside of the container uh itself and then we're also going to put position relative which is going to shift over that position absolute uh child element right there and then finally to push that over we'll do a padding right of 1.5 M units there we go now of course we don't have this interactivity yet because we don't yet have the hover State we'll get to that in a second but first let's get our drop down section styled up here so the the drop down section is right here section class drop down with the unordered list inside of it so section drop down inside of here we're going to specify a position absolute because remember we need to go behind everything so a z index negative one that will shift behind everything and then a background of white sorry type Gary type and then also a top of zero a height of 60 viewport height a width of a hundred percent a display of flex because we want to take the unordered list that's the only element inside of this current rule set and we want to position it with align items Flex end to the bottom as you can see right here all right after that we're going to go ahead and specify a transform of Translate Y of negative hundred percent I'm not going to actually we're not going to save this just yet I will come back to that in a second because I do want to take our unordered list and we're going to say list style type let's just get that styled first before we start hiding stuff margin bottom is going to be 5m units and then margin left will be 3M units and then finally we're going to take our list items and decided there we're going to have some other stuff but in a second we're just going to put an a element to take the font size to two Rems all right looking better we need to get this eye situated with the proper uh margin and such so we have to come back up here I forgot to add a margin of 1M unit there we go so this is what it's supposed to look like essentially for the most part once you hover over it and this slides down Okay so let's work on the actual interactivity in the micro interaction up here with the uh the work and getting those two pieces of work anchor text transitioning upwards so we're going to go ahead and come right here inside of our nav and inside of there we're going to have a just right here an an hover and span dot enter remember span.inner is right here these two elements so we're going to be transitioning those based on a hover so we simply say transform Translate Y of negative hundred percent look at that look how nice and smooth that is I love it okay after that we're going to take our icon so let's just copy this real quickly this is going to be span I dot icon which is this icon over here the SVG down arrow and oh actually no it's actually the black background behind it we're going to say background Gray all right so it just makes it gray on Hover let's also paste this this is going to be the I con SVG and we're this time we're not going to use translate we're going to use rotate Z and then we're going to change this to 180 degrees which will make the arrow point upwards there we go so now if I zoom up I'm not sure if this is going to work properly let's see ah move over there we go we could better see it awesome so now after that we need to make our drop down come down now right now we see it so we need to go ahead and take opacity zero right here on our list item and with that said we also have to put a couple of transition properties so transition transform uh we're gonna say 0.5 seconds now these are for the individual links right here so we also want to transition the opacity of 0.5 seconds as well we're going to give it a transition delay of 0.3 seconds because we don't want this uh them to animate instantly on Hover so we're going to delay this by 0.3 seconds and then we're going to do a transform of Translate y of 40 pixels all right so we're going to come up as well as well as fade in all right so we're going to save that and notice how it's hidden here now we need to take our section drop down and we have to give that that transform Translate Y and we're going to do the negative 100 which is going to push it to the top of the browser and we also want to transition that as well so that gives us a nice animation all right so let's go ahead and make that kind of come down based on Hover so to do that all we have to do is let's just copy this real quick change this to section.dropdown and this is going to be Translate Y there we go and this is going to be zero so let's try it now great so it's coming down but we don't have our links yet showing up so to do that all we have to do is and hover UL I and we simply say transform Translate y zero and then also opacity one because we want those to show up obviously all right so let's check this out now they're all coming in at the same time it's a very subtle animation it's going up 40 pixels and it's it's just coming in but they're all all the list items all four of them are coming at the same time so we can create a staggery animation very simply by doing inter-type so what we'll do is an end of type one transition delay 0.2 seconds shift alt down a few times so we get one two three four so we can select all of them and then just do three four and five respectively and there we go that is it let's take this and pull it out so we can kind of see it a little bit better oh it's my buddy Michael Mal which is I Twitter I was checking out all right there we go look at that now of course of course you know this could work well like as a section of your your landing page or you know in the the initial example that I showed you from which I gained this inspiration it could work in a nav bar of course you would just have to scale down the size of the type right here and the SVG and it could work uh great inside of an actual nav bar awesome awesome stuff