Using CSS3 to shift a div in relation to another moving div

Question

Using CSS3 to shift a div in relation to another moving div

Take a look at this JSfiddle. I am trying to make the "Push this!" div move when the menu resizes/expands on hover. Is it possible to achieve this effect using only CSS?

<div id="nav">
<ul>
    <li><a href=""><span>01</span> HomePage</a>
    </li>
    <li><a href=""><span>02</span> SubPage 1</a>
    </li>
    <li><a href=""><span>03</span> SubPage 2</a>
    </li>
    <li><a href=""><span>04</span> SubPage 3</a>
    </li>
    <li><a href=""><span>05</span> SubPage 4</a>
    </li>
</ul>

<div id="pad">push this!</div>

jquery html css

Answer 1

Answer №1

To achieve the desired effect, adjust the style of #nav from position: absolute to float: left. This will ensure that #nav remains within the document flow and can impact the positioning of other elements.

Once this change is made, remove the padding-left property from #pad:

Fiddle 1

You don't need jQuery to achieve the same outcome. Simply add the following CSS:

#nav {
  width:35px;
  transition: width 0.5s;
}

#nav:hover {
  width: 200px;
}

Fiddle 2

Answer 2

To achieve the desired effect, adjust the style of #nav from position: absolute to float: left. This will ensure that #nav remains within the document flow and can impact the positioning of other elements.

Once this change is made, remove the padding-left property from #pad:

Fiddle 1

You don't need jQuery to achieve the same outcome. Simply add the following CSS:

#nav {
  width:35px;
  transition: width 0.5s;
}

#nav:hover {
  width: 200px;
}

Fiddle 2

Answer 3

Answer №2

If you're eager to utilize jQuery as shown in the jsFiddle example, then try this out:

$(function () {
$('#menu').hover(function () {
    $(this).animate({
        width: '180px'
    }, 400);
    $('#content').animate({'padding-left':'180px'},400);
}, function () {
    $(this).animate({
        width: '30px'
    }, 400);
    $('#content').animate({'padding-left':'30px'},400);
}).trigger('mouseleave');

});

Answer 4

If you're eager to utilize jQuery as shown in the jsFiddle example, then try this out:

$(function () {
$('#menu').hover(function () {
    $(this).animate({
        width: '180px'
    }, 400);
    $('#content').animate({'padding-left':'180px'},400);
}, function () {
    $(this).animate({
        width: '30px'
    }, 400);
    $('#content').animate({'padding-left':'30px'},400);
}).trigger('mouseleave');

});

Using CSS3 to shift a div in relation to another moving div

Answer №1

Answer №2

Similar questions

Retrieve the data contained within a displayed embed tag that includes a src attribute

Banner with video background (not taking up the entire page)

What is the best way to link data from SQL Server to an HTML webpage?

How can you transform attribute and value pairs from a DOM element into a JavaScript object?

Background color vanishes (occasionally) on the contact section of my website when viewed in Chrome

What are the steps to increase the size of the search bar?

Stopping a Bootstrap Modal Closure When Validation Errors are Present

clearInterval function is not functioning

Measuring Metrics for Twitter Shares, Facebook Reactions, and Google +1's using Jquery and AJAX

Spooky results displayed on website from NightmareJS

The login form for the MVC website will only auto-submit on IE

Eliminate the display of image thumbnails located at the bottom of images

Received an unexpected GET request while attempting to modify an HTML attribute

Safari's problem with CSS transitions

Floating footers with centered content - they remain aligned in the center even when zoomed out

Customizing the COREui Admin Template to replicate the demo's design

The side menu in Bootstrap dropdown experiences a one-time functionality

Exploring CSS Shapes: Unveiling the secrets behind the star. What's the mechanism at

Need help with setting or resetting dialog radio buttons group?

After the page reload, the text box remains filled and does not reset to null