html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<div id="menu-container">
<div id="menu-wrapper">
<div id="hamburger-menu">
<span></span><span></span><span></span>
</div>
<!-- hamburger-menu -->
<div id="title">PROGRAMMING RESOURCES</div>
</div>
<!-- menu-wrapper -->
<ul class="menu-list accordion">
</ul>
<!-- menu-list accordion-->
</div>
<!-- menu-container -->
<div id = "container">
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
ul { list-style: none; }
a { text-decoration: none; color: black;}
body {
font-family:"Kodchasan", Verdana;
background: #FF5722;
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size:1rem;
font-weight:400;
line-height:1.5;
color:#212529;
text-align:left;
}
#menu-wrapper {
overflow: hidden;
max-width: 100%;
cursor: pointer;
display:table;
z-index:2;
position: fixed;
border-spacing:6px;
width:100%;
font-size:1em;
color: white;
vertical-align:middle;
/*border-bottom:1px solid #99c;*/
box-shadow:0 5px 20px 5px rgba(0,0,0,.3);
background-image: linear-gradient(to right, #52c234 0%, #061700 51%, #52c234 100%);
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function() {
loadDetails();
swal({
title : "Programming Resources",
//width: 400,
icon: 'info',
animation: true,
customClass: 'animated tada',
text : "Updates is going on...... \n\n"
})
function slideMenu() {
var activeState = $("#menu-container .menu-list").hasClass("active");
$("#menu-container .menu-list").animate({left: activeState ? "0%" : "100%"}, 400);
}
$("#menu-wrapper").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-container .menu-list").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run