반응형웹 디자인을 위한 도구 85가지

반응형웹 디자인을 위한 도구 85가지

85 Top Responsive Web Design Tools

http://mashable.com/2013/03/18/web-design-tools/

BY GRACE SMITH

MAR 18, 2013

모바일 시장이 지속적으로 성장함에 따라 반응형웹 사이트 디자인에 대한 수요가 강화되고 있다. 

새로운 도구 세트 10가지, 설계, 코드를 배치하고 응답성 웹 사이트를 계획 하기 위해 다음에 나열 하였습니다. 

일부 겹치는 수도 있지만 각각 목록에 있는 명소 만한 조합 때, 그들은 당신이 모든 장치에서 사용자에게 최적의 시청 경험을 제공하는 웹 사이트 를 만들 수 있습니다. ( 각 권장 이외에 편리한 대체 도구의 목록입니다. )

관련 항목 : 디자이너를 위한 10 필수 Chrome 확장

당신이 디자이너와 개발자의 경우 응답성 도구 상자에서 빠뜨릴 수 없는 도구 중 일부는 무엇입니까? 

아래에 덧글 로 우리의 독자에게 권고를 공유 하십시오.

1. Gridset

Developed first as an internal tool that has now grown into a full-fledged product, Gridset lets web designers and developers design, prototype and build custom, responsive grid-based layouts for their projects. It can create any type of grid you require, from regular columnar grids (such as those in CSS frameworks like Bootstrap or 960.gs), to asymmetrical, compound, fixed, fluid and responsive grids. It even lets you create a library of your own grids, with a variety of presets available.

The beauty of Gridset is how fast it will allow you to build responsive prototypes (without all the calculations), providing all the measurements and tools to integrate with your existing markup. You can tailor specific grids across breakpoints you define, and create PNG files of your entire grid set, so you can view and work on your grids in the design tool of your choice.

Alternatives: Frameless, Tiny Fluid Grid, Gridpak, SimpleGrid, Responsify, Responsive.gs, Golden Grid System and Photoshop Grid for Responsive Design.

지금 본격적인 제품 으로 성장 하고 내부 도구로 처음 개발되어 Gridset 은 Web 디자이너와 개발자 의 설계, 프로토 타입 및 사용자 지정 빌드 자신의 프로젝트 에 대한 응답 그리드 기반 의 레이아웃 을 할 수 있습니다. 그것은 ( 같은 CSS는 프레임 워크 의 경우 와 일반 주상 그리드 에서 필요한 그리드 의 모든 유형을 만들 수 있습니다 부트 스트랩 또는 960.gs ) 비대칭 화합물 고정 , 유체 및 응답 표에 . 그것도 사용 가능한 사전 설정 의 다양한 자신의 그리드 라이브러리를 만들 수 있습니다.

Gridset 의 아름다움은 당신이 당신 의 기존 태그 와 통합 하는 모든 측정 및 도구를 제공하고 ( 모든 계산 하지 않고 ) 반응 프로토 타입을 구축 할 수 있는 방법을 빠릅니다 . 당신은 사용자 정의 중단 점 사이에서 특정 그리드 를 조정 하고 전체 그리드 세트 PNG 파일을 만들기 때문에 당신 의 마음에 드는 디자인 도구에서 표시 하거나 그리드 에서 작동 할 수 있습니다 .

Alternatives: Frameless, Tiny Fluid Grid, Gridpak, SimpleGrid, Responsify, Responsive.gs, Golden Grid System and Photoshop Grid for Responsive Design.

2. Bootstrap

Built by two guys at Twitter as a way to provide a clean and uniform solution to the most common, everyday interface tasks they faced as developers, Bootstrap is a "sleek, intuitive, and powerful front-end framework for faster and easier web development." It uses a 12-column responsive grid system, and features dozens of components, styles and JavaScript plugins, with basic global display, typography and link styles all set.

Using the Customizer, you can really make Bootstrap your own, and customize variables, components, JavaScript plugins and more. Bootstrap can be expanded, with a wealth of resources available, to include themes and interface-building tools.

그들은 개발자로서 직면하는 가장 일반적인 일상 의 인터페이스 작업에 깨끗하고 균일 한 용액을 제공하는 방법으로 트위터의 2 명에 의해서 지어진 부트 스트랩 은 쉽고 빠르게 Web 개발 ", 정교한 직관적이고 강력한 프런트 엔드 프레임 워크입니다. "이것은 12 열 응답 그리드 시스템을 사용 하고 있으며, 기본적인 글로벌 디스플레이, 타이포그래피 , 링크 스타일 모든 세트 에서 구성 요소 스타일과 JavaScript 플러그인 을 다수 갖추고 있습니다.

