Skip to content

Commit 1555d90

Browse files
herminiotorresherminiotorres
committed
Finalizando o dia 26
1 parent 0927455 commit 1555d90

File tree

2 files changed

+54
-12
lines changed

2 files changed

+54
-12
lines changed

‎26-StripeFollowAlongNav/finish.html‎

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Follow Along Nav</title>
66
</head>
77
<body>
8-
<h2>Cool</h2>
8+
<h2 class="title">Cool</h2>
99
<nav class="top">
1010
<div class="dropdownBackground">
1111
<span class="arrow"></span>
@@ -14,7 +14,7 @@ <h2>Cool</h2>
1414
<ul class="cool">
1515
<li>
1616
<a href="#">About Me</a>
17-
<div class="dropdown dropdown1">
17+
<div class="dropdown about_me">
1818
<div class="bio">
1919
<img src="https://logo.clearbit.com/wesbos.com">
2020
<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>
@@ -64,7 +64,7 @@ <h2>Cool</h2>
6464
</li>
6565
<li>
6666
<a href="#">Other Links</a>
67-
<ul class="dropdown dropdown3">
67+
<ul class="dropdown other_links">
6868
<li><a class="button" href="http://twitter.com/wesbos">Twitter</a></li>
6969
<li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
7070
<li><a class="button" href="http://wesbos.com">Blog</a></li>
@@ -79,9 +79,11 @@ <h2>Cool</h2>
7979
box-sizing: border-box;
8080
font-family: "Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif
8181
}
82+
8283
*, *:before, *:after {
8384
box-sizing: inherit;
8485
}
86+
8587
body {
8688
margin: 0;
8789
min-height: 100vh;
@@ -93,6 +95,9 @@ <h2>Cool</h2>
9395
}
9496

9597
h2 {
98+
text-align: center;
99+
color: azure;
100+
font-size: 5rem;
96101
margin-top: 0;
97102
padding-top: .8em;
98103
}
@@ -148,8 +153,6 @@ <h2>Cool</h2>
148153
opacity: 1;
149154
}
150155

151-
152-
153156
.dropdownBackground {
154157
width:100px;
155158
height:100px;
@@ -213,14 +216,52 @@ <h2>Cool</h2>
213216
margin-bottom: 10px;
214217
}
215218

216-
217219
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
218220
.button[href*=twitter] { background: #019FE9; }
219221
.button[href*=facebook] { background: #3B5998; }
220222
.button[href*=courses] { background: #ffc600; }
221223
</style>
222224

223225
<script>
226+
const triggers = Array.from(document.querySelectorAll('.cool > li'));
227+
const background = document.querySelector('.dropdownBackground');
228+
const nav = document.querySelector('.top');
229+
230+
function handleEnter() {
231+
this.classList.add('trigger-enter');
232+
// setTimeout(() => {
233+
// if(this.classList.contains('trigger-enter')) {
234+
// this.classList.add('trigger-enter-active');
235+
// }
236+
// }, 150);
237+
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
238+
background.classList.add('open');
239+
240+
const dropdown = this.querySelector('.dropdown');
241+
const dropdownCoords = dropdown.getBoundingClientRect();
242+
const navCoords = nav.getBoundingClientRect();
243+
244+
const coords = {
245+
height: dropdownCoords.height,
246+
width: dropdownCoords.width,
247+
top: (dropdownCoords.top - navCoords.top),
248+
left: (dropdownCoords.left - navCoords.left)
249+
}
250+
251+
background.style.setProperty('height', `${coords.height}px`);
252+
background.style.setProperty('width', `${coords.width}px`);
253+
// background.style.setProperty('top', `${coords.top}px`);
254+
// background.style.setProperty('left', `${coords.left}px`);
255+
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
256+
}
257+
258+
function handleLeave() {
259+
this.classList.remove('trigger-enter', 'trigger-enter-active');
260+
background.classList.remove('open');
261+
}
262+
263+
triggers.map(trigger => trigger.addEventListener('mouseenter', handleEnter));
264+
triggers.map(trigger => trigger.addEventListener('mouseleave', handleLeave));
224265
</script>
225266

226267
</body>

‎26-StripeFollowAlongNav/start.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Follow Along Nav</title>
66
</head>
77
<body>
8-
<h2>Cool</h2>
8+
99
<nav class="top">
1010
<div class="dropdownBackground">
1111
<span class="arrow"></span>
@@ -14,7 +14,7 @@ <h2>Cool</h2>
1414
<ul class="cool">
1515
<li>
1616
<a href="#">About Me</a>
17-
<div class="dropdown dropdown1">
17+
<div class="dropdown about_me">
1818
<div class="bio">
1919
<img src="https://logo.clearbit.com/wesbos.com">
2020
<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>
@@ -64,7 +64,7 @@ <h2>Cool</h2>
6464
</li>
6565
<li>
6666
<a href="#">Other Links</a>
67-
<ul class="dropdown dropdown3">
67+
<ul class="dropdown other_links">
6868
<li><a class="button" href="http://twitter.com/wesbos">Twitter</a></li>
6969
<li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
7070
<li><a class="button" href="http://wesbos.com">Blog</a></li>
@@ -140,15 +140,15 @@ <h2>Cool</h2>
140140
display: none;
141141
}
142142

143+
/*
143144
.trigger-enter .dropdown {
144145
display: block;
145146
}
146147
147148
.trigger-enter-active .dropdown {
148149
opacity: 1;
149150
}
150-
151-
151+
*/
152152

153153
.dropdownBackground {
154154
width:100px;
@@ -164,9 +164,11 @@ <h2>Cool</h2>
164164
opacity:0;
165165
}
166166

167+
/*
167168
.dropdownBackground.open {
168169
opacity: 1;
169170
}
171+
*/
170172

171173
.arrow {
172174
position: absolute;
@@ -213,7 +215,6 @@ <h2>Cool</h2>
213215
margin-bottom: 10px;
214216
}
215217

216-
217218
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
218219
.button[href*=twitter] { background: #019FE9; }
219220
.button[href*=facebook] { background: #3B5998; }

0 commit comments

Comments
 (0)