-
Notifications
You must be signed in to change notification settings - Fork 5
/
stripeAlongLinks.jade
79 lines (64 loc) · 2.93 KB
/
stripeAlongLinks.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
extends base
block vars
- var title = 'Stripe Follow Along Dropdown'
block styles
link(rel="stylesheet" type="text/css" href="styles/stripeAlongLinks.css")
block body
- var courseCodes = ["RFB", "ES6", "STPU", "WTF", "LRX", "CLPU", "MMD"]
- var courseLinks = ["https://ReactForBeginners.com", "https://ES6.io", "https://SublimeTextBook.com", "http://flexbox.io", "http://LearnRedux.com", "http://CommandLinePowerUser.com", "http://MasteringMarkdown.com"]
- var courseTitles = ["React For Beginners", "ES6 For Everyone", "Sublime Text Power User", "What The Flexbox?!", "Learn Redux", "Command Line Power User", "Mastering Markdown"]
nav.top
.dropdownBackground
span.arrow
ul.cool
li
a(href="#") About Me
.dropdown.dropdown1
.bio
img(src="https://pbs.twimg.com/profile_images/714830962656473088/gdjONVUU.jpg")
p.
I like to code and build fun stuffs. APIs, open source contribution, demo apps, whatever. If it's fun, I'll dive in.
li
a(href="#") Courses
ul.dropdown.courses
each courseCode, index in courseCodes
li
span.code #{courseCode}
a(href="#{courseLinks[index]}") #{courseTitles[index]}
li
a(href="#") Other Links
ul.dropdown.dropdown3
li
a.button(href="https://twitter.com/_akinjide") Twitter
li
a.button(href="https://facebook.com/bakinjide") Facebook
li
a.button(href="https://akinjide.me") Blog
script(type="text/javascript").
const $triggers = document.querySelectorAll('.cool > li')
const $background = document.querySelector('.dropdownBackground')
const $nav = document.querySelector('.top')
function handleEnter() {
this.classList.add('trigger-enter')
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150)
$background.classList.add('open')
const $dropdown = this.querySelector('.dropdown')
const dropdownCoords = $dropdown.getBoundingClientRect()
const navCoords = $nav.getBoundingClientRect()
const coords = {
height: dropdownCoords.height,
width: dropdownCoords.width,
top: dropdownCoords.top - navCoords.top,
left: dropdownCoords.left - navCoords.left
}
$background.style.setProperty('width', `${coords.width}px`)
$background.style.setProperty('height', `${coords.height}px`)
$background.style.setProperty('display', 'flex')
$background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`)
}
function handleLeave() {
this.classList.remove('trigger-enter', 'trigger-enter-active')
$background.classList.remove('open')
}
$triggers.forEach($trigger => $trigger.addEventListener('mouseenter', handleEnter))
$triggers.forEach($trigger => $trigger.addEventListener('mouseleave', handleLeave))