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

Commit9d9b237

Browse files
committed
Responsive navbar, FontAwesome
1 parent73c84da commit9d9b237

File tree

9 files changed

+62
-15
lines changed

9 files changed

+62
-15
lines changed

‎res/styles/styles.css‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -287,10 +287,10 @@ ol {
287287
margin-right:60px;
288288
}
289289

290-
#search>svg {
290+
#search>label {
291291
position: absolute;
292-
top:10px;
293-
left:15px;
292+
top:calc(50%-0.5em);
293+
left:10px;
294294
}
295295

296296
#search>input {
@@ -349,26 +349,60 @@ ol {
349349
padding:5px;
350350
}
351351

352+
.menubtn {
353+
background-color:rgba(255,255,255,0);
354+
border:0;
355+
color: white;
356+
display: none;
357+
transition:0.3s;
358+
}
359+
360+
.menubtn:hover {
361+
cursor: pointer;
362+
color:rgb(176,176,176);
363+
}
352364

353365
@mediaonly screenand (max-width:1000px) {
354366
nav {
355367
justify-content: center;
356368
align-items: center;
357-
flex-direction:column;
369+
flex-direction:row;
358370
gap:30px;
359371
}
360372

373+
.menubtn {
374+
display: block;
375+
}
376+
361377
navul {
362-
flex-direction:column;
378+
flex-direction:row;
363379
justify-content: center;
364380
align-items: center;
365381
}
366382

383+
.navigationulli {
384+
display: none;
385+
}
386+
387+
.navigation.responsive {
388+
flex-direction: column;
389+
}
390+
391+
.navigation.responsiveul {
392+
flex-direction: column;
393+
}
394+
395+
.navigation.responsiveulli {
396+
display: block;
397+
}
398+
367399
header {
368-
height:85vh;
400+
height:65vh;
369401
}
370402

371403
.post_container {
372404
width:80%;
373405
}
406+
407+
374408
}

‎src/components/footer.php‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,12 @@
2727
</div>
2828
<p>&copy; All rights reserved.</p>
2929
</div>
30-
</footer>
30+
</footer>
31+
<script>
32+
constnavToggle=document.querySelector(".menubtn");
33+
constlinks=document.querySelector(".navigation");
34+
35+
navToggle.addEventListener('click',function() {
36+
links.classList.toggle("responsive");
37+
})
38+
</script>

‎src/components/navigation.php‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@
55
}
66

77
?>
8-
<nav>
8+
<nav>
99
<h1><a href="index.php"><span style="color: #ffd68a">My</span>Blog</a></h1>
1010
<ul>
1111
<form action="index.php" method="GET">
1212
<li id="search">
13-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
14-
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
15-
</svg>
16-
<input name="title" placeholder="Search posts by title..." type="text" />
13+
<input id="searchfield" name="title" placeholder="Search posts by title..." type="text" />
14+
<label for="searchfield" class="fa fa-search"></label>
1715
</li>
1816
</form>
1917

@@ -33,6 +31,5 @@
3331
}
3432
?>
3533
</ul>
36-
37-
34+
<button class="menubtn"><i class="fa fa-bars"></i></button>
3835
</nav>

‎src/delete.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,5 +41,9 @@
4141
}
4242
}
4343
}
44+
}else {
45+
header("location: index.php");
4446
}
47+
}else {
48+
header("location: index.php");
4549
}

‎src/index.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>MyBlog</title>
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
910
<link rel="stylesheet" href="../res/styles/styles.css">
1011
</head>
1112

‎src/login.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>MyBlog</title>
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
910
<link rel="stylesheet" href="../res/styles/styles.css">
1011
</head>
1112

‎src/post.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>MyBlog</title>
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
910
<link rel="stylesheet" href="../res/styles/styles.css">
1011
</head>
1112

‎src/register.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>MyBlog</title>
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
910
<link rel="stylesheet" href="../res/styles/styles.css">
1011
</head>
1112

‎src/write.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>MyBlog</title>
99
<link rel="stylesheet" href="../res/styles/styles.css">
10-
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1111
<script src="https://cdn.tiny.cloud/1/adnsso6g17in5iv9sfg1smj0xha8nu0nwg0euskp3hh0g6vt/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
1212
<script>
1313
tinymce.init({

0 commit comments

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