xxxxxxxxxx1
<main class="full-page">2
<section>3
<div class="header z-depth-1">4
5
</div>6
<div class="container">7
<div class="row justify-content-center">8
<h1 class="text-center title mt-5">Square Menu</h1>9
</div>10
</div>11
12
13
14
</section>15
16
<div class="open-menu z-depth-1">17
<i class="fas fa-ellipsis-h fa-2x ultimate-center"></i>18
</div>19
20
21
<div class="square-menu">22
<div class="divide-vertical menu-option-1">23
<div class="square-title ultimate-center text-center">24
<h1 class="main-title">Fashion</h1>25
<h6 class="sub-title">Find out some news obout fashion</h6>26
</div>27
</div>28
<div class="divide-vertical">29
<div class="divide-horizontal menu-option-2">30
<div class="square-title ultimate-center text-center">31
<h1 class="main-title">History</h1>32
<h6 class="sub-title">Watch our company's history</h6>33
</div>34
</div>35
<div class="divide-horizontal">36
<div class="divide-vertical menu-option-3">37
<div class="square-title ultimate-center text-center">38
<h1 class="main-title">Products</h1>39
<h6 class="sub-title">Some pretty products here</h6>40
</div>41
</div>42
<div class="divide-vertical">43
<div class="divide-horizontal menu-option-4">44
<div class="square-title ultimate-center text-center">45
<h1 class="">Shop</h1>46
<h6 class="sub-title">Go on here and see our staffs</h6>47
</div>48
</div>49
<div class="divide-horizontal">50
<div class="divide-vertical menu-option-5">51
<div class="square-title ultimate-center text-center">52
<h1 class="">Beauty</h1>53
<h6 class="sub-title">For everyone</h6>54
</div>55
</div>56
<div class="divide-vertical">57
<div class="divide-horizontal menu-option-6">58
<div class="square-title ultimate-center text-center">59
<h1 class="">Home</h1>60
</div>61
</div>62
<div class="divide-horizontal">63
<div class="divide-vertical menu-option-7"></div>64
<div class="divide-vertical">65
<div class="divide-horizontal menu-option-8">66
<div class="square-title ultimate-center text-center close-menu">67
<h1 class="">close</h1>68
</div>69
</div>70
<div class="divide-horizontal">71
<div class="divide-vertical menu-option-9"></div>72
<div class="divide-vertical menu-option-10"></div>73
</div>74
</div>75
</div>76
</div>77
</div>78
</div>79
</div>80
</div>81
</div>82
</main>xxxxxxxxxx1
2
3
.header4
{5
width: 100%;6
height: 500px;7
margin-bottom: 20px;8
background-color: #ff6f61;9
}10
11
.title12
{13
font-size: 100px;14
}15
16
.open-menu17
{18
position: absolute;19
bottom: 0;20
left: 0;21
margin: 40px;22
height: 75px;23
width: 75px;24
border-radius: 50%;25
cursor: pointer;26
}27
28
.ultimate-center29
{30
position: absolute;31
top:50%;32
left: 50%;33
transform: translate(-50%, -50%);34
}35
36
.square-menu37
{38
position: absolute;39
bottom: 0;40
left: -100%;41
height: 100%;42
width: 100%;43
}44
45
.divide-horizontal46
{47
position: relative;48
width: 100%;49
height: 50%;50
bottom: 0;51
left: 0;52
}53
54
.divide-vertical55
{56
position: relative;57
float: right;58
width: 50%;59
height: 100%;60
}61
62
.main-title63
{64
font-weight: 700;65
font-size: 76px;66
}67
68
.square-title69
{70
cursor: pointer;71
}72
73
.sub-title74
{75
font-weight: 500;76
}77
78
.menu-option-179
{80
background-color: #e67772;81
}82
83
.menu-option-284
{85
background-color: #e88293;86
}87
88
.menu-option-389
{90
background-color: #fdb0aa;91
}92
93
.menu-option-494
{95
background-color: #f56b64;96
}97
98
.menu-option-4 h199
{100
font-size: 48px;101
font-weight: 700;102
}103
104
.menu-option-5105
{106
background-color: #f4899a;107
}108
109
.menu-option-5 h1110
{111
font-size: 48px;112
font-weight: 700;113
}114
115
.menu-option-6116
{117
background-color: #000;118
color: #fff;119
}120
121
.menu-option-6 h1122
{123
font-size: 48px;124
font-weight: 700;125
}126
127
.menu-option-7128
{129
background-color: #ad3d6f;130
}131
132
.menu-option-8133
{134
background-color: #fff;135
}136
137
.menu-option-8 h1138
{139
font-size: 30px;140
font-weight: 700;141
}142
143
.menu-option-9144
{145
background-color: #dc5281;146
}147
148
.menu-option-10149
{150
background-color: #f4899a;151
}xxxxxxxxxx1
function hideMenu(timer){2
$(".menu-option-10").animate({3
height: 04
}, timer, function () {5
$(this).hide();6
$(".menu-option-9").animate({7
width: 08
}, timer, function () {9
$(this).hide();10
$(".menu-option-8").animate({11
height: 012
}, timer, function () {13
$(this).hide();14
$(this).find(".square-title").hide();15
$(".menu-option-7").animate({16
width: 017
}, timer, function () {18
$(this).hide();19
$(this).find(".square-title").hide();20
$(".menu-option-6").animate({21
height: 022
}, timer, function () {23
$(this).hide();24
$(this).find(".square-title").hide();25
$(".menu-option-5").animate({26
width: 027
}, timer, function () {28
$(this).hide();29
$(this).find(".square-title").hide();30
$(".menu-option-4").animate({31
height: 032
}, timer*1.5, function () {33
$(this).hide();34
$(this).find(".square-title").hide();35
$(".menu-option-3").animate({36
width: 037
}, timer*1.5, function () {38
$(this).hide();39
$(this).find(".square-title").hide();40
$(".menu-option-2").animate({41
height: 042
}, timer*2, function () {43
$(this).hide();44
$(this).find(".square-title").hide();45
$(".menu-option-1").animate({46
width: 047
}, timer*2, function () {48
$(this).hide();49
$(this).find(".square-title").hide();50
$(".square-menu").hide();51
});52
});53
});54
});55
});56
});57
});58
});59
});60
});61
}62
63
$(function () {64
$(".full-page").css("height", $(window).innerHeight());65
$(window).on("resize", function () {66
$(".full-page").css("height", $(window).innerHeight());67
});68
69
70
hideMenu(1);71
72
$(".close-menu").on("click", function () {73
hideMenu(100);74
});75
76
$(".open-menu").on("click", function(){77
$(".square-menu").css("left", "0").show();78
$(".menu-option-1").show().animate({79
width: "50%"80
}, 200, function(){81
$(this).find(".square-title").slideDown(200);82
83
$(".menu-option-2").show().animate({84
height: "50%"85
}, 200, function(){86
$(this).find(".square-title").slideDown(200);87
88
$(".menu-option-3").show().animate({89
width: "50%"90
}, 150, function(){91
$(this).find(".square-title").slideDown(200);92
93
$(".menu-option-4").show().animate({94
height: "50%"95
}, 150, function(){96
$(this).find(".square-title").slideDown(200);97
98
$(".menu-option-5").show().animate({99
width: "50%"100
}, 100, function(){101
$(this).find(".square-title").slideDown(200);102
103
$(".menu-option-6").show().animate({104
height: "50%"105
}, 100, function(){106
$(this).find(".square-title").slideDown(200);107
108
$(".menu-option-7").show().animate({109
width: "50%"110
}, 100, function(){111
$(this).find(".square-title").slideDown(200);112
113
$(".menu-option-8").show().animate({114
height: "50%"115
}, 100, function(){116
$(this).find(".square-title").slideDown(200);117
118
$(".menu-option-9").show().animate({119
width: "50%"120
}, 100, function(){121
122
$(".menu-option-10").show().animate({123
height: "100%"124
}, 100, function(){125
});126
});127
});128
});129
});130
});131
});132
});133
});134
});135
});136
});137
Console errors: 0