CSS animation for expanding and collapsing a section of the sidebar

I am attempting to recreate the animation effect seen in the gif below using CSS to open and close the sidebar, but I am having trouble achieving it.

https://i.sstatic.net/DFnhP.gif

I have tried using hover but it is not working as expected.

(You can see my attempt on this codepen)

(edit) --> Relocated the snippet code here:

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #f4f6f9;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

:root {
  --sidebar-color: #435f7d;
  --sidebar-color-header: #384d60;
  --item-hover: #212121;
  --item-click: #9CCC65;
}


.toolbar {
  height: 64px;
  width: 100vw;
  background-color: #607d8b;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sidebar {
  position: absolute;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: width 0.15s linear;
}

.sidebar:hover {
  width: 240px; 
}

.sidebar-0 {
  height: 64px;
  background-color: var(--sidebar-color-header);
}

.sidebar-1 {
  padding: 0px 10px 10px 10px;
  background-color:  var(--sidebar-color);
}

.item {
  background-color: var(--sidebar-color); 
  margin: 15px 0px 15px 0px;
  display: flex;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  padding: 10px 16px 10px 10px;
  font-size: 16px;
  cursor: pointer; 
  outline: none;
  background-position: center;
  transition: background 0.7s;
}

.item:hover {
  background: var(--item-hover) radial-gradient(circle, transparent 1%, #363838 1%) center/15000%;
}

.item:active {
  background-color: var(--item-hover);
  background-size: 100%;
  transition: background 0s;
}

.item1hover {
  color: white;
  background-color: var(--item-hover) radial-gradient(circle, transparent 1%, #363638 1%) center/15000%;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <title>DashboardSwgoh</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class='toolbar'></div>
    <div class='sidebar'>
      <div class='sidebar-0'></div>
      <div class='sidebar-1'>
        <div class="item">
          <div class='item1hover'>Dashboard</div>
        </div>
      </div>
    </div>
</body>
</html>

csssidebar

Answer №1

To achieve the desired effect of moving a sidebar element partially offscreen on hover without changing its width, you can use the left parameter instead. Here is an example code snippet demonstrating this approach:

.sidebar {
  position: absolute;
  left: -200px;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: left 0.15s linear;
}

.sidebar:hover {
  left: 0px; 
}

For a more comprehensive example, refer to the following code snippet:

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #f4f6f9;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

:root {
  --sidebar-color: #435f7d;
  --sidebar-color-header: #384d60;
  --item-hover: #212121;
  --item-click: #9CCC65;
}


.toolbar {
  height: 64px;
  width: 100vw;
  background-color: #607d8b;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sidebar {
  position: absolute;
  left: -200px;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: left 0.15s linear;
}

.sidebar:hover {
  left: 0px; 
}

.sidebar-0 {
  height: 64px;
  background-color: var(--sidebar-color-header);
}

.sidebar-1 {
  padding: 0px 10px 10px 10px;
  background-color:  var(--sidebar-color);
}

.item {
  background-color: var(--sidebar-color); 
  margin: 15px 0px 15px 0px;
  display: flex;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  padding: 10px 16px 10px 10px;
  font-size: 16px;
  cursor: pointer; 
  outline: none;
  background-position: center;
  transition: background 0.7s;
}

.item:hover {
  background: var(--item-hover) radial-gradient(circle, transparent 1%, #363838 1%) center/15000%;
}

.item:active {
  background-color: var(--item-hover);
  background-size: 100%;
  transition: background 0s;
}

.item1hover {
  color: white;
  background-color: var(--item-hover) radial-gradient(circle, transparent 1%, #363638 1%) center/15000%;
}
<div class='toolbar'></div>
<div class='sidebar'>
  <div class='sidebar-0'></div>
  <div class='sidebar-1'>
    <div class="item">
      <div class='item1hover'>Dashboard</div>
    </div>
  </div>
</div>

Answer №2

There is a significant performance advantage in avoiding the animation of the left property, especially when it comes to rendering.

It is advisable to utilize the transform: translateX() instead:

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #f4f6f9;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

:root {
  --sidebar-color: #435f7d;
  --sidebar-color-header: #384d60;
  --item-hover: #212121;
  --item-click: #9CCC65;
}


.toolbar {
  height: 64px;
  width: 100vw;
  background-color: #607d8b;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sidebar {
  position: absolute;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s linear;
  transform: translateX(-200px)
}

.sidebar:hover {
  transform: translateX(0)
}

.sidebar-0 {
  height: 64px;
  background-color: var(--sidebar-color-header);
}

.sidebar-1 {
  padding: 0px 10px 10px 10px;
  background-color:  var(--sidebar-color);
}

.item {
  background-color: var(--sidebar-color); 
  margin: 15px 0px 15px 0px;
  display: flex;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  padding: 10px 16px 10px 10px;
  font-size: 16px;
  cursor: pointer; 
  outline: none;
  background-position: center;
  transition: background 0.7s;
}

.item:hover {
  background: var(--item-hover) radial-gradient(circle, transparent 1%, #363838 1%) center/15000%;
}

.item:active {
  background-color: var(--item-hover);
  background-size: 100%;
  transition: background 0s;
}

.item1hover {
  color: white;
  background-color: var(--item-hover) radial-gradient(circle, transparent 1%, #363638 1%) center/15000%;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <title>DashboardSwgoh>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class='toolbar'></div>
    <div class='sidebar'>
      <div class='sidebar-0'></div>
      <div class='sidebar-1'>
        <div class="item">
          <div class='item1hover'>Dashboard</div>
        </div>
      </div>
    </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a tool available for monitoring server status with HTML/CSS

I am interested in a way to create an HTML or CSS code that can ping an address or IP every 10 minutes to determine if it is sending back a signal. If a signal is received, I want the status on my website to display as 'online'. In case there is ...

htmlcss

What is the best way to resize an image in HTML based on a percentage of its height?

Within my HTML code, I have a PNG image that has been adjusted in size using CSS: .adjust-image { border:1px solid #021a40; display: block; width: auto; max-width: 100%; max-height: 1000px; } .img-container { position: relative; } ...

htmlcssimage

Angular material: issue with alignment of table inside mat-expansion compared to other table

Hey there, I've encountered an issue on an Angular website where the columns in a table are not aligning properly. Does anyone have a solution for this problem? Thanks! <div class="table-responsive "> <table class="table" style=" ...

cssangularbootstrap-4angular-materialangular7

Ways to create a distinct highlight for the selected link in the navigation upon clicking

Similar Inquiry: How can I highlight a link based on the current page? Situation I have been struggling to keep a selected link in my navigation menu highlighted after it has been clicked. Unfortunately, I haven't come across any straightfor ...

phphtmlcssnavigation

Using CSS overflow property set to "hidden" and max-height that is a multiple of line-height, in Chrome and Edge browsers, the "hidden" text may leak into view

By adjusting the zoom level to either 100% or 90%, you can execute the following Snippet and notice that at the bottom of the text, there is a slight overlap of the top part of the letters from the first line which should be hidden. This issue seems to occ ...

cssoverflowline-height

I'm a beginner in Ajax and I'm wondering how I can reset my CSS back to its original value after making an Ajax call. Is there a way to reload the CSS?

Currently, I am utilizing a jQuery ajax() call to fetch a response from a PHP page for form submission/validation purposes. Upon success, the response contains a list of form elements along with corresponding error messages (such as missing field or invali ...

jquerycssajaxless

Tips for concealing components with the assistance of Bootstrap's classes?

Currently, I am experimenting with Bootstrap to display h1 only on desktop/large screens and h2 only on mobile devices. However, despite my efforts, both h1 and h2 appear on all screen sizes. The h1 and h2 elements are input fields and the condition for t ...

htmlcssbootstrap-4

The padding is being applied unevenly

There seems to be an issue with applying equal padding to the top and bottom of a div. Interestingly, resizing the browser window results in the padding being applied equally. I've set the padding to 50px for the top and 0px for the bottom on a div, ...

csspadding

Applying box-shadow to tables and collapsing borders with border-collapse property in IE!

The box-shadow property does not function properly in Internet Explorer when the table has a border-collapse: collapse style applied to it. ...

css

Struggling to conceal HTML element

I have been attempting to hide or completely conceal certain fields within the item class using jQuery, JavaScript, and HTML, however, the outcome has not been satisfactory. <div class="item"> <label for="id_mobile_number&qu ...

javascripthtmljquerycssfrontend

Issues with the disappearance of elements when using the Toggle() function

I've created a toggle feature for displaying a sub menu (.li-one) when clicking on the main menu (.ul-one). The issue arises when you click on another menu item, as the previous one does not disappear unless you click outside of the .main-nav div. Is ...

jqueryhtmlcsstoggle

Guide to aligning Material UI card in the center (React)

I've been struggling to find a solution for centering a Material UI card in React. Any assistance would be greatly appreciated! Thank you :) link to image on website <Grid container justify="center"> <Card s ...

cssreactjsmaterial-ui

Having difficulty navigating to a different page in Angular 4

I'm currently attempting to transition from a home page (localhost.com) to another page (localhost.com/listing). Although the app compiles correctly, I encounter an issue where nothing changes when I try to navigate to the new page. My approach has m ...

htmlcssangulartypescriptangular2-routing

Are there any other compact and portable PHP+Apache options available for developing WordPress websites?

Currently, I am utilizing XAMPP Lite 1.7.3 for my development environment. + Apache 2.2.14 (IPV6 enabled) + MySQL 5.1.41 (Community Server) with PBXT engine 1.0.09-rc + PHP 5.3.1 (PEAR) + Miniperl 5.10.1 + XAMPP Control Version 2.5.8 (ApacheFriends Editio ...

phpmysqlcsswordpressxhtml

How to implement CSS styling for a disabled component

In my application, I have a FormControlLabel and Switch component. When the Switch is disabled, the label in FormControlLabel and the button in Switch turn gray. However, I want to maintain the color of both the label (black) and the button (red). To test ...

cssreactjsmaterial-ui

Altering the appearance of the Bootstrap navigation bar icon

My website's bootstrap navbar hamburger icon is too small for visitors to see. I tried adjusting the size, but had no success. Does anyone have any suggestions on how to solve this issue? For reference, I am using the most recent versions of bootstra ...

htmlcssbootstrap-4

The swipe function of Hammer.js is unable to detect gestures on a rotated iframe

After creating a rotated iframe on the page using CSS transforms, I attempted to implement swipe events within the iframe. body.rotate iframe { transform: rotate(90deg); transform-origin: top right; position: absolute; t ...

javascripthtmlcssiframehammer.js

The use of absolute positioning in conjunction with overflow:hidden

<div id="container" style="overflow:hidden; position:relative;"> <div id="content" style="position:absolute;"> </div> </div> Is it possible to display the content element which is larger than its parent container, while still k ...

htmlcss

Can nested divs in an HTML document be styled using Flexbox?

I'm currently attempting to design a layout with two columns, displaying only two items per row. I came across a solution on StackOverflow that aligns child elements of different blocks, but unfortunately, it doesn't apply to my HTML structure. ...

css

Discrepancy in div height between Chrome/Edge and Firefox browsers

I am currently in the process of designing a straightforward website layout that includes a navigation bar at the top. The main focus is on an image that needs to stretch from the bottom of the navbar to the bottom of the window, filling up the entire scre ...

javascripthtmlcss