lundi 20 avril 2015

.slideToggle round button cleanup?

I just found out how to do this a couple of hours ago (thank you brett!), and now I just need help cleaning it up. When the button is clicked it expands, but the button either gets stuck not all the way up, or you can see edges when it expands. I also have a button stuck behind the main 'Share' button.

http://ift.tt/1JocVk1

    .share-button-group {
        position: fixed;
        bottom: 60px;
        right: 30px;
        z-index: 999;

        a + a {
            margin-top: @padding-small-horizontal;
        }
    }

    .share-button-expand {
        .share-button-variant(@gray-light, '\f1e0');
    }

    .share-button-facebook {
        .share-button-variant(#3b5998, '\f09a');
    }

And here it is in our Jade-esque markup (extremely similar, just small tweaks)

if share
  .share-button-group.shareItems(style='display:none;')
    a.share-button-facebook(data-share="facebook")
      span.sr-only Share on Facebook 
  .share-button-group.expandBtn  
    a.share-button-expand(href="javascript:;")
      span.sr-only Share

and the JS:

define(['jquery'], function($) {
  $(document).ready(function() {

    $('.expandBtn').on( "click", function() {
      $('.shareItems').slideToggle( "slow", function() {

      });
    });

  });
});

This is how the buttons are set up in LESS. I'm working in a Jade like language, with Bootstrap as well. I need this done by tomorrow and have limited time, so any help is amazing! Thanks!

Aucun commentaire:

Enregistrer un commentaire