반응형 탐색을 구현하기 위해 jQuery와 결합된 CSS3 미디어 쿼리-CSS 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2016-10-09 16:18:17

원래의

1237명이 탐색했습니다.

이 글에서는 반응형 탐색을 구현하기 위해 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가 어떻게 작동하는지 연구해야 할 것 같습니다.