CSS sliding element moving horizontally

This code is currently set up to slide from right to left.

#panel {
  position: absolute;
  right: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 100% 50%;
  -webkit-transform: scaleX(0.00001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}

#panel:target {
  -webkit-transform: scaleX(1);
}
<div><a href="#panel">☰</a></div>
<p><a id="panel" href="#">This is the side panel.</a></p>

Now, I would like to change it to slide from left to right. I attempted changing 'right: 0' to 'left', but it resulted in sliding from the center to the left. Despite trying various solutions found in different posts, I couldn't get it to work. Can anyone provide me with assistance? Thank you.

htmlcss

Answer №1

Uncertain about what you are searching for. It might be more appropriate to utilize the translate property instead of scale, even though achieving the same outcome is possible with scale as well.

#panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 100% 50%;
  -webkit-transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}
#panel:target {
  -webkit-transform: translateX(0%);
}
<div><a href="#panel">☰</a></div>
 <p><a id="panel" href="#">This is the side panel.</a></p>

Answer №2

This issue arises due to

-webkit-transform-origin

Does this address your concern?

#panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 0% 50%;
  -webkit-transform: scaleX(0.00001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}

#panel:target {
  -webkit-transform: scaleX(1);
}
<div><a href="#panel">☰</a></div>
<p><a id="panel" href="#">This is the side panel.</a></p>

Answer №3

You must also modify the 

-webkit-transform-origin: 100% 50%;
property and change it to 
-webkit-transform-origin: 0% 100%;
in order to make the panel open from the left side. See the code snippet below for reference:

#panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 0% 100%;
  -webkit-transform: scaleX(0.00001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}
#panel:target {
  -webkit-transform: scaleX(1);
}
<div>
 <a href="#panel">☰</a>
</div>
<p>
  <a id="panel" href="#">This is the side panel.</a>
</p>

Answer №4

Changing right to left was the correct move, however, don't forget to adjust the X axis of the transform-origin to zero:

#panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  -webkit-transform-origin: 0 50%;
  -webkit-transform: scaleX(0.00001);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}

#panel:target {
  -webkit-transform: scaleX(1);
}
<div><a href="#panel">☰</a></div>
<p><a id="panel" href="#">This is the side panel.</a></p>

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

Creating custom elements for the header bar in Ionic can easily be accomplished by adding your own unique design elements to the header bar or

I'm a beginner with Ionic and I'm looking to customize the items on the header bar. It appears that the header bar is created by the framework within the ion-nav-bar element. <ion-nav-bar class="bar-positive"> <ion-nav-back-button> ...

javascripthtmlangularjsionic-framework

Utilizing divisions for specifying CSS attributes

I'm attempting to distinguish the CSS properties of two tables based on which DIV they are contained within. If you take a look at http://jsfiddle.net/jdb1991/tpXKT/, you will notice that the table in "resultA" is utilizing the TD property designated ...

css

Issue with React Hot Toast not displaying properly due to being positioned behind the <dialog>

The Challenge of Toast Notifications Visibility with <dialog> Element tl;dr When utilizing the native dialog.showModal() function, the <dialog> element appears to consistently remain on top, which causes toast notifications to be obscured by ...

javascripthtmlnext.jsdialogreact-hot-toast

Using AngularJS to auto-fill input and textarea fields

