# 小專案六: Menu Slider & Modal | DOM & CSS 的應用
###### tags: `JS小專案`

## 成品示意圖

今天這個專案的重點在於一個首頁的呈現，他有一個「漢堡」可以跑出一個側滾的介紹頁面，還有一個註冊按鈕，而會有些許的動畫效果，所以我們需要用到較為大量的CSS和HTML來做這個專案

## HTML 學習重點


一開始我們一樣使用html畫出整體的結構，這次的學習重點在**按鈕**和**資料輸入欄位**的建立


#### 1. 漢堡

    <button id="toggle" class="toggle">
      <i class="fa fa-bars fa-2x"></i>
    </button>

#### 2. Sign Up Button

<button class="cta-btn" id="open">Sign Up</button>

#### 3. Close Button

如何做出自帶X號的按鈕

    <!--Here is the close button-->
      <button class="close-btn" id="close">
        <i class="fa fa-times"></i>
      </button>

#### 4. Submit Button

提交(Submit)的按鈕

<input type="submit" value="Submit" class="submit-btn" />

#### 5. 表單設計
先使用form來設定範圍，並用label和input來畫出表單標題與輸入欄位

<form class="modal-form">
    <div>
        <label for="name">Name</label>
        <input type="text" id="name" placeholder="Enter Name">
    </div>
    <div>
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter Email">
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Enter Password">
    </div>
    <div>
        <label for="Password2">Name</label>
        <input type="password" id="password2" placeholder="Confirm Password">
    </div>
</form>

## CSS 學習重點
由於該專案最特別的就是側滑進入的navbar，所以接下來將針對這個進行解構


nav {
  background-color: var(--primary-color); 
  /*已用跟元素來定義偏好顏色 */
  border-right: 2px solid rgba(200, 200, 200, 0.1);
  /*定義外框顏色 */
  color: #fff;
  /*字體顏色為白色 */
  position: fixed;
  /*相對於瀏覽器視窗來定位 */
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  z-index: 100;
  /*z值越大，越上層 */
  /* transform: translateX(-100%); */
}

針對logo或使用者圖像的設定，我們希望是可以以圓形的方式呈現

nav .logo {
  padding: 30px 0;
  text-align: center;
}

nav .logo img {
  height: 75px;
  width: 75px;
  border-radius: 50%;
}

接著，要讓navbar的選項靠左貼齊，並且具有一定的間隔，且文字為白色
當中的間隔線也希望可以隱藏起來

nav ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}


nav ul li{
  border-bottom: 2px solid rgba(200, 200, 200, 0.1);
  padding: 20px;
}


nav ul li:first-of-type {
  border-top: 2px solid rgba(200, 200, 200, 0.1);
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}