Skip to content

Commit bb1c1d6

Browse files
solygambassolygambas
committed
add mobile tab navigation
1 parent 536af9e commit bb1c1d6

File tree

4 files changed

+204
-52
lines changed

4 files changed

+204
-52
lines changed

‎38-mobile tab navigation/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Mobile Tab Navigation</title>
14+
</head>
15+
<body>
16+
<div class="phone">
17+
<img
18+
src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80"
19+
alt="home"
20+
class="content show"
21+
/>
22+
<img
23+
src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
24+
alt="work"
25+
class="content"
26+
/>
27+
<img
28+
src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80"
29+
alt="blog"
30+
class="content"
31+
/>
32+
<img
33+
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
34+
alt="about"
35+
class="content"
36+
/>
37+
<nav>
38+
<ul>
39+
<li class="active">
40+
<i class="fas fa-home"></i>
41+
<p>Home</p>
42+
</li>
43+
<li>
44+
<i class="fas fa-box"></i>
45+
<p>Work</p>
46+
</li>
47+
<li>
48+
<i class="fas fa-book-open"></i>
49+
<p>Blog</p>
50+
</li>
51+
<li>
52+
<i class="fas fa-users"></i>
53+
<p>About Us</p>
54+
</li>
55+
</ul>
56+
</nav>
57+
</div>
58+
<script src="script.js"></script>
59+
</body>
60+
</html>

‎38-mobile tab navigation/script.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const contents = document.querySelectorAll(".content");
2+
const listItems = document.querySelectorAll("nav ul li");
3+
4+
const hideAllContents = () => {
5+
contents.forEach((content) => content.classList.remove("show"));
6+
};
7+
const hideAllItems = () => {
8+
listItems.forEach((item) => item.classList.remove("active"));
9+
};
10+
11+
listItems.forEach((item, index) => {
12+
item.addEventListener("click", () => {
13+
hideAllContents();
14+
hideAllItems();
15+
item.classList.add("active");
16+
contents[index].classList.add("show");
17+
});
18+
});

‎38-mobile tab navigation/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: rgba(155, 89, 182, 0.7);
9+
font-family: "Open Sans", sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
margin: 0;
15+
}
16+
17+
.phone {
18+
position: relative;
19+
overflow: hidden;
20+
border: 3px solid #eee;
21+
border-radius: 15px;
22+
height: 600px;
23+
width: 340px;
24+
}
25+
26+
.phone .content {
27+
opacity: 0;
28+
object-fit: cover;
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
height: calc(100% - 60px);
33+
width: 100%;
34+
transition: opacity 0.4s ease;
35+
}
36+
37+
.phone .content.show {
38+
opacity: 1;
39+
}
40+
41+
nav {
42+
position: absolute;
43+
bottom: 0;
44+
left: 0;
45+
margin-top: -5px;
46+
width: 100%;
47+
}
48+
49+
nav ul {
50+
background-color: #fff;
51+
display: flex;
52+
list-style-type: none;
53+
padding: 0;
54+
margin: 0;
55+
height: 60px;
56+
}
57+
58+
nav li {
59+
color: #777;
60+
cursor: pointer;
61+
flex: 1;
62+
padding: 10px;
63+
text-align: center;
64+
}
65+
66+
nav ul li p {
67+
font-size: 12px;
68+
margin: 2px 0;
69+
}
70+
71+
nav ul li:hover,
72+
nav ul li.active {
73+
color: #8e44ad;
74+
}

0 commit comments

Comments
 (0)