three dot transform into X symbol using css

Question

Hi I have menu which is three dots with animation. I have to transform to X when I click the three dots. The demo link is: demo

HTML:

<div class="dots">
  <div class="dot"></div>
</div>

CSS:

html, body {
  height: 100%;
  background: black;
}

.dots {
  position: absolute;
  right: 20px;
}

.dot,
.dot:before,
.dot:after {
   position: absolute;
   width: 6px;
   height: 6px;
   border-radius: 20px;
   background-color: #fff;
   transform: rotate(270deg);
   cursor: pointer;
}

.dot {
  top: 50px;
  right: 0;
}

.dot:before,
.dot:after {
   content: "";
}

.dot:before {
  right: 10px;
  transition: right .3s ease-out;
}

.dot:after {
  left: 10px;
  transition: left .3s ease-out;
}

.dots:hover .dot:before {
  right: -10px;
}

.dots:hover .dot:after {
   left: -10px;
}

In the current code on hover the dots moves left to right.What I wanted is on hover the the dots should move from it's position and then transform to X on click. Confused how to fix this I want something like hamberger menu but with the dots instead of three lines. Any suggestions?

Do you want a close(X) arrow when you click over the three dots? — Maniraj Murugan, Jun 02 '17 at 11:11
@ManiRaj yeah like..if you see hamberger menu it is three line and when you click on it changes to close(X) symbol. — Preety Singh, Jun 02 '17 at 11:14
Ya me too saw like that only in hamberger and its common to do with lines.. But Its interesting to do with dots.. — Maniraj Murugan, Jun 02 '17 at 11:16
@ManiRaj do you have any idea how to achieve this with current scenario? — Preety Singh, Jun 02 '17 at 11:18
Me too not familiar with it , But don't worry we will find a solution for it.. Is it possible for you to implement jquery?? Or else you need to achieve it oly by Css??? — Maniraj Murugan, Jun 02 '17 at 11:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145717/discussion-between-mani-raj-and-preety-singh). — Maniraj Murugan, Jun 02 '17 at 11:26
I was interested in a css/html only solution to this problem and actually found a little hack. Please take a look at this fiddle: https://jsfiddle.net/dhmr44ua/5/ As soon as you click the three dots they would change to a "X". Is this the behaviour you asked for? Pretty sure you could use a link instead of a checkbox hack if you want some cleaner code. — Kevkong, Jun 02 '17 at 11:28
@Kevkong yeah I wanted something like this but I guess need to modify a bit to get cleaner close(X) — Preety Singh, Jun 02 '17 at 11:32
Yea I agree the "X" provided has a comic look to it, but I am pretty sure you can tweak it on your own. You will only need to tweak the width a bit and probably the positioning. — Kevkong, Jun 02 '17 at 11:35
@Kevkong Thank you so much :) really, it worked. Thanks again :) — Preety Singh, Jun 02 '17 at 11:41

score 2 · Accepted Answer · answered Jun 02 '17 at 11:52

So the author confirmed, that the following fiddle solved the problem: https://jsfiddle.net/dhmr44ua/6/

HTML:

<div class="dots">
 <label for="toggle"></label>
 <input id="toggle" type="checkbox" />
 <div class="dot"></div>
</div>

CSS:

html, body {
  height: 100%;
  background: black;
}

.dots {
  position: absolute;
  right: 20px;
}

.dots input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.dots label { 
  display: inline-block;
  cursor: pointer;
  position: absolute;
  width: 15px;
  height: 32px;
  top: 38px;
  left: -10px;
  z-index: 999;
}

.dot,
.dot:before,
.dot:after {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background-color: #fff;
  transform: rotate(270deg);
  cursor: pointer;
}

.dot {
  top: 50px;
  right: 0;
}

.dot:before,
.dot:after {
  content: "";
}

.dot:before {
  right: 10px;
  transition: right .3s ease-out, width .3s ease-out;
}

.dot:after {
  left: 10px;
  transition: left .3s ease-out, width .3s ease-out;
}

.dots:hover .dot:before {
  right: -10px;
}

.dots:hover .dot:after {
  left: -10px;
}

.dots input[type=checkbox]:checked ~ .dot:before {
  right: -8px;
  width: 22px;
  transform: rotate(225deg);
}

.dots input[type=checkbox]:checked ~ .dot:after {
  left: -8px;
  width: 22px;
  transform: rotate(135deg);
}

I used the css checkbox trick mentioned in this answer: https://stackoverflow.com/a/13975505/1293849

three dot transform into X symbol using css

1 Answers1