비전공자 개발일기

Floating Menu 본문

JQuery

Floating Menu

HiroDaegu 2022. 10. 15. 00:25
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FLOATING MENU</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.6.0/css/all.min.css" integrity="sha512-ykRBEJhyZ+B/BIJcBuOyUoIxh0OfdICfHPnPfBy7eIiyJv536ojTCsgX8aqrLQ9VJZHGz4tvYyzOM0lkgmQZGw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script defer src="main.js"></script>
</head>
<body>
  <div class="share">
    <i class="fa fa-plus"></i>
  </div>
    <div class="one">
      <i class="fa fa-facebook"></i>
    </div>
    <div class="two">
      <i class="fa fa-twitter"></i>
    </div>
    <div class="three">
      <i class="fa fa-instagram"></i>
    </div>
  <div class="share">
    <i class="fa fa-plus"></i>
  </div>
    <div class="one">
      <i class="fa fa-facebook"></i>
    </div>
    <div class="two">
      <i class="fa fa-twitter"></i>
    </div>
    <div class="three">
      <i class="fa fa-instagram"></i>
    </div>
</body>
</html>
*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
body{
  background:#311b92;
  position:relative;
}
.share{
  display:block;
  width:60px;
  height:60px;
  background:#ff9100;
  position:absolute;
  top:300px;
  left:50%;
  z-index:999;
  text-align:center;
  overflow:hidden;
  line-height:65px;
  font-size:1.5em;
  color:#fff;
  -moz-box-shadow: 0px 3px 9px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 3px 9px rgba(0,0,0,.5);
box-shadow: 0px 3px 9px rgba(0,0,0,.5);
  border-radius:50px;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
.share:hover{
  cursor:pointer;
}
.one, .two, .three{
  position:absolute;
  width:50px;
  height:50px;
  color:#fff;
  border-radius:50px;
  text-align:center;
  line-height:49px;
  font-size:1.5em;
   top:300px;
  left:50%;
   -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  -webkit-box-shadow: 0px 3px 9px rgba(0,0,0,.2);
box-shadow: 0px 3px 9px rgba(0,0,0,.2);
  -webkit-transition:transform  .3s ease-in-out;
  transition:transform .3s ease-in-out;
}
.one:hover, 
.two:hover,
.three:hover{
  cursor:pointer;
}
.one i, .two i, .three i{
  display:none;
}
.one{
  background:#2196f3;
}
.two{
  background:#00e5ff;
}
.three{
  background:#6a1b9a;
}
$(function(){
  var flag=0;
  
  $('.share').on('click',function(){
   if(flag == 0)
    {
      $(this).siblings('.one').animate({
      top:'160px',
      left:'50%',
    },200);
    
     $(this).siblings('.two').delay(200).animate({
      top:'260px',
      left:'40%'
    },200);
    
     $(this).siblings('.three').delay(300).animate({
      top:'260px',
      left:'60%'
    },200);
              
    $('.one i,.two i, .three i').delay(500).fadeIn(200);  
      flag = 1;
    }
    
    
  else{
    $('.one, .two, .three').animate({
        top:'300px',
        left:'50%'
      },200);
      
  $('.one i,.two i, .three i').delay(500).fadeOut(200);
      flag = 0;
    }
  });
});
728x90
LIST

'JQuery' 카테고리의 다른 글

Card Slider  (0) 2022.11.04
Random IP Address Generator  (0) 2022.10.09
Snake Game  (0) 2022.09.14
Multi-Step Form  (0) 2022.08.18
Horizontal Timeline  (0) 2022.08.07
'JQuery' Related Articles more