Skip to content

Instantly share code, notes, and snippets.

/SlideDown-Menu.markdown

Created October 1, 2014 10:58
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/c3b742369ad55f8759de to your computer and use it in GitHub Desktop.
Save anonymous/c3b742369ad55f8759de to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by mp_graphic.
Raw
index.html
<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="http://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>
Raw
script.js
$(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();
}
});
});
Raw
style.css
@charset "utf-8";
@import url(http://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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment