반응형 탐색을 구현하기 위해 jQuery와 결합된 CSS3 미디어 쿼리

이 글에서는 반응형 탐색을 구현하기 위해 jQuery와 결합된 CSS3 미디어 쿼리를 주로 소개합니다. 관심 있는 친구는 참고할 수 있습니다.

목적:

반응형 탐색 구현 .화면 너비가 700px보다 클 경우 효과는 다음과 같습니다.

화면 너비가 700px보다 작을 경우 클릭 후 탐색이 작은 버튼으로 변합니다. 메뉴가 천천히 내려옵니다:

아이디어:

나중에 이벤트를 메뉴에 바인딩하려면, DOM에 추가 노드가 아닌 추가 노드를 추가하려면 큰 화면에 나타나는 탐색과 작은 화면에 나타나는 드롭다운 탐색이 하나여야 합니다.

그래서 내비게이션의 위치를 ​​절대적으로 선택했습니다.

2. 화면 너비가 700px 미만이면 숨겨지고, 화면 너비가 700px보다 크면 위치가 설정됩니다. 또는 기본 탐색 목록이 숨겨져 화면 너비가 700px보다 크면 오른쪽에 나타나고 700px보다 작으면 숨겨집니다.

문제:

처음에는 기본적으로 표시되도록 선택했는데 문제가 발생했습니다. 버튼을 누르고 있는 동안에는 화면 이후 탐색 목록이 다시 표시되지 않습니다. 확대되었습니다.

코드는 다음과 같습니다.

<p class="nav-box">
    <ul class="nav">
     <li><a href="javascript:void(0);" class="toHome active">Home</a></li>
     <li><a href="javascript:void(0);" class="toPort">Portfolio</a></li>
     <li><a href="javascript:void(0);" class="toCont">Contact</a></li>
    </ul>
    <a href="javascript:void(0);" class="nav-btn">...</a>
</p>

.nav-box {
  position: relative;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  line-height: 20px;
  margin: 35px 0;
}
.nav {
  display: block ;
  border-top: none;
  position: absolute;
  right: 0;
}
@media(max-width:700px){
  .nav-btn{
    display: inline-block;
  }
}
@media(max-width:700px){
 .nav {
  display: none;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
 }  
}

window.onload=function(){
  $(".nav-btn").click(function(){
    $(".nav").slideToggle(500);
  });
}

그래서 내 생각에 뭔가 문제가 있는 것 같아서 기본 숨김 방식으로 바꿨습니다. 결과는 여전히 동일합니다. 버튼을 누르면 다시는 나타나지 않습니다. 그래서 나는 jQuery를 의심하기 시작했습니다.

해결책:

그런 다음 F12에서 버튼을 누르면 다음과 같이 나타나는 것을 발견했습니다.

이 모든 것은 SlideToggle에 의해 발생하는 것으로 밝혀졌습니다. 요소의 인라인 스타일을 설정하여 요소를 숨깁니다. 이 방법으로 설정한 스타일의 우선순위가 세 가지 방법 중 가장 높으므로 CSS에서 설정합니다. 블록은 전혀 쓸모가 없습니다.

이 문제를 해결하려면 js를 사용하거나 우선 순위가 더 높은 방법인 !important를 사용할 수 있습니다.

!important를 사용하려면 탐색 목록을 다음으로 설정해야 합니다. 기본적으로 숨겨져 있습니다. 그렇지 않으면 결코 숨길 수 없습니다.

최종 CSS 코드는 다음과 같습니다.

.nav {
  display: none;
  position: absolute;
  right: 10%;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  line-height: 20px;
  margin: 35px 0;
}
@media(max-width:700px){
  .nav-btn{
    display: inline-block;
  }
}
@media(min-width:700px){
  .nav {
    display: block !important;
    border-top: none;
    top: 15px;
    right: 0;
  }
}

요약:

프레임워크의 원리를 제대로 이해하지 않고 프레임워크를 사용하는 것은 매우 위험합니다.

그런 다음 요소의 스타일을 인라인으로 변경하는 jQuery의 .css() 메서드를 사용해 보았습니다.

jQuery를 적용했을 때의 동작을 이해하려면 jQuery가 어떻게 작동하는지 연구해야 할 것 같습니다.