Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2892cd1

Browse files
committed
Added Project Folder Corner and Responsive Side Menu
1 parentd886d02 commit2892cd1

File tree

5 files changed

+378
-0
lines changed

5 files changed

+378
-0
lines changed

‎25- Folded Card/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7+
<linkrel="stylesheet"href="style.css"/>
8+
<title>Folded Corner Card</title>
9+
</head>
10+
<body>
11+
<div>
12+
<divclass="card card-1">
13+
<h1>Heading</h1>
14+
<p>
15+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque
16+
voluptas dolor facere enim ab fuga dicta! Quibusdam dolorem
17+
consequuntur reiciendis minus pariatur in nisi. Dolores, blanditiis.
18+
Dicta enim sint commodi.
19+
</p>
20+
</div>
21+
<divclass="card card-2">
22+
<h1>Lorem Ipsum Dolor Set</h1>
23+
<p>
24+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque
25+
voluptas dolor facere enim ab fuga dicta! Quibusdam dolorem
26+
consequuntur reiciendis minus pariatur in nisi. Dolores, blanditiis.
27+
Dicta enim sint commodi.
28+
</p>
29+
</div>
30+
</div>
31+
</body>
32+
</html>

‎25- Folded Card/style.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
display: grid;
7+
place-items: center;
8+
min-height:100vh;
9+
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
10+
}
11+
12+
.card {
13+
position: relative;
14+
width:25rem;
15+
padding:1rem;
16+
border-radius:0.5rem;
17+
margin:1rem;
18+
}
19+
20+
.card-1 {
21+
background:linear-gradient(
22+
to bottom left,
23+
transparent35px,
24+
rgb(208,208,26)0
25+
);
26+
color:#222;
27+
}
28+
29+
.card-1:before {
30+
content:"";
31+
position: absolute;
32+
top:0;
33+
right:0;
34+
width:71px;
35+
height:40px;
36+
/* background: rgb(177, 177, 21); */
37+
background:linear-gradient(
38+
to bottom left,
39+
transparent50%,
40+
rgb(177,177,21)0
41+
);
42+
border-bottom-left-radius:0.5rem;
43+
box-shadow:-5px5px5pxrgb(21321330);
44+
}
45+
46+
.card-2 {
47+
background:linear-gradient(-135deg, transparent35px,rgb(121,4,121)0);
48+
color:#f3f3f3;
49+
}
50+
51+
.card-2:before {
52+
content:"";
53+
position: absolute;
54+
top:0;
55+
right:0;
56+
width:49px;
57+
height:49px;
58+
/* background: rgb(177, 177, 21); */
59+
background:linear-gradient(to bottom left, transparent50%,rgb(951095)0);
60+
border-bottom-left-radius:0.5rem;
61+
box-shadow:-5px5px5pxrgb(1337133);
62+
}

‎26- Responsive Side Menu/index.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
10+
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
11+
crossorigin="anonymous"
12+
/>
13+
<linkrel="stylesheet"href="style.css"/>
14+
<title>Responsive Side Menu</title>
15+
</head>
16+
<body>
17+
<headerid="header">
18+
<iclass="fas fa-bars"id="nav-toggler"></i>
19+
<div>
20+
<iclass="fas fa-user-alt"></i>
21+
<span>John Doe</span>
22+
</div>
23+
</header>
24+
25+
<navid="nav">
26+
<div>
27+
<divclass="logo">
28+
<iclass="fab fa-gg-circle"></i>
29+
<span>GG Corp</span>
30+
</div>
31+
<ulclass="nav">
32+
<liclass="nav__item">
33+
<ahref="#"class="nav__item-link">
34+
<iclass="fas fa-home"></i>
35+
<span>Dashboard<iclass="fas fa-angle-down"></i></span>
36+
</a>
37+
<ulclass="d-none">
38+
<li>
39+
<ahref="#"class="sub_link">Link 1</a>
40+
</li>
41+
<li>
42+
<ahref="#"class="sub_link">Link 2</a>
43+
</li>
44+
<li>
45+
<ahref="#"class="sub_link">Link 3</a>
46+
</li>
47+
</ul>
48+
</li>
49+
<liclass="nav__item">
50+
<ahref="#"class="nav__item-link">
51+
<iclass="fab fa-bitcoin"></i>
52+
<span>Income</span>
53+
</a>
54+
</li>
55+
<liclass="nav__item">
56+
<ahref="#"class="nav__item-link active">
57+
<iclass="fas fa-user-alt"></i>
58+
<span>Profile</span>
59+
</a>
60+
</li>
61+
<liclass="nav__item">
62+
<ahref="#"class="nav__item-link">
63+
<iclass="fas fa-cogs"></i>
64+
<span>Settings</span>
65+
</a>
66+
</li>
67+
</ul>
68+
</div>
69+
70+
<ahref="#"class="sign-out">
71+
<iclass="fas fa-sign-out-alt"></i>
72+
<span>Sign Out</span>
73+
</a>
74+
</nav>
75+
76+
<scriptsrc="main.js"defer></script>
77+
</body>
78+
</html>

