单击链接后如何显示水平列表？

Question

I'd like to get something like the "share" link in the lower right corner. https://www.celine.com/en

I tried many times using CSS only but I don't know javascript/jquery so I can't do so much actually.

Thank you in advance!

Answer 1

<a href="#" class="share"> Share </a>

<div class="share-cont">
  <!--List of social media buttons here-->
</div>

Initially hide the whole row by giving

.share-cont {
  position: absolute;
  right: -300px;
}

Then on click of share button, position it to 0px

$('.share').on('click', function() {
  $(".share-cont").animate({'right': '0px'}, 'slow');
});