아이디어나 영감이 전혀 없을 때 창의적으로 다른 메뉴를 만드는 것은 때때로 매우 어렵습니다. 그러나 이러한 종류의 문제는 다른 영감을 주는 메뉴 디자인을 검색하거나 도구를 사용하여 해결할 수 있습니다. 이 문제에서는, jQuery.Mmenu 꽤 편리한 도구로 제공됩니다.

jQuery.Mmenu는 웹사이트에서 모바일 앱 슬라이딩 탐색 메뉴를 만들기 위한 사용하기 쉬운 jQuery 플러그인입니다. 이 매끄럽고 창의적인 메뉴는 더 멋지고 깔끔한 사용자 경험을 제공합니다.

시작하기

시작하려면 jQuery.Mmenu, 다운로드 페이지로 이동하면 플러그인이 자동으로 다운로드됩니다. 이번 포스팅에서는 기본 메뉴를 만들어 보도록 하겠습니다.

다른 jQuery 플러그인과 마찬가지로 이것을 사용하려면 사이트에 필요한 종속성을 포함해야 합니다. 사람들은 jQuery, jquery.mmenu.js 그리고 jquery.mmenu.css. 스니펫은 다음과 같습니다.

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

그리고 모든 기능과 스타일을 갖춘 기본 메뉴를 만들기에 충분합니다. 고급 및 추가 기능에서는 추가 JS 및 CSS 파일을 포함해야 합니다.

만들기 Menu

기본 메뉴는 평소에 만들던 대로 만들어 봅시다. nav, ul, li 그리고 a 집단. 이 데모에서는 3개의 하위 메뉴와 3개의 하위 하위 메뉴가 있는 수평 메뉴를 만들 것입니다.

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

위의 메뉴에는 jQuery.mmenu 함수 참조로 사용될 메뉴 id와 함께 nav를 포함시켰습니다. 그런 다음 전화 plugin 이랑 javascript 기능을 수행하고 id를 포함하십시오.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

LI 태그에서 다음과 같은 클래스를 볼 수 있습니다. Selected, 이 클래스는 초기화 시 기본 선택 메뉴를 만드는 데 유용합니다. 자신의 클래스를 추가할 수도 있습니다(예: active) 하지만 구성 섹션에 포함해야 합니다.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

이 플러그인은 자동으로 하위 메뉴 닫기 및 열기 링크를 추가하므로 생성할 필요가 없습니다. 메뉴는 다음과 같아야 합니다.

결론

jQuery.mmenu는 가능한 한 쉽게 다양한 메뉴를 생성할 수 있는 훌륭한 솔루션을 제공합니다. 이 플러그인을 사용하여 다른 대화형 요소를 만들 수도 있습니다. 예를 들어 모바일 사이트용 슬라이딩 툴팁 및 알림 표시줄을 만들 수 있습니다.

jQuery.Mmenu 사전 사용을 위해 사용자 정의할 수도 있습니다. 예를 들어 테마 확장, 애드온(레이블, 카운터, 헤더, dragOpen 및 검색 필드) 및 위치를 결합하여 사이트에 모바일과 유사한 연락처 목록을 만들 수 있습니다.

기사를 찾으셨다면 jQuery.mmenu를 사용하여 쉽게 슬라이딩 메뉴 만들기 유용합니다. 친구들과 공유하세요. 다음 포스팅에서 뵙겠습니다. 따르다 driveria.net 최신 업데이트를 받으려면!