jquery_css_slide_menue.php

Quell Code

<style>
  body {
  font-family: 'Roboto', sans-serif;
  background: #fafafa;
  box-sizing: border-box;
}

ul {
  font-size: 0;
  position: relative;
  padding: 0;
  max-width: 600px;
  margin: 60px auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

li {
  display: inline-block;
  width: 150px;
  height: 60px;
  background: #00bcd4;
  font-size: 16px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.slider {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #ffff98;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

/* RIPPLE */
.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}

.rippleBtn {
  -webkit-animation: rippleDrop .5s linear;
  animation: rippleDrop .5s linear;
}

@-webkit-keyframes rippleDrop {
  100% {
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes rippleDrop {
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}
</style>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <nav>
      <ul>
        <li>Home</li>
        <li>More</li>
        <li>Contact</li>
        <li>Imprint</li>
        <li class="slider"></li>
      </ul>
    </nav>
<script>
  $("ul li").click(function(e) {
  // TAB-Button ermitteln
  var tabreference = $(this).index();
  // Sliding-Breite setzen
  var sliding = 150 * tabreference;
  
  // SLIDER verschieben
  $(".slider").css({
    left: sliding + "px"
  });
  
  // RIPPLE Class entfernen
  $(".ripple").remove();
  
  // Config
  var posX = $(this).offset().left,
      posY = $(this).offset().top,
      buttonWidth = $(this).width(),
      buttonHeight = $(this).height();
  
  // Erstelle "Kreis"-Element
  $(this).prepend("<span class='ripple'></span>");
  
  if(buttonWidth >= buttonHeight)
    buttonHeight = buttonWidth;
  else
    buttonWidth = buttonHeight;
  
  var x = e.pageX - posX - buttonWidth / 2,
      y = e.pageY - posY - buttonHeight / 2;
  
  $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + "px",
    left: x + "px"
  }).addClass("rippleBtn");
});
</script>