In order to test local storage, I created a ToDo list using angularJS. Within my mainController, the following code snippet is present: $scope.saved = localStorage.getItem('todos'); $scope.todos = (localStorage.getItem('todos') !== n ...

javascripthtmlangularjs

Creating a balanced layout for text of varying lengths in a fluidRow within an R Shiny application

As I work on developing a Shiny app, I am encountering an issue with displaying text blocks. These blocks vary in length, and my goal is to color each block while also creating some spacing between them. The challenge I face is that due to the varying tex ...

cssrlayoutshinyshinydashboard

What is the best way to remove input focus when clicked away?

I am in the process of developing an application using next js, and I need assistance with designing a search field. The primary functionality I am looking to implement is displaying search suggestions when the user starts typing, but hiding them when the ...

javascriptcssreactjsnext.js

Is there a way to remove the initial number entered on a calculator's display in order to prevent the second number from being added onto the first one?

I am currently in the process of developing a calculator using HTML, CSS, and JavaScript. However, I have encountered an issue with my code. After a user inputs a number and then clicks on an operator, the operator remains highlighted until the user inputs ...

javascripthtmlcssfrontendcalculator

Selenium Webdriver faced challenges in identifying dynamically created scripts using CSS selectors

I am in need of assistance with the following: Requirement: On the homepage, there is a navigation menu bar that changes appearance when scrolling down. This change is reflected in the body class name switching from "home" to "home scriptable persistent-o ...

cssselenium

What is the best method for showcasing two images side by side in a column layout?

I need to showcase 2 images in a row using AngularJS, with the next two images in the following row and so forth. Img1 Img2 Img3 Img4 This is my code: <section id="content"> <div class="content-wrap"> <div class="container clearfix "& ...

htmlcssangularjstwitter-bootstrap

Slider with FadeIn effect remains unresponsive to the FadeOut command (JQuery / Javascript)

I'm currently working on a slider that is supposed to fade in and out. However, I am facing an issue where the slide fades in correctly but instantly disappears instead of fading out. Do you have any insights into why this might be happening and any s ...

javascriptjqueryhtmlcssanimation

"Reconfigure web page layout to be perfectly centered

Currently, I am utilizing Angular Drywall to construct my website. By default, the alignment is centered which does not suit the template requirements that call for it to occupy the full 100% body width. body{ width:100%; margin-left:0; paddin ...

angularjshtmlcsstwitter-bootstrap-3

Creating interactive tabs within the HTML document with AngularJS

Trying to customize the tab layout on my HTML page and I have a code similar to this: <form name="requestForm"> <div class="form-group col-md-6 md-padding"> <div class="text-primary"> <h3>Create Request</h3> ...

javascripthtmlangularjs

Having trouble customizing the HTML range input?

I am looking to customize the appearance of a range input slider. Specifically, I want the slider to be green for the lower portion (where the thumb has moved) and grey for the remaining section. I have successfully changed the default styles from blue and ...

javascripthtmlcssangularrange

The value of the comment box with the ID $(CommentBoxId) is not being captured

When a user enters data in the comment box and clicks the corresponding submit button, I am successfully passing id, CompanyId, WorkId, and CommentBoxId to the code behind to update the record. However, I am encountering an issue as I also want to pass the ...

javascriptjqueryasp.nethtml

The elements with identical IDs are being superimposed

There are two div elements on my webpage, both assigned the "nav" class. Below is the CSS code: .nav { border-radius: 1em; background-color: #0000BB; color: white; padding: 1em; position: absolute;//Fits size to content. margin: 1em; left: 50%; ...

htmlcssposition

Unable to apply styling to body element in style.css file when using Node.js

I recently launched a basic Node.js website but encountered an unusual issue. When trying to style the body using the default style.css stylesheet provided by Express, I found that it was not recognizing it. The only workaround was to add the class body di ...

htmlcssnode.jsexpressmean-stack

Can you show me a way to use jQuery to delete several href links using their IDs at once?

Currently facing a challenge with removing multiple href links that share the same ID. Here is a snippet of my code: $('.delblk').click(function(e) { e.preventDefault(); var id = $(this).attr('id').substr(7); ...

javascriptjqueryhtmlcss

Parallel with one <div> and subsequently another <div>

I have been challenged by HTML and CSS to embrace humility: Attempting to replicate the following design: Here is my effort: <div> <div style="width:800px;"> <div style="float:left;width:25%;background-color:red;">Facility #: COM ...

htmlcsscss-float

Tips for achieving uniform spacing between three buttons in a horizontal alignment using bootstrap 3

Is there a way to make buttons enclosed in a <div> with class="row" and each button having class="span4" only as wide as the text it contains, centered at 25%, 50%, and 75% of the width of the screen? [aaa] [bbb] [ccc] not [ aaa ][ bbb ][ ccc ] ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Create a visually appealing Zoom Effect with CSS while ensuring the div size remains constant

Update: What should I do if the width size is unknown? Check out the demo on JS Fiddle If you visit the provided link, I am trying to achieve a zoom effect where only the image inside the div zooms, not the entire div itself. However, I seem to be missin ...

htmlcss