사용하여 사용자 정의 프로그램을 당신이 정말로 당신 부트 스트랩하여 , 변수 , 구성 요소 및 JavaScript 플러그인 등을 사용자 정의 할 수 있습니다. 부트 스트랩 에서 확장 할 수 있으며, 자원 의 풍부 포함하여 사용 가능한 테마 와 인터페이스 구축 도구를 .

Alternatives: Skeleton, Foundation, Base, InuitCSS, LESS Framework, Gridless, 320 and Up and Gumby.

3. Adaptive Images 적응형 이미지

Previously, making your website images responsive usually meant using a "hack-around," such as rewriting the "src" attribute or using the "noscript" tag. But there are now several tools to make this a much simpler task, including Adaptive Images, which uses one htaccess file, one php file and a single line of JavaScript to detect your visitor's screen size. It then automatically creates, caches and delivers device-appropriate rescaled versions of your embedded HTML images. What's more, it is entirely non-destructive, and works on existing websites and markups — without the need to edit anything.

Adaptive Images works on the premise that you are already using the highest-resolution images on your site, and also offers a ton of customization options. You can set breakpoints to match your CSS, set the quality of the generated JPGs, set how long browsers should cache the image for and much more.

지금까지, 당신의 웹 사이트 의 이미지가 반응 하는 것은 일반적으로 사용하는 의미 " 해킹 어라운드 "이런 " SRC " 속성 을 다시 작성 또는 " NoScript 의 " 태그를 사용 하는 등 . 그러나 이 방문자 의 화면 크기를 감지 하기 위해 1 htaccess 파일 1 PHP 파일 및 JavaScript를 일행 도 사용 하는 Adaptive 이미지가 포함 된 훨씬 단순 작업 만들기 위해 몇 가지 도구 가 있는지 입니다. 그런 다음 자동으로 생성 하고 캐시와 당신 이 포함 된 HTML 이미지 장치 에 적합한 다시 확장 버전 을 제공합니다. 게다가 , 그것은 완전히 비파괴 적 이며, 기존 의 Web 사이트 나 태그 에서 작동 - 아무것도 편집 할 필요가 없습니다.

적응 형 이미지 에서는 이미 귀하의 사이트 에서 가장 높은 해상도 의 이미지 를 사용하는 가정에서 작동 하고 또한 톤 제공 합니다 사용자 지정 옵션. 당신은 당신의 CSS를 일치 시키기 위해 중단점을 설정하여 생성된 JPG 만 의 품질을 설정하고 긴 브라우저는 이미지를 캐시하는 방법을 설정할  수 있습니다.

Alternatives: ReSRC.it, jQuery Picture, ResponsiveImg, Retina.js and Retina Images.

4. Responsive Design Testing 응답 설계 테스트

Building a responsive website means constantly testing how it displays across mobile and tablet devices. You could resize the browser yourself, or use a browser extension or tools within your IDE; but there is an ultra-simple tool that allows you to see how a page displays on different screen sizes, in a single view. The Responsive Web Design Tool from Matt Kersley works by entering your website's URL into the address bar to test a specific page. The screen and device options are 240 x 320 (small phone), 320 x 480 (iPhone), 480 x 640 (small tablet), 768 x 1024 (iPad – Portrait) and 1024 x 768 (iPad – Landscape). However, the content width cannot be pixel-perfect, as 15 pixels have to be added to the frame to accommodate the scrollbars.

