jQuery

【jQuery】jQueryを使用した固定メニューfixed menu

January 20, 2018
fixed menu

fixed menuはjQueryを使用した固定メニュー。

HTML

        <div id="main"> 
          <h1> Austin Brock<br> <h2>Front End Developer</h2></br>
            <h3 id="hide-me">Click The Button Below</h3>
          <div id="icon" >
            <div id="line">
          </div> 
        </div>
          <div id="menu">
            <div id="m1"><a href="#">About</a></div>
            <div id="m2"><a href="#">Skills</a></div>
            <div id="m3"><a href="#">My Work</a></div>
            <div id="m4"><a href="#">Contact</a></div>
          </div>
      
        
<script>
$(document).ready(function(){
  flag=0; 
  $("#icon").click(function(){
    if(flag==0)
    {
      $("#main").css('box-shadow','inset 0px 0px 0px 30px black, inset 0px -700px 0px 30px black');
      $("#main").css('background-color', 'rgba(00,00,00,0');
      $("#m1").animate({top:'22%'},200);
      $("#m2").animate({top:'22%'},200);
      $("#m3").animate({top:'22%'},200);
      $("#m4").animate({top:'22%'},200);
      flag=1; 
    } 
    else {
      $("#main").css('box-shadow','inset 0px 0px 0px 0px black, inset 0px 0px 0px 0px black');
      $("#m1").animate({top:'100%'},200);
      $("#m2").animate({top:'100%'},200);
      $("#m3").animate({top:'100%'},200);
      $("#m4").animate({top:'100%'},200);
      flag=0; 
    }
  });
});
</script>

Download