세련된 네비게이션 바를 만들어 보는 2일째【WEB 사이트를 만드는 30일 챌린지】

14960 단어 HTMLCSSFontAwesome

배경이 동영상이고 메뉴 막대가 너비에 따라 달라지는 웹 사이트



・fontawesome을 사용합니다.
이쪽에서 주워 왔습니다 → htps //w w. w3s 쵸오 ls. 코 m/이콘 s/후타타우우 소메 5_인 t로. 아 sp
・배경에 동영상을 넣을 수 있습니다. (전회와 같이 동영상은 이쪽입니다)
htps : // 우선. 코 m / ゃ ㅃ에서 / 어머니 ㅇ gs와 rm / 455092
・폭이 변화하면, 메뉴 바도 멋지게 변화시킵니다

코드는 이쪽



HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>おしゃれメニュー</title>
  <link rel="stylesheet" href="30_2.css">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <nav>
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
      <i class="fas fa-bars"></i>
    </label>
    <label class="logo">Cool♪</label>
    <ul>
      <li><a class="active" href="#">ホーム</a></li>
      <li><a href="#">会社概要</a></li>
      <li><a href="#">事業内容</a></li>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">採用情報</a></li>
    </ul>
  </nav>
  <video src="goomalling-storm.mp4" loop="" autoplay="" muted=""  width="100%" class="bgv"></video>

</body>
</html>


CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
nav{
  background: #1b9bff;
  height: 80px;
  width: 100%;
}
label.logo{
  color: white;
  font-size: 33px;
  line-height: 80px;
  padding: 0 140px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
nav ul{
  float: right;
  margin-right: 60px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 2px;
}
nav ul li a{
  color: #f2f2f2;
  font-weight: 500;
  font-size: 20px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}
a.active,a:hover{
  background: #1b9bff;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 27px;
    padding-left: 25px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
    margin-right: 40px;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #0082e6;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg1.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}

완성된 웹사이트





폭을 좁히면


메뉴바를 클릭하면


힘든 점



· 일정 폭이되면 오른쪽에 저장된 CSS의 움직임

공부가 된 점



・fontawesome도 여러가지 참고 사이트가 있구나
・응답에 꽤 사용할 수 있는 것 같은 메뉴 바

이상이 됩니다.

여기는, 이런 쪽이 센스 좋다~라든지, 여기는 잘못되었다든가 있으면 지적 받을 수 있으면 다행입니다.
끝까지 봐 주셔서 감사합니다.

좋은 웹페이지 즐겨찾기