You can share the results of the test with others by adding any URL to the end of the testing page address (e.g. http://mattkersley.com/responsive/?mashable.com). One major benefit of this tool is that it can be self-hosted (available on GitHub) by downloading and installing it on your own site. You can then navigate through the frames that your website appears in, testing the entire site effortlessly.

반응의 웹 사이트를 구축 하는 것은 항상 모바일 이나 태블릿 장치 사이 에서 어떻게 표시되는지 를 테스트 하는 것을 의미 합니다. 브라우저를 자신의 크기를 변경하거나 IDE에서 브라우저 확장 기능 및 도구 를 사용할 수 있습니다 , ​​하지만 당신은 하나 의 보기에서 다양한 화면 크기 에 어떻 페이지가 표시 를 볼 수 초 간단한 도구 가 있습니다. 

매트 Kersley 에서 응답 Web 디자인 도구는 특정 페이지를 테스트하려면 주소 표시 줄에 웹 사이트 의 URL을 입력 하여 작동합니다. 화면 장치 옵션이  240 × 320 (small phone ) , 320 × 480 ( iPhone ) , 480 × 640 (small tablet) , 768 × 1024 (  iPad – Portrait ) 과 1024 × 768 ( iPad – Landscape)) . 15 픽셀 스크롤 막대를 수용하기 위해 프레임 에 추가 되어야 할 것 그러나 콘텐츠 너비는 픽셀 완벽하게 할 수 없습니다.

