How to create underlined transition on nav bar UL items

ghz 8months ago ⋅ 114 views

Attempting to create an underline transition on a navigation menu with a 2s delay transition in-out. However the underline will just transition in instantly without the 2s delay. Created with skipping the first li item and only hovering it on the rest in mind. New to creating these styles so apologies in advance.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap')





/* Resets */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


/* Styles */ 


/*Nav Styles*/
.nav-list {
    list-style: none;
}

.nav-list li > a{
    text-decoration: none;
    font-family: "Noto Sans", sans-serif;
    font-size: 1.3rem;
}

.nav-list li:hover {
    color: rgb(79, 149, 211);
}


.nav-list  li:not(:first-child):hover:before {
    content: '';
    display: block;
    height: 5px;
    width: 100%;
    background-color: #444;
    position: relative;
    transition: ease-in-out 1s;
}

/*Layout*/


/* Nav Layouts */
.nav-list {
    display: flex;
    gap: 5rem;
    margin-top: 20px;
}

.nav-list li:first-child {
    flex-basis: 70%;
    justify-content: start;
}

.nav-list li:not(:first-child) {
    margin-right: auto;
    flex-basis: auto;
    width: auto;
    gap: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <div>
        <nav>
            <ul class="nav-list">
                <li><a href="#">Budget Calculator</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">NA</a></li>
                <li><a href="#">NA</a></li>
            </ul>
        </nav>
   </div> 
   <div>
    <main class="main-container">
        <div class="expense-add-container"></div>
        <div class="btn-container"></div>
        <div class = "budget-container"></div>
        <div class="calculator-container"></div>
    </main>
   </div> 
</body>
</html>

Attempted to use the code below, which creates the hover but not the delayed transition.

.nav-list  li:not(:first-child):hover:before {
    content: '';
    display: block;
    height: 5px;
    width: 100%;
    background-color: #444;
    position: relative;
    transition: ease-in-out 1s;
}

I did see this post - transition ease-in-out; is not working - however even when using opacity it still did not work. It will just pop in without any transition ease at all.

Answers

To achieve the desired delayed transition effect on the underline when hovering over the menu items, you need to adjust the CSS transition property. Currently, you have set the transition duration to 1 second (1s), but you mentioned that you want a 2-second delay in and out. You can achieve this by using the transition-delay property.

Here's how you can modify your CSS:

.nav-list  li:not(:first-child):hover:before {
    content: '';
    display: block;
    height: 5px;
    width: 0; /* Start with a width of 0 */
    background-color: #444;
    position: relative;
    transition: width 2s ease-in-out; /* Transition width property over 2 seconds */
    transition-delay: 2s; /* Delay the transition by 2 seconds */
}

With these changes, the underline will have a 2-second delay when appearing and disappearing upon hover. Adjust the transition duration and delay values as needed to achieve the desired effect.

#css