[수업노트](20.11.12)D+25 flex 반응형 메뉴바 만들기

 

<div class="top-bar flex flex-jc-e">
  <nav class="menu-box-1">
    <ul class="flex">
      <li><a href="#" class="block">Home</a></li>
      <li><a href="#" class="block">About</a></li>
      <li><a href="#" class="block">Products</a></li>
      <li><a href="#" class="block">Contact</a></li>
    </ul>
  </nav>
</div>

body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

.block {
  display:block;
}

.flex {
  display:flex;
}

.flex-jc-e {
  justify-content:flex-end;
}

.bg-red {
  background-color:red;
}

.top-bar {
  background-color:deepskyblue;
  color:white;
}

@media ( max-width:1000px ) and ( min-width:601px ) {
  .top-bar .menu-box-1 {
    width:100%;
  }
  
  .top-bar .menu-box-1 > ul {
    justify-content:space-around;
  }
}

@media ( max-width:600px ) {
  .top-bar .menu-box-1 {
    width:100%;
  }
  
  .top-bar .menu-box-1 > ul {
    flex-direction:column;
  }
  
  .top-bar .menu-box-1 > ul > li > a {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}

.top-bar .menu-box-1 > ul > li > a {
  padding:20px;
  font-weight:bold;
  text-align:center;
}

.top-bar .menu-box-1 > ul > li:hover > a {
  background-color:#1565C0;
}