만약 테스트 페이지 주소 (예 http://mattkersley.com/responsive/?mashable.com ) 의 단부 에 어떤 URL을 추가하여 다른 사람과 시험 결과를 공유 할 수있다. 이 도구 의 하나 의 큰 장점은 그것이 있다는 것입니다 자체 호스팅 자신의 사이트 에서 다운로드 하여 설치 하면 ( GitHub 위에서 사용 가능) . 그럼 당신 의 웹 사이트는 손쉽게 전체 사이트를 테스트하고 표시 되는 것을 프레임 사이를 이동할 수 있습니다.

선택 : 화면 의 쿼리 Screenfly , Responsivepx , Responsinator 응답 뷰포트 Responsive.is , 내 브라우저 의 크기를 변경합니다.

Alternatives: Screen Queries, Screenfly, Responsivepx, Responsinator, Responsive Viewport Responsive.is, and Resize My Browser.

5. FitText

As content scales according to a user's viewport, the text will naturally wrap as the container is narrowed; but this often causes widows, orphans or your headlines to look rather ugly, and can even break the entire layout. This is where FitText comes in: It's a fantastic jQuery plugin that makes your finely tuned text inflatable. It auto-updates the font size according to the width of the element wrapping it, so you can achieve scalable headlines and a non-broken layout that can be caused by font-sizing issues. FitText works perfectly with Lettering.js or any CSS3 property thrown at it. There are options to fine-tune the text, including the ability to set min-max sizes and the level of scaling. For those that are opposed to "window.resize()," Chris Coyier created a fork of FitText that limits the number of window-resize events.

As the plugin ignores the font size you specify in the CSS file (body tag), you should set one as a fallback, in case JavaScript is turned off. Equally important is making sure the H1 tag has a display block with a specified width. Please note that FitText is only for headlines, and shouldn't be used with paragraph text.

Alternatives: BigText, Lettering.js, Kerning.js, Kern.js, Type Butter and Slabtext.

콘텐츠 비늘 처럼 사용자 의 뷰포트 에 따라 용기가 좁아 지도록 텍스트 가 자연 으로 분리됩니다 , 그러나 이것은 많은 경우 오히려 추악한 보고 과부, 고아와 당신의 표제를 원인 , 심지어 전체 의 레이아웃 을 깰 수있다. FitText 이 들어온다 곳이다 : 그것은 당신 의 미세 조정 텍스트 풍선 을 만드는 환상적인 jQuery 플러그인 입니다. 확장 제목이나 글꼴 크기 의 문제로 인해 발생할 수 있는 비 깨진 레이아웃 을 실현 할 수 있기 때문에, 그것을 포장 하는 요소 의 너비에 따라 글꼴 크기 를 자동으로 업데이트 합니다. FitText 완벽하게 작동 Lettering.js 또는 슬로우 된 CSS3 속성 . 최소 - 최대 크기를 설정 하는 기능과 스케일링 수준 을 포함하는 텍스트 를 조정 하는 옵션 이 있습니다. 에 반대하는 사람들을 위해 " window.resize ( ) "크리스 Coyier 는 작성 FitText 포크 창 크기를 변경 하는 이벤트 의 수를 제한 합니다.

플러그인 을 사용하면 CSS 파일 ( body 태그 ) 에 지정된 글꼴 크기 무시 바와 같이, 케이스 의 JavaScript이 꺼져 있는 대체 로 1 을 설정 해야 합니다. 마찬가지로 중요한 것은 , H1 태그 가 지정된 폭 의 표시 블록을 가지고 있는지 확인 하고있다. FitText 만 의 표제를위한 것이며, 단락 텍스트와 함께 사용 하지 않는다는 것에 주의 하십시오.

대안 : BigText , Lettering.js , Kerning.js , Kern.js 유형 버터와 Slabtext .

6. Respond.js

Media Queries are extensions of CSS3, supported by most modern browsers; they allow you to specify when certain CSS rules should be applied. But one disadvantage of using media queries is that as they are part of the CSS3 specifications; they are not supported in older browsers such as in IE8 and below. With Respond.js, this problem is solved, as the script makes min-width and max-width work in IE6, 7 and 8, and it should also work with other browsers lacking support.

The script itself is incredibly small and lightweight (only 3 KB minified and 1 KB gzipped). It works unobtrusively, and doesn't rely on any other scripts or frameworks to run. It works by requesting a clean copy of your website's CSS via AJAX, and then translates any media queries it finds into equivalent JavaScript for browsers that don't support media queries directly.

Alternatives: Modernizer, Adapt, Categorizr, CSS3 Media Queries and Enquire.js.

미디어 쿼리는 가장 현대적인 브라우저에서 지원 되는 CSS3 의 확장 이며, 그들은 특정 CSS 규칙 을 적용 할 때 지정할 수 있습니다. 그러나 미디어 쿼리 를 사용하여 하나의 단점은 그들은 CSS3 사양 의 일부인 있도록 하는 것으로, 그들은 IE8 및 다음과 같은 웹 브라우저에서는 지원 되지 않습니다 . 스크립트 는 최소 폭과 IE6 , 7,8 에 최대폭 의 작업 을 수행하도록 Respond.js 에서 이 문제는 해결 되고 , 또한 다른 브라우저에서 지원 이 부족 으로 작동합니다 .

스크립트 자체는 ( 유일한 3 킬로바이트 축소 하고 1 킬로바이트 gzip으로 압축 된 ) 매우 작고 가볍습니다. 그것은 겸손 작동 하고 실행 하기 위해 다른 스크립트 와 프레임 워크 에 의존하지 않는다. 그것은 AJAX 를 통해 , Web 사이트 의 CSS 클린 복사본 을 요청 하여 실행하며 , 그것은 바로 미디어 쿼리를 지원하지 않는 브라우저 를위한 상응하는 JavaScript 에 발견 된 모든 미디어 쿼리로 변환 합니다.

대안 : Modernizer 적응 , Categorizr , CSS3 미디어 쿼리 와 Enquire.js .

7. Responsive Slides 응답 슬라이드

 

An incredibly lightweight jQuery plugin (only 1 KB minified and gzipped) that creates a responsive slider using list items inside a single container, Responsive Slides works with a wide range of browsers, including IE 6 and up. The plugin is dependent on the images being the same size and jQuery 1.6 and up being used. The plugin uses CSS3 transitions with JavaScript fallback, and allows captions and other non-HTML elements inside the slides. There are settings for transition and timeout durations, with multiple slideshows supported, as well as automatic and manual fade.

While Responsive Slides keeps things simple, there are still a wealth of options and possibilities to customize the plugin, including optional "before" and "after" callbacks, separate pagination controls, a random order setting and the choice of where to append the controls.

Alternatives: Flex Slider, Slides.js, PhotoSwipe, Supersized, Camera, RefineSlide, Blueberry Sequence.js and Galleria.

하나 의 용기 안에 목록 항목 을 사용 하여 응답 성능 의 슬라이더를 작성 하고 놀라운 가벼운 jQuery 플러그인 ( 축소 및 gzip 압축 만 1 킬로바이트 ) 는 응답 슬라이드 업, IE 6 를 포함한 브라우저 넓은 범위 에서 작동합니다. 플러그인 사용 되는 동일한 크기 와 jQuery 1.6 이상이라는 것을 이미지 에 의존 하고있다. 플러그인은 JavaScript 의 대체 와 CSS3 전환을 사용하여 캡션, 슬라이드 의 다른 비 HTML 요소를 허용 합니다. 지원되는 여러 슬라이드 쇼 와 마찬가지로 자동 및 수동 페이드 및 전환 및 타임 아웃 설정이 있습니다.

응답 슬라이드를 단순하게 유지 " 전 " 은 옵션을 포함하여 플러그인 을 사용자 지정하기위한 옵션 과 가능성 의 부가 남아 있습니다 하면 " 후 " 콜백 별도의 페이지 매김 제어, 임의의 순서 의 설정 과 컨트롤을 추가 할 위치를 선택 한다.

대안 : Flex 슬라이더, Slides.js , PhotoSwipe , 특대 사이즈 , 카메라, RefineSlide , 블루 베리 Sequence.js 및 갤러리아 .

8. Wirefy

Flat, static wireframes aren't particularly useful to show a client how responsive your design is, or what functionality is being suggested. Instead, using a rapid prototype approach may be more beneficial. Wirefy is a collection of functional responsive HTML snippets and templates that scale as the browser is resized (working across multiple devices). It builds on tools such as the Frameless grid system and Bootstrap, and uses CSS media queries that adapt to different device resolutions. It allows you to experiment rapidly with responsive wireframes, and lays a foundation for the design (while staying design agnostic), without losing sight of the content's importance.

Built on a 16-column base grid, it is packed with UI elements and styles such as typography, tables, images, forms, buttons, tab panel, breadcrumb system, paginator, menu, slideshow and much more. When compared to other frameworks, it is stripped down and doesn't focus on fancy components, but rather focuses on the users, and how they will experience your content on various devices.

Alternatives: Froont, Interactive Style Tiles, Responsive Sketch Sheets, Responsive Wireframe Template, Interface Sketch Templates, Responsive Device Diagrams, Wirify, Responsive Design Sheets, Responsive Wireframes, Webstiles, Responsive Design Sketchbook and Style Prototypes

평평한 정전기 와이어 프레임 디자인 이 있거나 어떤 기능 이 제안 되어 있는지 응답 클라이언트 를 표시하는 데 특히 유용 하지 않다. 대신 래피드 프로토 타입 방식을 사용 하면 더 유익 얻는다. Wirefy 브라우저 가 ( 여러 장치 에서 실행되는 ) 의 크기가 변경 되도록 확장 응답 HTML 코드 와 템플릿 의 컬렉션 입니다. 이러한 프레임 레스 그리드 시스템 및 부트 스트랩 등 의 도구 에 구축 된 다른 장치 의 해상도 에 적응 하는 CSS 미디어 쿼리를 사용 하고 있습니다 . 당신이 반응 하는 와이어 프레임과 급속하게 실험 할 수 있으며, 콘텐츠의 중요성 을 잃는 일 없이 ( 얽매이지 않는 디자인 을 머무는 동안 ) 설계 를위한 기초 가됩니다.

16 열 기반 의 그리드에 구축 된 이러한 인쇄술 , 표, 이미지 , 폼, 버튼, 탭 패널 , 빵 부스러기 시스템 페이지 네타 , 메뉴, 슬라이드 쇼 및 기타 여러 UI 요소 와 스타일 이 담겨 있습니다 . 다른 프레임 워크 와 비교 하면 그것은 스트립 다운 된 화려한 구성 요소 에 초점을 맞추고 있지 않은 것이 아니라 사용자 에 초점을 맞추고 , 어떻게 그들은 다양한 디바이스 에서 콘텐츠 를 경험하게됩니다 .

대안 : Froont 인터랙티브 스타일 타일 응답 스케치 시트 응답 와이어 프레임 템플릿 인터페이스 스케치 템플릿 응답 장치 다이어그램 , Wirify 응답 디자인 시트 응답 와이어 프레임 , Webstiles 응답 디자인 스케치 및 스타일 프로토 타입

9. Responsive Tables 응답 표

Data tables in responsive design can be problematic: They can be wide and must cater to large, complex amounts of data that need to be kept together to make sense. When the viewport is adjusted, your table can suddenly look very ugly — either being too small to read easily, or zoomed in too far, requiring scrolling. But ZURB offers a simple JavaScript/CSS combination to let tables adapt to small devices and tablets without breaking your responsive layout. It works by taking the first column, which is often the unique key for a table, and "pinning" it to the left of the table, allowing you to scroll the other columns under it. This means the user is able to see the entire table.

It's a lightweight package containing two key files: responsive-tables.js and responsive-tables.css. To use it on any data table in your markup, you simply need to attach a class of .responsive, and the CSS and JavaScript will do the rest. From there, the tables are modified client-side when the window is smaller than a regular table.

Alternatives: Responsive Data Tables, Stackable.js, Footable, Responsive Tables, Responsive Tables, Responsive SEO Friendly Data Tables, Responsive Approach for Data Tables and RainbowTables.

응답 성 디자인 데이터 테이블은 문제 가 될 가능성 이있다 : 그들은 넓은 수 있고 이해되기 위하여 함께 유지 될 필요가 있는 데이터 의 크고 복잡한 대량으로 대응 해야합니다 . 뷰포트 를 조정하면 당신 의 테이블 에는 갑자기 아주 못생긴 볼 수있다 - 쉽게 읽을 수 너무 작거나 너무 멀리 줌, 스크롤 을 필요로하는 중. 그러나 ZURB 테이블 이 당신 의 응답 성 레이아웃 을 깨지 않고 소형 장치 와 태블릿 에 적응 하기 위해 간단한 JavaScript / CSS 조합을 제공 합니다. 그것은 종종 테이블의 고유 키 이다 첫 번째 열을 가지고 테이블 왼쪽에 " 고정 " 당신이 그것을 아래에 다른 열을 스크롤 할 수 있도록 하는 방식으로 작동 합니다. 이것은 사용자가 테이블 전체 를 볼 수 있다는 것을 의미 합니다.

응답 - tables.js 민감 - tables.css : 그것은 두 가지 중요한 파일이 저장 되는 경량 패키지 . 당신 의 태그에서 모든 데이터 테이블에 그것을 사용 하려면 단순히 클래스를 첨부 해야 합니다. 응답 및 CSS와 JavaScript는 나머지를 합니다. 창 은 일반 테이블 보다 작은 경우 에는 거기 에서 테이블 은 클라이언트 측 변경 된다.

대안 : 응답 데이터 테이블, Stackable.js , Footable 응답 테이블 응답 테이블 응답 SEO 친화적 데이터 테이블 데이터 테이블 에 대한 응답 방식과 RainbowTables .

10. FlevNav

With responsive design now at the forefront of web design, and the ever-increasing use of mobile and tablet devices, the choice of a navigation strategy is now a wide-reaching decision. It needs to be as carefully planned as your content architecture. FlexNav is a jQuery plugin that takes a device-agnostic approach to complex site navigation. It is a mobile-first concept using media queries and JavaScript to create a menu with drop downs. It features multiple nested sub-menus, with support for em units and tap targets to reveal sub-menus for touchscreens.

It's simple to set up: Start with an unordered list, add in the appropriate class and data attributes (you can also use em units), add flexnav.css to the head of your document, insert jquery.flexnav.min.js before the closing body tag and initialize FlexNav right before the closing body tag. The default speed can be changed, with the plugin being supported by most modern browsers.

Alternatives: TinyNav.js, Navigation Patterns for Responsive Design, MeanMenu, Responsive Solutions for Menu Navigation, jPanelMenu, Responsive Design Approach for Navigation and Top Drawer.

Web 디자인 의 최전선에 지금 응답 설계, 모바일 및 태블릿 장치 의 늘어나는 사용 하여 탐색 전략 의 선택 은 현재 광범위한 결정 합니다. 그것은 신중하게, 콘텐츠 의 아키텍처 로 계획 될 필요 가있다. FlexNav 복잡한 사이트 · 네비게이션 장치 에 의존하지 않는 방식 을 취하고 jQuery 플러그인 입니다. 이것은 드롭 다운 을 사용하여 메뉴 를 만드는 데 미디어 쿼리 및 JavaScript를 사용하여 모바일 최초의 개념입니다. 이것은 em 단위 와 터치 스크린 을위한 하위 메뉴 를 나타 내기 위해 도청 대상 을 지원하도록 여러 중첩 된 하위 메뉴 를 제공 합니다.

이것은 설정 이 간단합니다. ( 당신은 파이브 유닛을 사용 할 수 있습니다 ) 적절한 클래스 및 데이터 속성 에 추가 하려면 문서 의 시작 부분에 flexnav.css 을 추가 하기 전에 jquery.flexnav.min.js 을 넣고 번호 없이 목록 에서 시작 body 태그 를 닫고 오른쪽 닫 body 태그 앞에 FlexNav 를 초기화 하십시오. 기본 속도는 플러그인 이 최신 브라우저 에서 지원되지 변경할 수 있습니다.

대안 : TinyNav.js 응답 설계 를위한 탐색 패턴, MeanMenu 메뉴 탐색 을위한 응답 솔루션 , jPanelMenu 탐색 을위한 응답 설계 방식 과 상단 서랍.