‎26- Responsive Side Menu/main.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
constnav_links=document.querySelectorAll(".nav__item-link");
2+
constsub_links=document.querySelectorAll(".sub_link");
3+
4+
functioncollapse_nav(head,toggler,sidenav){
5+
constheader=document.getElementById(head);
6+
constnav_toggler=document.getElementById(toggler);
7+
constnav=document.getElementById(sidenav);
8+
9+
nav_toggler.addEventListener("click",function(){
10+
this.classList.toggle("fa-times");
11+
nav.classList.toggle("collapse");
12+
header.classList.toggle("collapse-header");
13+
});
14+
}
15+
16+
collapse_nav("header","nav-toggler","nav");
17+
18+
nav_links.forEach((link)=>{
19+
link.addEventListener("click",function(){
20+
nav_links.forEach((l)=>{
21+
if(l.classList.contains("active")){
22+
l.classList.remove("active");
23+
}
24+
});
25+
26+
this.classList.toggle("active");
27+
constsub_menu=this.nextElementSibling;
28+
if(sub_menu){
29+
sub_menu.classList.toggle("d-none");
30+
}
31+
});
32+
});
33+
34+
sub_links.forEach((link)=>{
35+
link.addEventListener("click",()=>{
36+
sub_links.forEach((l)=>l.classList.remove("active-sub-link"));
37+
link.classList.toggle("active-sub-link");
38+
});
39+
});

‎26- Responsive Side Menu/style.css

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
:root {
2+
--nav-width:200px;
3+
--nav-collapse-width:80px;
4+
5+
--header-height:75px;
6+
7+
--nav-bg-color:#3a86ff;
8+
--active-color:#ffff3f;
9+
}
10+
11+
*,
12+
*:before,
13+
*:after {
14+
box-sizing: border-box;
15+
}
16+
17+
body {
18+
margin:0;
19+
padding:0;
20+
font-family: Montserrat, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto,
21+
Oxygen, Ubuntu, Cantarell,"Open Sans","Helvetica Neue", sans-serif;
22+
}
23+
24+
/* Global Style */
25+
ul {
26+
list-style-type: none;
27+
margin:0;
28+
padding:0;
29+
}
30+
31+
a {
32+
text-decoration: none;
33+
color:#343434;
34+
}
35+
36+
/* Header Styles */
37+
header {
38+
display: flex;
39+
justify-content: space-between;
40+
align-items: center;
41+
padding:01rem;
42+
height:var(--header-height);
43+
background-color:#f3f3f3;
44+
padding-left:calc(var(--nav-width)+1rem);
45+
transition: padding-left0.3s ease-in-out;
46+
}
47+
48+
header#nav-toggler {
49+
font-size:1.5rem;
50+
box-shadow:001px#343434;
51+
background-color:#fff;
52+
padding:0.25rem0.35rem;
53+
border-radius:0.25rem;
54+
}
55+
56+
/* Side Menu Styles */
57+
nav {
58+
display: flex;
59+
flex-direction: column;
60+
justify-content: space-between;
61+
position: fixed;
62+
top:0;
63+
left:0;
64+
height:100%;
65+
background-color:var(--nav-bg-color);
66+
width:var(--nav-width);
67+
transition: width0.2s ease-in-out;
68+
box-shadow:002px#343434;
69+
}
70+
71+
nav .logo {
72+
display: flex;
73+
justify-content: flex-start;
74+
align-items: center;
75+
height:var(--header-height);
76+
}
77+
78+
nav .logospan {
79+
margin-left:1rem;
80+
}
81+
82+
.nav__item-link,
83+
.logo,
84+
.sign-out {
85+
font-size:1.25rem;
86+
display: block;
87+
padding:1rem;
88+
color:#f3f3f3;
89+
white-space: nowrap;
90+
}
91+
92+
.nav__item-linkspan,
93+
.logospan,
94+
.sign-outspan {
95+
margin-left:0.5rem;
96+
}
97+
98+
.nav__item-link+ula {
99+
display: block;
100+
padding:1rem;
101+
background-color:#f3f3f3;
102+
white-space: nowrap;
103+
}
104+
105+
/* JS Classes */
106+
.collapse {
107+
width:var(--nav-collapse-width);
108+
}
109+
110+
.collapsei {
111+
margin-left:0.5rem;
112+
}
113+
114+
.collapsespan {
115+
display: none;
116+
}
117+
118+
.collapse .nav__item-link+ula {
119+
font-size:0.85rem;
120+
}
121+
122+
.collapse-header {
123+
padding-left:calc(var(--nav-collapse-width)+1rem);
124+
}
125+
126+
.active {
127+
position: relative;
128+
color:var(--active-color);
129+
background-color:rgba(0,0,0,0.3);
130+
}
131+
132+
.active:before {
133+
content:"";
134+
position: absolute;
135+
top:0;
136+
left:0;
137+
bottom:0;
138+
height:25px;
139+
width:3px;
140+
margin: auto0;
141+
background-color:var(--active-color);
142+
}
143+
144+
.d-none {
145+
display: none;
146+
}
147+
148+
.nav__item-link+ula.active-sub-link {
149+
background-color:#ddd;
150+
}
151+
152+
@media screenand (max-width:768px) {
153+
header {
154+
padding-left:1rem;
155+
}
156+
157+
nav {
158+
width:0px;
159+
overflow: hidden;
160+
}
161+
162+
.nav__item-linkspan,
163+
.logospan,
164+
.sign-outspan {
165+
display: none;
166+
}
167+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp