新手村26 - Stripe Follow Along Nav

26 - Stripe Follow Along Nav

俗話說的好，一天一蘋果，醫生遠離我

一天一 JS，What the f*ck JavaScript？

small steps every day - 記錄著新手村日記

完成目標

  • 功能
    • 連結Hover時白色區塊要出現在該連結下方
  • 畫面
    • 白色區塊的寬高要符合該連結的下拉區塊
    • 滑鼠移開時白色區塊要消失
    • 白色區塊出現內容才出現
    • 下拉區塊尚未完全出現，滑鼠移動時要取消顯示內容

index_START.html

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Follow Along Nav</title>
</head>
<body>
  <h2>Cool</h2>
  <nav class="top">
    <div class="dropdownBackground">
      <span class="arrow"></span>
    </div>

    <ul class="cool">
      <li>
        <a href="#">About Me</a>
        <div class="dropdown dropdown1">
          <div class="bio">
            <img src="https://logo.clearbit.com/wesbos.com">
            <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>
          </div>
        </div>
      </li>
      <li>
        <a href="#">Courses</a>
        <ul class="dropdown courses">
          <li>
            <span class="code">RFB</span>
            <a href="https://ReactForBeginners.com">React For Beginners</a>
          </li>
          <li>
            <span class="code">ES6</span>
            <a href="https://ES6.io">ES6 For Everyone</a>
          </li>
          <li>
            <span class="code">NODE</span>
            <a href="https://LearnNode.com">Learn Node</a>
          </li>
          <li>
            <span class="code">STPU</span>
            <a href="https://SublimeTextBook.com">Sublime Text Power User</a>
          </li>
          <li>
            <span class="code">WTF</span>
            <a href="http://Flexbox.io">What The Flexbox?!</a>
          </li>
          <li>
            <span class="code">GRID</span>
            <a href="https://CSSGrid.io">CSS Grid</a>
          </li>
          <li>
            <span class="code">LRX</span>
            <a href="http://LearnRedux.com">Learn Redux</a>
          </li>
          <li>
            <span class="code">CLPU</span>
            <a href="http://CommandLinePowerUser.com">Command Line Power User</a>
          </li>
          <li>
            <span class="code">MMD</span>
            <a href="http://MasteringMarkdown.com">Mastering Markdown</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Other Links</a>
        <ul class="dropdown dropdown3">
          <li><a class="button" href="http://twitter.com/wesbos">Twitter</a></li>
          <li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
          <li><a class="button" href="http://wesbos.com">Blog</a></li>
          <li><a class="button" href="http://wesbos.com/courses">Course Catalog</a></li>
        </ul>
      </li>
    </ul>
  </nav>

