Expand a div in navigation using JQuery

Question

Expand a div in navigation using JQuery

Check out this code snippet:

.container {
  width: 150px;
  height: 100px;
}

.test {
  color: white;
  
  background-color: red;
  width: 100%;
  height: 25%;
  transition: height ease 1s;
}

.test:hover {
  height: 100%;
}

<div class="container">
  <div class="test">Hover Here</div>
</div>

This code shows a simple div inside a container that expands to 100% when hovered over. I'm looking to do something similar in a navigation menu, like the one on .

My goal is to have the main div expand from 0% to 100% in height when a user hovers over the container div (not the main box itself).

I've tried using JQuery by adding a ".hovered" class, but haven't had any success. Does anyone know how to code this effect?

I would greatly appreciate any help. Thank you!

javascript jquery css

Answer 1

Answer №1

Check out this presentation:

Commonalities between the two code snippets:

The containers utilize flex display to create a responsive navbar container, with each item spanning a width of 20% (modifiable).
Each item (with relative positioning) contains two sub-containers (with absolute positioning), one for the blue transitioning background (z-index:1) and the other for the fixed text in the front (z-index:2).
The z-index ensures that the background transitions behind and the text remains fixed in front. When transitioning from bottom to top, we set the bottom:0 and height:0%; on the overlay class.
On hover, the height transitions from 0% to 100%.

Divergence between the code snippets:

In the first code snippet, individual items expand on hover using .items:hover .overlay.
Contrastingly, in the second snippet, all items expand together when the container is hovered, using
```
.container:hover > *.items> .overlay
```
(">" indicates a direct child selector).

First: Hovering over each individual item expands the overlay.

.container {
  width: 100%;
  display: flex;
  height: 80px;
  background: gray;
  justify-content: center;
  align-items: center;
}

.items {
  flex: 0 1 20%;
  height: 100%;
  margin-right: 5px;
  position: relative;
  overflow: hidden;
}

.overlay {
  position: absolute;
  background: blue;
  z-index: 1;
  width: 100%;
  height: 0%;
  bottom: 0;
  transition: all 0.5s ease-in-out;
}

.item-text {
  position: absolute;
  text-align: center;
  color: white;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
}

.items:hover .overlay {
  height: 100%;
}

.container {
  width: 100%;
  display: flex;
  height: 80px;
  background: gray;
  justify-content: center;
  align-items: center;
}

.items {
  flex: 0 1 20%;
  height: 100%;
  margin-right: 5px;
  position: relative;
  overflow: hidden;
}

.overlay {
  position: absolute;
  background: blue;
  z-index: 1;
  width: 100%;
  height: 0%;
  bottom: 0;
  transition: all 0.5s ease-in-out;
}

.item-text {
  position: absolute;
  text-align: center;
  color: white;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
}

.container:hover > *.items> .overlay {
  height: 100%;
}

<div class="container">
  <div class="items">
    <div class="overlay"></div>
    <div class="item-text">Home</div>
  </div>
  <div class="items">
    <div class="overlay"></div>
    <div class="item-text">About</div>
  </div>
  <div class="items">
    <div class="overlay"></div>
    <div class="item-text">Contact</div>
  </div>
  <div class="items">
    <div class="overlay"></div>
    <div class="item-text">Other</div>
  </div>
</div>

Answer 2

Check out this presentation:

Commonalities between the two code snippets:

The containers utilize flex display to create a responsive navbar container, with each item spanning a width of 20% (modifiable).
Each item (with relative positioning) contains two sub-containers (with absolute positioning), one for the blue transitioning background (z-index:1) and the other for the fixed text in the front (z-index:2).
The z-index ensures that the background transitions behind and the text remains fixed in front. When transitioning from bottom to top, we set the bottom:0 and height:0%; on the overlay class.
On hover, the height transitions from 0% to 100%.

Divergence between the code snippets:

In the first code snippet, individual items expand on hover using .items:hover .overlay.
Contrastingly, in the second snippet, all items expand together when the container is hovered, using
```
.container:hover > *.items> .overlay
```
(">" indicates a direct child selector).

First: Hovering over each individual item expands the overlay.

.container {
  width: 100%;
  display: flex;
  height: 80px;
  background: gray;
  justify-content: center;
  align-items: center;
}

.items {
  flex: 0 1 20%;
  height: 100%;
  margin-right: 5px;
  position: relative;
  overflow: hidden;
}

.overlay {
  position: absolute;
  background: blue;
  z-index: 1;
  width: 100%;
  height: 0%;
  bottom: 0;
  transition: all 0.5s ease-in-out;
}

.item-text {
  position: absolute;
  text-align: center;
  color: white;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
}

.items:hover .overlay {
  height: 100%;
}

.container {
  width: 100%;
  display: flex;
  height: 80px;
  background: gray;
  justify-content: center;
  align-items: center;
}

.items {
  flex: 0 1 20%;
  height: 100%;
  margin-right: 5px;
  position: relative;
  overflow: hidden;
}

.overlay {
  position: absolute;
  background: blue;
  z-index: 1;
  width: 100%;
  height: 0%;
  bottom: 0;
  transition: all 0.5s ease-in-out;
}

.item-text {
  position: absolute;
  text-align: center;
  color: white;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
}

.container:hover > *.items> .overlay {
  height: 100%;
}

