Meine Codepens ,My Codepens ,Zeigt ein Menü im Halb-Kreiss an

kreiss_menue.php

Quell Code

<html>
  <head>
    <style>
      body {
  background-color: salmon;
}
.menu {
  position: relative;
}
.menu span {
  position: absolute;
  background-color: black;
  padding: 15px 10px;
  border: 3px solid white;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
.menu span.hidden {
  visibility: hidden;
}
.menu span:last-child {
  padding: 13px 15px;
}
.menu span:nth-child(1) {
  background-color: lightblue;
  padding: 15px 15px;
}
.menu span:nth-child(1).show {
  -webkit-transform: rotate(0deg) translate(100px) rotate(0deg);
          transform: rotate(0deg) translate(100px) rotate(0deg);
}
.menu span:nth-child(2) {
  background-color: darkblue;
}
.menu span:nth-child(2).show {
  -webkit-transform: rotate(45deg) translate(100px) rotate(-45deg);
          transform: rotate(45deg) translate(100px) rotate(-45deg);
}
.menu span:nth-child(3) {
  background-color: red;
}
.menu span:nth-child(3).show {
  -webkit-transform: rotate(90deg) translate(100px) rotate(-90deg);
          transform: rotate(90deg) translate(100px) rotate(-90deg);
}
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  </head>
  <body>
<div class="menu">
  <span class="fa fa-twitter fa-2x fa-inverse f-fw hidden"></span>
  <span class="fa fa-facebook fa-2x fa-inverse fa-fw hidden"></span>
  <span class="fa fa-pinterest fa-2x fa-inverse fa-fw hidden"></span>
  <span class="fa fa-bars fa-2x fa-inverse f-fw"></span>
</div>
    <script>
      $(document).ready(function(){
  $('.menu span:last-child').click(function(){
    $('.menu span').not(':last-child').toggleClass('hidden show') ;
  })
})
      
    </script>
  </body>
</html>
kreiss_menue.php

Quell Code

Add Comment

Comments