<style>
  html {
    box-sizing: border-box;
    font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  body {
    margin: 0;
    min-height: 100vh;
    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%);
  }

  h2 {
    margin-top: 0;
    padding-top: .8em;
  }

  nav {
    position: relative;
    perspective: 600px;
  }

  .cool > li > a {
    color: yellow;
    text-decoration: none;
    font-size: 20px;
    background: rgba(0,0,0,0.2);
    padding: 10px 20px;
    display: inline-block;
    margin: 20px;
    border-radius: 5px;
  }

  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }

  .cool > li {
    position: relative;
    display: flex;
    justify-content: center;
  }

  .dropdown {
    opacity: 0;
    position: absolute;
    overflow: hidden;
    padding: 20px;
    top: -20px;
    border-radius: 2px;
    transition: all 0.5s;
    transform: translateY(100px);
    will-change: opacity;
    display: none;
  }

  .trigger-enter .dropdown {
    display: block;
  }

  .trigger-enter-active .dropdown {
    opacity: 1;
  }
  
  .dropdownBackground {
    width: 100px;
    height: 100px;
    position: absolute;
    background: #fff;
    border-radius: 4px;
    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);
    transition: all 0.3s, opacity 0.1s, transform 0.2s;
    transform-origin: 50% 0;
    display: flex;
    justify-content: center;
    opacity:0;
  }

  .dropdownBackground.open {
    opacity: 1;
  }

  .arrow {
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    background: white;
    transform: translateY(-50%) rotate(45deg);
  }

  .bio {
    min-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.7;
  }

  .bio img {
    float: left;
    margin-right: 20px;
  }

  .courses {
    min-width: 300px;
  }

  .courses li {
    padding: 10px 0;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,0.2);
  }

  .dropdown a {
    text-decoration: none;
    color: #ffc600;
  }

  a.button {
    background: black;
    display: block;
    padding: 10px;
    color: white;
    margin-bottom: 10px;
  }

  /* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
  .button[href*=twitter] { background: #019FE9; }
  .button[href*=facebook] { background: #3B5998; }
  .button[href*=courses] { background: #ffc600; }
</style>

<script>
</script>

</body>
</html>

CSS - step by step

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.dropdown {
  opacity: 0;
  position: absolute;
  overflow: hidden;
  padding: 20px;
  top: -20px;
  border-radius: 2px;
  transition: all 0.5s;
  transform: translateY(100px);
  will-change: opacity;
  display: none;
}

.trigger-enter .dropdown {
  display: block;
}

.trigger-enter-active .dropdown {
  opacity: 1;
}

JS - step by step

首先，先把觸發對象和條件先建構出來！分別抓到 NodeList、dropdownBackground、nav class="top" 三個元素，其中將 NodeList 的中的 li 透過 foreach 迴圈抓出每個 li 並觸發監聽事件 mouseenter、mouseleave 兩項，並執行 handleEnter、handleLeave 兩個方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>  
	const triggers = document.querySelectorAll(".cool > li");
  const background = document.querySelector(".dropdownBackground");
  const nav = document.querySelector(".top");

  //NodeList(3) [li, li, li]
  //<div class="dropdownBackground"><span class="arrow"></span></div>
  //<nav class="top">...</nav>

  function handleEnter() {
    //..
  }
  function handleLeave() {
    //..
  }

  triggers.forEach(trigger => trigger.addEventListener("mouseenter", handleEnter));
  triggers.forEach(trigger => trigger.addEventListener("mouseleave", handleLeave));
</script>

滑鼠移入後，第一個先將 display:none 屬性更改掉，另一個利用 setTimeout() 方法，延遲一段時間後更改內容的透明度，而當滑鼠移開時，則是同時移除：

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
<script>  
	const triggers = document.querySelectorAll(".cool > li");
  const background = document.querySelector(".dropdownBackground");
  const nav = document.querySelector(".top");

  //NodeList(3) [li, li, li]
  //<div class="dropdownBackground"><span class="arrow"></span></div>
  //<nav class="top">...</nav>

  function handleEnter() {
    this.classList.add('trigger-enter');
    setTimeout(() => {
      if (this.classList.contains('trigger-enter')) {
        this.classList.add('trigger-enter-active')
      }
    }, 150)
    background.classList.add('open');
  }

  function handleLeave() {
    //..
  }

  triggers.forEach(trigger => trigger.addEventListener("mouseenter", handleEnter));
  triggers.forEach(trigger => trigger.addEventListener("mouseleave", handleLeave));
</script>

滑鼠移出後，同時移除 display:block 和 opacity 兩個 Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>  
	const triggers = document.querySelectorAll(".cool > li");
  const background = document.querySelector(".dropdownBackground");
  const nav = document.querySelector(".top");

  //NodeList(3) [li, li, li]
  //<div class="dropdownBackground"><span class="arrow"></span></div>
  //<nav class="top">...</nav>

  function handleEnter() {
    //略
  }

  function handleLeave() {
    background.classList.remove('open');
    this.classList.remove('trigger-enter', 'trigger-enter-active');
  }

  triggers.forEach(trigger => trigger.addEventListener("mouseenter", handleEnter));
  triggers.forEach(trigger => trigger.addEventListener("mouseleave", handleLeave));
</script>

就大功告成啦！如果想看看更炫砲一點的效果，可以參考底下的程式碼w

JS - final

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
<script>
  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('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));
</script>

本刊同步於個人網站：http://chestertang.site/

本次範例程式碼原作者來源：https://tinyurl.com/yavm5f5n