Css - How to create underlined transition on nav bar UL items

Specthildur
April 11, 2024
240 views
0 votes
2 Answers

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.

Tags: css

Answers

The properties need to be defined before the hover state is applied and the only transition once the element is hovered.

.nav-list li:not(:first-child):before {
  content: "";
  opacity:0;
  height: 5px;
  width: 100%;
  background-color: #444;
  position: absolute;
  top:100%;
  transition: ease-in-out 1s;
}

.nav-list li:not(:first-child):hover:before {
  opacity: 1;
}

.nav-list {
  list-style: none;
}

.nav-list li {
  position: relative;
}

.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):before {
  content: "";
  opacity: 0;
  height: 5px;
  width: 100%;
  background-color: #444;
  position: absolute;
  top: 100%;
  transition: ease-in-out 1s;
}

.nav-list li:not(:first-child):hover:before {
  opacity: 1;
}


/*Layout*/


/* Nav Layouts */

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

.nav-list li:first-child {
  justify-content: start;
}

.nav-list li:not(:first-child) {
  margin-right: auto;
  width: auto;
  gap: 5px;
}

<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>

You can use opacity and transform instead of ease-in-out in transition.

.nav-list  li:not(:first-child)::before {
    content: '';
    display: block;
    height: .1rem;
    width: 100%;
    background-color: #444;
    position: relative;
    opacity: 0;
    transition: opacity 300ms,transform 300ms;
}

.nav-list li:not(:first-child):hover::before{
   opacity: 1;
   transform: translate3d(0, 0.2em, 0);
}

@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)::before {
    content: '';
    display: block;
    height: .1rem;
    width: 100%;
    background-color: #444;
    position: relative;
    opacity: 0;
    transition: opacity 300ms,transform 300ms;
}

.nav-list li:not(:first-child):hover::before{
   opacity: 1;
   transform: translate3d(0, 0.2em, 0);
}

/*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>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – How to create underlined transition on nav bar UL items

Answers