Dropdown button click

0

In het thema (HTML) (in het voorbeeld share button i.c.m. FontAwesome)

<script>
								/* When the user clicks on the button, 
								toggle between hiding and showing the dropdown content */
								function myFunction() {
								    document.getElementById("myDropdown").classList.toggle("show");
								}
								
								// Close the dropdown if the user clicks outside of it
								window.onclick = function(event) {
								  if (!event.target.matches('.dropbtn')) {
								
								    var dropdowns = document.getElementsByClassName("dropdown-content");
								    var i;
								    for (i = 0; i < dropdowns.length; i++) {
								      var openDropdown = dropdowns[i];
								      if (openDropdown.classList.contains('show')) {
								        openDropdown.classList.remove('show');
								      }
								    }
								  }
								}
								</script>
								<div class="dropdown" style="float:right;">
								<button onclick="myFunction()" class="btn dropbtn"><i class="fa fa-share"></i> Delen via:</button>
								  <div id="myDropdown" class="dropdown-content">
								    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink();?>" class="newWindow" rel="0"><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</a>
								    <a href="https://twitter.com/home?status=<?php the_permalink();?>" class="newWindow" rel="0"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
								    <a href="https://www.linkedin.com/shareArticle?mini=true&url=link&title=<?php the_permalink();?>" class="newWindow" rel="0"><i class="fa fa-linkedin" aria-hidden="true"></i> LinkedIn</a>
								    <a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink();?>&media=<?php the_post_thumbnail_url(); ?>&description=<?php the_excerpt();?>" class="newWindow" rel="0"><i class="fa fa-pinterest" aria-hidden="true"></i> Pinterest</a>
								    <a href="https://plus.google.com/share?url=<?php the_permalink();?>" class="newWindow" rel="0"><i class="fa fa-google-plus" aria-hidden="true"></i> Google+</a>
								    <a href="mailto: ?subject=<?php the_title();?>&body=Graag deel ik dit artikel met je: <?php the_permalink();?>" rel="0"><i class="fa fa-envelope-o" aria-hidden="true"></i> Email</a>
								  </div>
								</div>

CSS

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: @color_alt; color: #fff; text-decoration: none;}

.show {display: block;}

 

 

Geef een reactie 0