<div class="container">
  <div class="items">
    <div class="overlay"></div>
    <div class="item-text">Home</div>
  </div>
  <div class="items">
    <div class="overlay"></div>
    <div class="item-text">About</div>
  </div>
  <div class="items">
    <div class="overlay"></div>
    <div class="item-text">Contact</div>
  </div>
  <div class="items">
    <div class="overlay"></div>
    <div class="item-text">Other</div>
  </div>
</div>

Answer 3

Answer №2

ul{
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  display: flex;
}

ul li{
  border: 1px solid #d3d3d3;
  text-align: center;
  height: 100px;
  width: 100px;
  margin-right: 4px;
}

ul li a{
  color: #000000;
  text-decoration: none;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

ul li a:after{
  content: '';
  position: absolute;
  background: lightblue;
  left: 0;
  bottom: 0;
  height: 0%;
  width: 100%;
  z-index: -1;
  
}
ul li a:hover:after{
  animation: bounce 1s ease-in-out forwards;
}
@keyframes bounce {
  0% {height: 0%}
  20% { height: 100%}
  55% { height: 95%}
  100% {height: 100%}
}

<ul>
  <li><a href="#">Lorem, ipsum.</a></li>
  <li><a href="#">Saepe, asperiores!</a></li>
  <li><a href="#">Vitae, expedita?</a></li>
  <li><a href="#">Dicta, quo.</a></li>
  <li><a href="#">Sed, et.</a></li>
</ul>

Answer 4

ul{
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  display: flex;
}

ul li{
  border: 1px solid #d3d3d3;
  text-align: center;
  height: 100px;
  width: 100px;
  margin-right: 4px;
}

ul li a{
  color: #000000;
  text-decoration: none;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

ul li a:after{
  content: '';
  position: absolute;
  background: lightblue;
  left: 0;
  bottom: 0;
  height: 0%;
  width: 100%;
  z-index: -1;
  
}
ul li a:hover:after{
  animation: bounce 1s ease-in-out forwards;
}
@keyframes bounce {
  0% {height: 0%}
  20% { height: 100%}
  55% { height: 95%}
  100% {height: 100%}
}

<ul>
  <li><a href="#">Lorem, ipsum.</a></li>
  <li><a href="#">Saepe, asperiores!</a></li>
  <li><a href="#">Vitae, expedita?</a></li>
  <li><a href="#">Dicta, quo.</a></li>
  <li><a href="#">Sed, et.</a></li>
</ul>

Answer 5

Answer №3

Here is some code I created:

//my HTML code

<ul>
   <li><a href="">Products</a></li>
   <li><a href="">Services</a></li>
   <li><a href="">Support</a></li>
</ul>

//My custom CSS using Sass

ul {
  list-style:none;
  background:green;

  li {
    display:inline-block;
    padding:15px;
    position:relative;

    &:before {
      position: absolute;
      content: "";
      width: 100%;
      height: 0%;
      left: 0;
      bottom: 0;
      background:purple;
      transition: height ease-in-out 0.7s;
    } 

    a {
      z-index:2;
      position:relative;
      color:black;
    }

    &:hover {
       &:before {
          height: 100%;
       }
    }
  }
}

Answer 6

Here is some code I created:

//my HTML code

<ul>
   <li><a href="">Products</a></li>
   <li><a href="">Services</a></li>
   <li><a href="">Support</a></li>
</ul>

//My custom CSS using Sass

ul {
  list-style:none;
  background:green;

  li {
    display:inline-block;
    padding:15px;
    position:relative;

    &:before {
      position: absolute;
      content: "";
      width: 100%;
      height: 0%;
      left: 0;
      bottom: 0;
      background:purple;
      transition: height ease-in-out 0.7s;
    } 

    a {
      z-index:2;
      position:relative;
      color:black;
    }

    &:hover {
       &:before {
          height: 100%;
       }
    }
  }
}

Expand a div in navigation using JQuery

Answer №1

Answer №2

Answer №3

Similar questions

Can you please explain what shape-id denotes and provide guidance on locating it within a CSS file?

What are the methods for choosing various boxes using the UP/DOWN/RIGHT/LEFT arrow keys?

Passing the results of sequelize through express after the completion of a forEach iteration

Use jQuery's `on` method in conjunction with `load` to dynamically execute a function

When attempting to specify the path in the angular.json file, Angular encounters difficulty accessing Bootstrap from the node_modules directory

Configuring rows in React datagrid

As soon as I inserted the image, the text vanished into thin air

Vue.js not responding to "mousedown.left" event listener

Issues with Jquery Div sliding transitions from right to left are not functioning correctly

The absence of multiple lines on the x-axis in the linear chart was noticeable

The image is being loaded onto the canvas and is being resized

Using type annotations is restricted to TypeScript files only, as indicated by error code ts(8010)

Troubleshooting Problem with the JQuery Cycle Plugin

Updating Angular model remotely without relying solely on the controller

"What is the significance of the .default property in scss modules when used with typescript

Angular causing alignment issues for items not centered

The CSS styling is not being rendered correctly on the AngularJS HTML page

The function is missing from the object, leading to a script error with jQuery

Show a table containing dynamic information, featuring 10 rows for each column. The header should be present for each additional column that is added

The function generalChannel.send does not exist