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

Commit 99f5edc

Browse files
Day 26 - Stripe Follow Along Nav
1 parent f6edac9 commit 99f5edc

File tree

6 files changed

+267
-1
lines changed

6 files changed

+267
-1
lines changed

‎26_day/index.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>26 Day</title>
7+
<link rel="stylesheet" href="main.css">
8+
</head>
9+
10+
<body>
11+
<nav class="top">
12+
<div class="dropdownBackground">
13+
<span class="arrow"></span>
14+
</div>
15+
16+
<ul class="cool">
17+
<li>
18+
<a href="#">About Me</a>
19+
<div class="dropdown dropdown1">
20+
<div class="bio">
21+
<img src="https://images.unsplash.com/photo-1531476470298-04dcb3eee969?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e256fb43b537afdf7d9c48a9604c6c39&auto=format&fit=crop&w=750&q=80">
22+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut al</p>
23+
</div>
24+
</div>
25+
</li>
26+
<li>
27+
<a href="#">Courses</a>
28+
<ul class="dropdown courses">
29+
<li>
30+
<span class="code">RFB</span>
31+
<a href="https://ReactForBeginners.com">React For Beginners</a>
32+
</li>
33+
<li>
34+
<span class="code">ES6</span>
35+
<a href="https://ES6.io">ES6 For Everyone</a>
36+
</li>
37+
<li>
38+
<span class="code">STPU</span>
39+
<a href="https://SublimeTextBook.com">Sublime Text Power User</a>
40+
</li>
41+
<li>
42+
<span class="code">WTF</span>
43+
<a href="http://flexbox.io">What The Flexbox?!</a>
44+
</li>
45+
<li>
46+
<span class="code">LRX</span>
47+
<a href="http://LearnRedux.com">Learn Redux</a>
48+
</li>
49+
<li>
50+
<span class="code">CLPU</span>
51+
<a href="http://CommandLinePowerUser.com">Command Line Power User</a>
52+
</li>
53+
<li>
54+
<span class="code">MMD</span>
55+
<a href="http://MasteringMarkdown.com">Mastering Markdown</a>
56+
</li>
57+
</ul>
58+
</li>
59+
<li>
60+
<a href="#">Other Links</a>
61+
<ul class="dropdown dropdown3">
62+
<li><a class="button" href="http://twitter.com">Twiter</a></li>
63+
<li><a class="button" href="http://facebook.com">Facebook</a></li>
64+
<li><a class="button" href="https://medium.com/">Medium</a></li>
65+
</ul>
66+
</li>
67+
</ul>
68+
</nav>
69+
70+
<script type="text/javascript" src="main.js"></script>
71+
</body>
72+
73+
</html>

