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 4337eca

Browse files
Added day 26 related html file
1 parent 089ccc6 commit 4337eca

File tree

1 file changed

+246
-0
lines changed
  • Challenges/Day 26 - Stripe Follow Along Nav

1 file changed

+246
-0
lines changed
Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Follow Along Nav</title>
6+
</head>
7+
<body>
8+
<h2>Cool</h2>
9+
<nav class="top">
10+
<div class="dropdownBackground">
11+
<span class="arrow"></span>
12+
</div>
13+
14+
<ul class="cool">
15+
<li>
16+
<a href="#">About Me</a>
17+
<div class="dropdown dropdown1">
18+
<div class="bio">
19+
<img src="https://logo.clearbit.com/wesbos.com">
20+
<p>Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!</p>
21+
</div>
22+
</div>
23+
</li>
24+
<li>
25+
<a href="#">Courses</a>
26+
<ul class="dropdown courses">
27+
<li>
28+
<span class="code">RFB</span>
29+
<a href="https://ReactForBeginners.com">React For Beginners</a>
30+
</li>
31+
<li>
32+
<span class="code">ES6</span>
33+
<a href="https://ES6.io">ES6 For Everyone</a>
34+
</li>
35+
<li>
36+
<span class="code">STPU</span>
37+
<a href="https://SublimeTextBook.com">Sublime Text Power User</a>
38+
</li>
39+
<li>
40+
<span class="code">WTF</span>
41+
<a href="http://flexbox.io">What The Flexbox?!</a>
42+
</li>
43+
<li>
44+
<span class="code">LRX</span>
45+
<a href="http://LearnRedux.com">Learn Redux</a>
46+
</li>
47+
<li>
48+
<span class="code">CLPU</span>
49+
<a href="http://CommandLinePowerUser.com">Command Line Power User</a>
50+
</li>
51+
<li>
52+
<span class="code">MMD</span>
53+
<a href="http://MasteringMarkdown.com">Mastering Markdown</a>
54+
</li>
55+
</ul>
56+
</li>
57+
<li>
58+
<a href="#">Other Links</a>
59+
<ul class="dropdown dropdown3">
60+
<li><a class="button" href="http://twitter.com/wesbos">Twiter</a></li>
61+
<li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
62+
<li><a class="button" href="http://wesbos.com">Blog</a></li>
63+
<li><a class="button" href="http://wesbos.com/courses">Course Catalog</a></li>
64+
</ul>
65+
</li>
66+
</ul>
67+
</nav>
68+
69+
<style>
70+
html {
71+
box-sizing: border-box;
72+
font-family: "Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif
73+
}
74+
*, *:before, *:after {
75+
box-sizing: inherit;
76+
}
77+
body {
78+
min-height: 100vh;
79+
background:
80+
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
81+
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
82+
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
83+
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
84+
}
85+
86+
nav {
87+
position: relative;
88+
perspective: 600px;
89+
}
90+
91+
.cool > li > a {
92+
color: yellow;
93+
text-decoration: none;
94+
font-size: 20px;
95+
background: rgba(0,0,0,0.2);
96+
padding:10px 20px;
97+
display: inline-block;
98+
margin:20px;
99+
border-radius:5px;
100+
}
101+
102+
nav ul {
103+
list-style: none;
104+
margin: 0;
105+
padding: 0;
106+
display: flex;
107+
justify-content: center;
108+
}
109+
110+
.cool > li {
111+
position: relative;
112+
display:flex;
113+
justify-content: center;
114+
}
115+
116+
.dropdown {
117+
opacity: 0;
118+
position: absolute;
119+
overflow: hidden;
120+
padding:20px;
121+
top:-20px;
122+
border-radius:2px;
123+
transition: all 0.5s;
124+
transform: translateY(100px);
125+
will-change: transform;
126+
display: none;
127+
}
128+
129+
.trigger-enter .dropdown {
130+
display: block;
131+
}
132+
133+
.trigger-enter-active .dropdown {
134+
opacity: 1;
135+
}
136+
137+
138+
139+
.dropdownBackground {
140+
width:100px;
141+
height:100px;
142+
position: absolute;
143+
background: #fff;
144+
border-radius: 4px;
145+
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);
146+
transition:all 0.3s, opacity 0.1s, translate 0.2s;
147+
transform-origin: 50% 0%;
148+
display: flex;
149+
justify-content: center;
150+
opacity:0;
151+
}
152+
153+
.dropdownBackground.open {
154+
opacity: 1;
155+
}
156+
157+
.arrow {
158+
position: absolute;
159+
width:20px;
160+
height:20px;
161+
display: block;
162+
background:white;
163+
transform: translateY(-50%) rotate(45deg);
164+
}
165+
166+
.bio {
167+
min-width:500px;
168+
display:flex;
169+
justify-content: center;
170+
align-items: center;
171+
line-height: 1.7;
172+
}
173+
174+
.bio img {
175+
float:left;
176+
margin-right:20px;
177+
}
178+
179+
.courses {
180+
min-width:300px;
181+
}
182+
183+
.courses li {
184+
padding: 10px 0;
185+
display: block;
186+
border-bottom: 1px solid rgba(0,0,0,0.2);
187+
}
188+
189+
.dropdown a {
190+
text-decoration: none;
191+
color: #ffc600;
192+
}
193+
194+
a.button {
195+
background:black;
196+
display: block;
197+
padding:10px;
198+
color:white;
199+
margin-bottom: 10px;
200+
}
201+
202+
203+
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
204+
.button[href*=twitter] { background: #019FE9; }
205+
.button[href*=facebook] { background: #3B5998; }
206+
.button[href*=courses] { background: #ffc600; }
207+
208+
</style>
209+
210+
<script>
211+
const triggers = document.querySelectorAll('.cool > li');
212+
const background = document.querySelector('.dropdownBackground');
213+
const nav = document.querySelector('.top');
214+
215+
function handleEnter() {
216+
this.classList.add('trigger-enter');
217+
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
218+
background.classList.add('open');
219+
220+
const dropdown = this.querySelector('.dropdown');
221+
const dropdownCoords = dropdown.getBoundingClientRect();
222+
const navCoords = nav.getBoundingClientRect();
223+
224+
const coords = {
225+
height: dropdownCoords.height,
226+
width: dropdownCoords.width,
227+
top: dropdownCoords.top - navCoords.top,
228+
left: dropdownCoords.left - navCoords.left
229+
};
230+
231+
background.style.setProperty('width', `${coords.width}px`);
232+
background.style.setProperty('height', `${coords.height}px`);
233+
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
234+
}
235+
236+
function handleLeave() {
237+
this.classList.remove('trigger-enter', 'trigger-enter-active');
238+
background.classList.remove('open');
239+
}
240+
241+
triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
242+
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
243+
</script>
244+
245+
</body>
246+
</html>

0 commit comments

Comments
(0)

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