댓글 :이 기사는 주로 jQuery를 사용하여 HTML5 반응 형 탐색 메뉴를 구현하는 방법을 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
jQuery+HTML5를 통해 구현되면 브라우저 창이 좁아 지거나 휴대폰으로 액세스되면 탐색 메뉴는 버튼 드롭 다운 메뉴가됩니다. 생식 이미지 :
HTML 코드 :
<ul>
<li> <a href = "#"> 버튼 </a> </li>
<li> <a href = "#"> 버튼 </a> </li>
</ul>
</nav>
jQuery 코드 :
다음 jQuery 코드를 통해 <div id = menu-iCon>이 <nav id = nav_wrap>에 추가됩니다. #메뉴 -ICON을 클릭하면 메뉴가 표시됩니다.
<script type = "text/javaScript"src = "<a href ="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js "> </script"> "> </script </a >>
<script type = "text/javaScript">
$ (document). readip (function ($) {
/ * 미래 메뉴 아이콘 */
$ ( '#nav-wrap'). prepend ( '<div> 메뉴 </div>');
/ * NAV 토글 */
$ ( "#menu-iCon"). on ( "click", function () {
$ ( "#nav"). slideToggle ();
$ (this) .toggleClass ( "Active");
});
});
</스크립트>
브라우저를 통한 요소보기는 다음과 같이 html에 표시된 코드를 볼 수 있습니다.
<avi>
<div> 메뉴 </div>
<ul>
<li> <a href = "#"> 버튼 </a> </li>
<li> <a href = "#"> 버튼 </a> </li>
</ul>
</nav>
CSS 코드 :
CSS 코드에서 먼저 #menu-iCon의 속성을 표시하도록 설정 한 다음 미디어 쿼리를 사용하여 미디어 쿼리를 판단한 다음 #메뉴 -ICON을 표시하도록 변경합니다. 다음은 브라우저 너비가 600px 미만인 경우 스타일을 결정하는 주요 CSS 스타일 코드입니다.
마지막 효과는 기사의 첫 번째 렌더링입니다.