‎26_day/main.css

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
html {
2+
box-sizing: border-box;
3+
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif
4+
}
5+
6+
*, *:before, *:after {
7+
box-sizing: inherit;
8+
}
9+
10+
body {
11+
min-height: 100vh;
12+
background: linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%), linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%), linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%), linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
13+
}
14+
15+
nav {
16+
position: relative;
17+
perspective: 600px;
18+
}
19+
20+
.cool>li>a {
21+
color: yellow;
22+
text-decoration: none;
23+
font-size: 20px;
24+
background: rgba(0, 0, 0, 0.2);
25+
padding: 10px 20px;
26+
display: inline-block;
27+
margin: 20px;
28+
border-radius: 5px;
29+
}
30+
31+
nav ul {
32+
list-style: none;
33+
margin: 0;
34+
padding: 0;
35+
display: flex;
36+
justify-content: center;
37+
}
38+
39+
.cool>li {
40+
position: relative;
41+
display: flex;
42+
justify-content: center;
43+
}
44+
45+
.dropdown {
46+
opacity: 0;
47+
position: absolute;
48+
overflow: hidden;
49+
padding: 20px;
50+
top: -20px;
51+
border-radius: 2px;
52+
transition: all 0.5s;
53+
transform: translateY(100px);
54+
will-change: transform;
55+
display: none;
56+
}
57+
58+
.trigger-enter .dropdown {
59+
display: block;
60+
}
61+
62+
.trigger-enter-active .dropdown {
63+
opacity: 1;
64+
}
65+
66+
.dropdownBackground {
67+
width: 100px;
68+
height: 100px;
69+
position: absolute;
70+
background: #fff;
71+
border-radius: 4px;
72+
box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
73+
transition: all 0.3s, opacity 0.1s, translate 0.2s;
74+
transform-origin: 50% 0%;
75+
display: flex;
76+
justify-content: center;
77+
opacity: 0;
78+
}
79+
80+
.dropdownBackground.open {
81+
opacity: 1;
82+
}
83+
84+
.arrow {
85+
position: absolute;
86+
width: 20px;
87+
height: 20px;
88+
display: block;
89+
background: white;
90+
transform: translateY(-50%) rotate(45deg);
91+
}
92+
93+
.bio {
94+
min-width: 500px;
95+
display: flex;
96+
justify-content: center;
97+
align-items: center;
98+
line-height: 1.7;
99+
}
100+
101+
.bio img {
102+
float: left;
103+
margin-right: 20px;
104+
}
105+
106+
.courses {
107+
min-width: 300px;
108+
}
109+
110+
.courses li {
111+
padding: 10px 0;
112+
display: block;
113+
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
114+
}
115+
116+
.dropdown a {
117+
text-decoration: none;
118+
color: #ffc600;
119+
}
120+
121+
a.button {
122+
background: black;
123+
display: block;
124+
padding: 10px;
125+
color: white;
126+
margin-bottom: 10px;
127+
}
128+
129+
.button[href*=twitter] {
130+
background: #019FE9;
131+
}
132+
133+
.button[href*=facebook] {
134+
background: #3B5998;
135+
}
136+
137+
.button[href*=courses] {
138+
background: #ffc600;
139+
}
140+
img {
141+
height: 100px;
142+
width: 120px;
143+
}

‎26_day/main.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const triggers = document.querySelectorAll('.cool > li');
2+
const background = document.querySelector('.dropdownBackground');
3+
const nav = document.querySelector('.top');
4+
5+
function handleEnter() {
6+
this.classList.add('trigger-enter');
7+
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
8+
background.classList.add('open');
9+
10+
const dropdown = this.querySelector('.dropdown');
11+
const dropdownCoords = dropdown.getBoundingClientRect();
12+
const navCoords = nav.getBoundingClientRect();
13+
14+
const coords = {
15+
height: dropdownCoords.height,
16+
width: dropdownCoords.width,
17+
top: dropdownCoords.top - navCoords.top,
18+
left: dropdownCoords.left - navCoords.left
19+
};
20+
21+
background.style.setProperty('width', `${coords.width}px`);
22+
background.style.setProperty('height', `${coords.height}px`);
23+
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
24+
}
25+
26+
function handleLeave() {
27+
this.classList.remove('trigger-enter', 'trigger-enter-active');
28+
background.classList.remove('open');
29+
}
30+
31+
triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
32+
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));

‎26_day/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gum",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "scripts.js",
6+
"scripts": {
7+
"start" : "browser-sync start --directory --server --files '*.css, *.html, *.js'"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"browser-sync": "^2.12.5"
13+
}
14+
}

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,3 +144,6 @@ Sticky Nav was really an interesting challenge. Learned about the requirement of
144144
Learned about `Event.stopPropagation()` & `EventTarget.addEventListener()` boolean options like capture, once & passive. More details about it here:
145145
- https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
146146
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
147+
148+
### Day 26: 13 Jul 2018
149+
It was super-fun learning abt this really slick "follow along" nav found on Stripe's pricing page.

‎index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
<a class="active" href="./22_day/index.html">22 Day</a>
3434
<a class="active" href="./23_day/index.html">23 Day</a>
3535
<a class="active" href="./24_day/index.html">24 Day</a>
36-
<a class="active" href="./24_day/index.html">25 Day</a>
36+
<a class="active" href="./25_day/index.html">25 Day</a>
37+
<a class="active" href="./26_day/index.html">26 Day</a>
3738
</div>
3839
</body>
3940

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /