Umer Hassan Umer Hassan - 6 months ago 11
HTML Question

Apply transition by using min-width and max-width together

I have a nav bar for which I'm trying to make the toggle button work, my toggle button is a checkbox, so following is the css to make the navbar (

#navbar-left
) appear when you click on the checkbox

#navbar-left{
max-width: 0;
min-width: 0;
width: 0;
transition: max-width 0.2s ease;
transition: min-width 0.2s ease;
}

.nav-trigger:checked ~ #navbar-left {
max-width: 200%;
min-width: 20%;
width: auto;
float: left;
}


where
.nav-trigger
is the check button, I have been able to either close the navbar smoothly using transition or open the navbar smoothly using transition by applying min-width or max-width at a time, but how can I use them both to open and close the navbar smoothly using the transitions.

I cannot simple apply the transitions using
width
property because I've to always set the
width
property to auto.

What would be the best solution or any alternate way to achieve this?

Answer

should be written within one single rule :

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Syntaxe

/* Apply to 1 property */

/* property name | duration */

transition: margin-left 4s;

/* property name | duration | delay */

transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */

transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */

transition: margin-left 4s, color 1s;

/* Apply to all changed properties */

transition: all 0.5s ease-out;

/* Global values */

transition: inherit;

transition: initial;

transition: unset;

#navbar-left{
 max-width: 0;
 min-width: 0;
 width: 0;
 transition: max-width 0.2s ease,min-width 0.2s ease;
}

.nav-trigger:checked ~ #navbar-left {
  max-width: 200%;
  min-width: 20%;
  width: auto;
  float: left;
}
Comments