<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Down Menu Click</title>
  <!--[if lt IE 9]>
  	<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>

    <!--スライドアニメーションする部分ここから-->
    <div class="slide_container">
       
        <!--↓メニュー-->
        <nav id="menu">
            <ul>
                <li><a href="#">menu1</a></li>
                <li><a href="#">menu2</a></li>
                <li><a href="#">menu3</a></li>
                <li><a href="#">menu4</a></li>
                <li><a href="#">menu5</a></li>
            </ul>
        </nav>
        
        <!--↓クリックボタン-->
        <div id="btn"><span></span></div>
    </div>
    <!--スライドアニメーションする部分ここまで-->

    <div class="container">
        <header id="header">
            <h1>Down Menu ↑ Click</h1>
        </header><!-- fin_header -->

        <div class="content">
            <p>Swans are birds of the family Anatidae within the genus Cygnus. The swans' close relatives include the geese and ducks. Swans are grouped with the closely related geese in the subfamily Anserinae where they form the tribe Cygnini.</p>

            <p> Sometimes, they are considered a distinct subfamily, Cygninae.There are six or seven species of swan in the genus Cygnus; in addition there is another species known as the coscoroba swan, although this species is no longer considered one of the true swans.Swans usually mate for life, though "divorce" does sometimes occur, particularly following nesting failure.</p>
             <p> And if a mate dies, or is killed by a predator, the remaining mate will take up with another; however, if all goes well in the pairing, they indeed will stay together for life. The number of eggs in each clutch ranges from three to eight.</p>
        </div><!-- fin_content-->

        <footer class="footer">
                <p><small>Copyright&copy; Example.All Right Reserved</small></p>
        </footer><!-- fin_footer -->
    </div><!--container-->
</body>
</html>
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);

/*---------------------
	 reset
----------------------- */
html{font-family:'Droid Sans',sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background-color:transparent}body{line-height:1}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background-color:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted black;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid#cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}

/*---------------------
	 sample
----------------------- */
body {
  border-top: 10px solid #ff725d;
}

h1 {
  margin: 90px 0 50px;
  color: #666;
  text-align: center;
  font-size: 50px;
}

.content {
  margin: 0 auto 20px;
  max-width: 680px;
  padding: 0 3%;
}

.content img {
  width: 260px;
  height: auto;
  border: solid 10px #fff;
  box-shadow: 0 1px 2px #999;
  float: left;
  margin: 0 3% 3%;
}

p {
  font-size: 110%;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 15px;
}

/*---------------------
    クリックで表示される
    メニュー
----------------------- */
.slide_container {
  width: 100%;
    
  /*以下3行アニメーションに必要*/
  position: absolute;
  top: 0;
  z-index: 999;
}

#menu {
  padding: 50px 0;
  border-bottom: solid 10px #ff725d;
  background: #fff;

  /*以下アニメーションに必要*/
  display: none;
}

#menu ul {
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  max-width: 800px;
  width: 100%;
}

#menu li {
  float: left;
  padding: 0;
  width: 20%;
  list-style: none;
}

#menu li a {
  display: block;
  margin: 0 5%;
  padding: 20px 0;
  border: solid 1px #333;
  background: #fff;
  color: #666;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}
#menu li a:hover {
  border: solid 1px #12a1c6;
  color: #12a1c6;
}
#menu li a:active {
  border: solid 1px #0e7b97;
  color: #0e7b97;
}

/*---------------------
    クリックボタン
----------------------- */
#btn {
  margin: 0 auto;
  width: 200px;
  height: 30px;
  border-radius: 0 0 5px 5px;
  background: #ff725d;
  cursor: pointer;
}

#btn span {
  position: relative;
  top: 12px;
  left: 50%;
  display: block;
  margin-left: -25px;
  width: 50px;
  height: 5px;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 1px 1px 2px #ddd;
}
/*---------------------
    ボタンクリック時の
    レイヤー
----------------------- */
.layer {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ff725d;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
  opacity: 0.5;
}

/*---------------------
    mobile
----------------------- */
@media screen and (max-width: 480px) {
  #menu {
    padding: 5%;
  }
  #menu li {
    width: 100%;
  }
  #menu li a {
    border-top: none;
  }
  #menu li a:hover {
    margin-top: -1px;
  }
  #menu li:first-child a {
    border-top: solid 1px #333;
  }
  #menu li:first-child a:hover {
    margin-top: 0;
    border-top: solid 1px #12a1c6;
  }
}
$(function() {
	var openBtn = $('#btn'),
		slideMenu = $('#menu'), // ↑ '#btn'にオープン・クローズボタンID、'#menu'にメニュー要素IDを指定
		layer = $('<div />').addClass('layer');
	openBtn.on("click", function() {
		if (slideMenu.is(':hidden')) {
			layer.appendTo('body');
			slideMenu.slideDown(300); // ↑かっこ内の数字でアニメーションスピード設定(ミリ秒単位)
		} else {
			slideMenu.slideUp(300); // ↑かっこ内の数字でアニメーションスピード設定(ミリ秒単位)
			layer.remove();
		}
	});
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js