
Dropdown with SASS/CSS
This tutorial will make dropdown classes for us to use in our code. We use the CSS preprocessor SASS. SASS allows us to extend our CSS, which will be more organized easily, but this is also a CSS Tutorial because we will not use many of the complex SASS features.
¶Base Class
So let us start the base class for the dropdowns. We start by defining a color variable that will hold the background color.
$color: rgb(214, 238, 255)
After that, we select all the elements where the string dropdown
appears in the class attribute. Later we will see why we do this way.
[class*="dropdown"]
We then set the position of these items to relative. This is important because the dropdown panel will be placed using absolute
. We also give it some padding, and we set its placement to inline-block
. We also set the font family, but this is just, so it looks nicer.
position: relative
padding: 1em
display: inline-block
font-family: 'Segoe UI', sans-serif
Continuing, we select the first immediate child of the dropdown class, make it bold with font-weight: 600
, and set a transition for the transform. This element should be the header of the dropdown, which is the text you hover over for the dropdown panel to appear.
/* The Header of the Dropdown */
> *:first-child
transition: transform 0.25s ease
font-weight: 600
Then if we hover over the dropdown class, we set the background color as the value of the variable we defined at the beginning. We also add some rounded corners at the top. Then we also translate the first immediate child up by seven pixels, which will make a nice little animation in conjunction with the transition.
&:hover
background: $color
border-radius: 10px 10px 0 0
> *:first-child
transform: translateY(-7px)
After that, we finally style the dropdown panel, which will be, in our case, just a ul
element, but it could be any. We will set its display property to none, so it does not appear by default. Then we also set its minimum width to 100%, so it does not look bad. We also add a background color and padding.
/* The Dropdownpanel that appears */
ul
display: none
min-width: 100%
background-color: $color
padding: 1em
We remove the dots before the list items by setting the list-style-type
property to none
. We remove any margin, and we set the position to absolute. This will cause the element to break from the flow, enabling us to place it with top
, bottom
, left
, and right
, we have to. That is what we do, we set top to 100%, so the panel appears at the bottom of the parent element and left to 0, so it sticks to the left side of the parent. We also round the panel at the bottom and top right and set the z-index
to 99 to ensure that the panel appears in front of any other elements.
list-style-type: none
margin: 0
position: absolute
top: 100%
left: 0
border-radius: 0px 10px 10px 10px
z-index: 99
We also remove the list item indentation by setting padding-block-start
to zero.
li
padding-block-start: 0
Last but not least, we reset the display property of the list in case we hover over the dropdown class, which will show it.
&:hover ul
display: unset
¶Right dropdown
The class above will make a dropdown panel sticking to the container’s left, but maybe we want the dropdown to stick to the right. So for the right panel, we unset the left
property and set right
to zero. Because of how we selected the classes above, we can now make a small class called dropdown-right
which will have all the properties of the other CSS but overwrite some of them.
/* If the dropdown should start on the right side */
.dropdown-right ul
border-radius: 10px 0px 10px 10px
left: unset
right: 0 !important
text-align: right
¶Different panel widths
Maybe you would also want the panel to be large for some dropdowns, so we now make a small loop. We first define two lists. One holds the values of the widths, and the other holds their respective names.
/* Three Different widths for the dropdown panel */
$dropdown-width-values: 100px, 200px, 300px
$dropdown-width-names: 'slim', 'normal', 'wide'
After that, we zip the two lists to make one.
$dropdown-widths: zip($dropdown-width-names, $dropdown-width-values)
Then we loop over the list and do some insertions.
@each $name, $width in $dropdown-widths
.dropdown-#{$name} ul
min-width: $width
¶showcase
Now lets look at our classes in action. Keep in mind we looked at SASS compiling in this article.
¶Conclusion
Excellent! You have successfully created a dropdown class using SASS/CSS code!
¶Full Code
$color: rgb(214, 238, 255)
[class*="dropdown"]
position: relative
padding: 1em
display: inline-block
font-family: 'Segoe UI', sans-serif
/* The Header of the Dropdown */
> *:first-child
transition: transform 0.25s ease
font-weight: 600
&:hover
background: $color
border-radius: 10px 10px 0 0
> *:first-child
transform: translateY(-7px)
/* The Dropdownpanel that appears */
ul
display: none
min-width: 100%
background-color: $color
padding: 1em
list-style-type: none
margin: 0
position: absolute
top: 100%
left: 0
border-radius: 0px 10px 10px 10px
z-index: 99
li
padding-block-start: 0
&:hover ul
display: unset
/* If the dropdown should start on the right side */
.dropdown-right ul
border-radius: 10px 0px 10px 10px
left: unset
right: 0 !important
text-align: right
/* Three Different widths for the dropdown panel */
$dropdown-width-values: 100px, 200px, 300px
$dropdown-width-names: 'slim', 'normal', 'wide'
$dropdown-widths: zip($dropdown-width-names, $dropdown-width-values)
@each $name, $width in $dropdown-widths
.dropdown-#{$name} ul
min-width: $width
Leave a Reply