SlideDown Menu

Developer
Mp_graphic
Size
4,449 Kb
Views
22,264
  1. SlideDown Menu Previews
  2. SlideDown Menu HTML Codes
  3. SlideDown Menu CSS Codes
  4. SlideDown Menu JS Codes

How do I make an slidedown menu?

What is a slidedown menu? How do you make a slidedown menu? This script and codes were developed by Mp_graphic on 06 August 2022, Saturday.

SlideDown Menu Previews
IQ Test

SlideDown Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SlideDown Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SlideDown Menu - Script Codes CSS Codes

@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; }
}

SlideDown Menu - Script Codes JS Codes

$(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();	}	});
});
SlideDown Menu - Script Codes
SlideDown Menu - Script Codes
Home Page Home
Developer Mp_graphic
Username mp_graphic
Uploaded August 06, 2022
Rating 4.5
Size 4,449 Kb
Views 22,264
Do you need developer help for SlideDown Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mp_graphic (mp_graphic) Script Codes
Name
Animated Scroll Up Button
Scroll fade
Facebook
Animation
SlideDown FixedMenu
Scroll menu
Ticker
Menu
MatchHeight
Img hover
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!