change CSS to work with jQuery toggle

Question

Weave: http://kodeweave.sourceforge.net/editor/#e3d0eadc38078efe27c7785d6e4a6e1a

I'm having a floating action button (material design style) on my site. Currently it is triggered by the :hover property and plain CSS. I want to change it to open on click and was planning to use the toggle function of jQuery.

I'm trying to replicate the menu from mydivision.net (bottom right corner)

$(document).ready(function() {
  $("span#fab").click(function () {
    $(this).toggleClass("active");
  });
});

.fab {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 10;
}

.fab-button {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  display: block;
  width: 56px;
  height: 56px;
  margin: 20px auto 0;
  position: relative;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  text-align: center;
}

.fab-button:active,
.fab-button:focus,
.fab-button:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.56);
}

.fab-button:not(:last-child) {
  width: 42px;
  height: 42px;
  margin: 10px auto 0;
  opacity: 0;
  -webkit-transform: translateY(50px) scale(0.2);
  transform: translateY(50px) scale(0.2);
}

.fab:hover .fab-button:not(:last-child) {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  margin: 15px auto 0;
}

.fab-button i {
  color: #fff;
  font-size: 21px;
  text-align: center;
  line-height: 42px;
}

.fab-button:nth-last-child(1) i {
  line-height: 56px;
}

.fab-button:nth-last-child(1) {
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
  background-color: #ff6d10;
  cursor: pointer;
}

.fab-button:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 50ms;
  transition-delay: 50ms;
  background-color: #78c831;
}

.fab-button:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 75ms;
  transition-delay: 75ms;
  background-color: #3f73fc;
}

.fab-button:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
  background-color: #6d5593;
}

.fab-button:not(:last-child):nth-last-child(5) {
  -webkit-transition-delay: 125ms;
  transition-delay: 125ms;
  background-color: #f8ba24;
}

.fab-button:not(:last-child):nth-last-child(6) {
  -webkit-transition-delay: 150ms;
  transition-delay: 150ms;
  background-color: #1fc36a;
}

.fab-button:not(:last-child):nth-last-child(7) {
  -webkit-transition-delay: 175ms;
  transition-delay: 175ms;
  background-color: #242424;
}

.fab .fab-button:nth-last-child(1) i {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.fab:hover .fab-button:nth-last-child(1) i {
  transform: rotate(-180deg);
}

[tooltip]:before {
  position: absolute;
  bottom: 22%;
  right: 100%;
  border-radius: 3px;
  background-color: #242424;
  color: #fff;
  content: attr(tooltip);
  font-size: 12px;
  line-height: 1;
  padding: 5px;
  margin-right: 10px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
}

[tooltip]:hover:before,
[tooltip]:hover:after {
  background-color: #000;
}

.fab:hover [tooltip]:before,
.fab:hover [tooltip]:after {
  visibility: visible;
  opacity: 1;
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="fab">
  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-angle-double-up"></i></a>
  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-shopping-cart"></i></a>
  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-users"></i></a>
  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-microphone"></i></a>
  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-gavel"></i></a>
  <a class="fab-button" href="#" tooltip="Forum"><i class="fa fa-comments"></i></a>
  <span class="fab-button" id="fab"><i class="fa fa-bars"></i></span>
</nav>

I thought I could use the following jQuery script:

jQuery(document).ready(function() {
  jQuery("span#fab").click(function () {
    jQuery(this).toggleClass("active");
  });
});

Now the question is: How do I have to amend the existing CSS so that the new class "active" is opening the menu on click?

Thanks!

From the sounds of it, you just need to go through your CSS replacing :hover with .active — DBS
– DBS, Commented May 17, 2016 at 16:25

Michael Schwartz · Accepted Answer · 2016-05-17 17:15:18Z

Weave: http://kodeweave.sourceforge.net/editor/#e884e37313af26b5738f11b2446bfb20

The menu opens from :hover. If you use the :active pseudo selector you will have to hold your mouse down for the menu to be open (In short :active is basically a mousedown/touchstart event in CSS)

You don't actually need JQuery for this effect! You could open/close the menu using a checkbox or the :target pseudo selector.

I chose to use a checkbox in my snippet below.

I removed some of the vendor prefixes in your CSS and replaced it with Prefix-Free to keep your code DRY.

.fab {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 10;
}

.fab-button {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  display: block;
  width: 56px;
  height: 56px;
  margin: 20px auto 0;
  position: relative;
  transition: all 0.2s ease-out;
  text-align: center;
}

#menu:checked,
.fab-button:active,
.fab-button:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.56);
}

.fab-button:not(:last-child) {
  width: 42px;
  height: 42px;
  margin: 10px auto 0;
  opacity: 0;
  transform: translateY(50px) scale(0.2);
}

#menu:checked ~ .fab-button:not(:last-child) {
  opacity: 1;
  transform: none;
  margin: 15px auto 0;
}

.fab-button i {
  color: #fff;
  font-size: 21px;
  text-align: center;
  line-height: 42px;
}

.fab-button:nth-last-child(1) i {
  line-height: 56px;
}

.fab-button:nth-last-child(1) {
  transition-delay: 25ms;
  background: #ff6d10;
  cursor: pointer;
}

.fab-button:not(:last-child):nth-last-child(2) {
  transition-delay: 50ms;
  background: #78c831;
}

.fab-button:not(:last-child):nth-last-child(3) {
  transition-delay: 75ms;
  background: #3f73fc;
}

.fab-button:not(:last-child):nth-last-child(4) {
  transition-delay: 100ms;
  background: #6d5593;
}

.fab-button:not(:last-child):nth-last-child(5) {
  transition-delay: 125ms;
  background: #f8ba24;
}

.fab-button:not(:last-child):nth-last-child(6) {
  transition-delay: 150ms;
  background: #1fc36a;
}

.fab-button:not(:last-child):nth-last-child(7) {
  transition-delay: 175ms;
  background: #242424;
}

.fab .fab-button:nth-last-child(1) i {
  transition: all 0.2s ease;
}

#menu:checked ~ .fab-button:nth-last-child(1) i {
  transform: rotate(-180deg);
}

[tooltip]:before {
  position: absolute;
  bottom: 22%;
  right: 100%;
  border-radius: 3px;
  background: #242424;
  color: #fff;
  content: attr(tooltip);
  font-size: 12px;
  line-height: 1;
  padding: 5px;
  margin-right: 10px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
}

[tooltip]:hover:before,
[tooltip]:hover:after {
  background: #000;
}

#menu:checked ~ [tooltip]:before,
#menu:checked ~ [tooltip]:after {
  visibility: visible;
  opacity: 1;
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>

<nav class="fab">
  <input type="checkbox" id="menu">

  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-angle-double-up"></i></a>
  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-shopping-cart"></i></a>
  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-users"></i></a>
  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-microphone"></i></a>
  <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-gavel"></i></a>
  <a class="fab-button" href="#" tooltip="Forum"><i class="fa fa-comments"></i></a>
  <label for="menu" class="fab-button" id="fab"><i class="fa fa-bars"></i></label>
</nav>

This is great! Thank you so much. Even better without JS. I did only one more thing: Hiding the checkbox via "display: none".
Remember this type of toggle method can be used a variety of ways and is supported on all major browsers. Glad I could help!

James Tudsbury · Accepted Answer · 2016-05-17 16:33:59Z

0

This line is where the party's at .fab:hover .fab-button:not(:last-child) {opacity: 1; -webkit-transform: none; transform: none; margin: 15px auto 0;}

So you need to change fab:hover to fab.active on this line and wherever else it occurs.

answered May 17, 2016 at 16:33

James Tudsbury

935 bronze badges

1 Comment

jackennils Over a year ago

Thanks James. That's what I tried as a first thing but it does not work.

Collectives™ on Stack Overflow

change CSS to work with jQuery toggle

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related