jQuery로 모바일 앱 디자인 / Dev 구축 네비게이션

스마트 폰은 이제 매우 효율적인 웹 브라우저를 갖추고 있습니다. JavaScript는 이전보다 강력하고 jQuery와 같은 코드 라이브러리의 도움을 받아 확장 될 수 있습니다. 최신 HTML5 / CSS3 사양을 추가하면 몇 가지 기본 프론트 엔드 코드로 아주 멋진 모바일 웹 앱을 구축 할 수 있습니다..

이 튜토리얼에서는 모바일 기반 웹 사이트 / 웹 애플리케이션을 구축하는 방법을 보여 드리겠습니다. 특정 기기 및 화면 해상도를 타겟팅하기 위해 CSS3 미디어 쿼리를 사용합니다. 일부 jQuery는 Ajax 호출을 사용하여 메뉴에 애니메이션을 적용하고 외부 페이지 컨텐츠를로드하는 데 도움이됩니다. 심지어 레이아웃을 확장하여 Chrome이나 Firefox와 같은 일반 데스크톱 브라우저에서 제대로 표시 할 수도 있습니다..

• 라이브 데모
• 소스 코드

페이지 구조 정의

먼저 HTML 페이지를 살펴보고 CSS 규칙을 사용하여 스타일을 지정해 보겠습니다. 머리글에있는 대부분의 비정상적인 메타 태그는 웹 앱에 직접 영향을 미치지 않으므로 건너 뜁니다. 그러나 내가 언급해야 할 몇 가지가있다. 즉, 아래 스 니펫 (snippet)

X-UA 호환 특정 브라우저에서 문서를 렌더링하는 방법을 설명하는 데 사용됩니다. HTML5로 코딩 할 때 흥미로운 시나리오이므로 너무 걱정하지 않아도됩니다. 그러나 메타 뷰포트 태그는 매우 중요합니다. 표준 확대 / 축소 효과 대신 모바일 브라우저 창을 100 %로 설정합니다..

콘텐츠 값으로 사용자 확대 / 축소를 사용 중지 할 수도 있습니다. 사용자 확장 가능 = 아니오. 그러나이 경우 전체 화면 너비를 기기 너비와 동일하게 설정하기 만하면됩니다. Apple 웹 응용 프로그램 태그를 사용하면 웹 사이트를 iPhone 또는 iPod Touch의 홈 화면 아이콘으로 저장할 수 있습니다. 완전히 필요한 것은 아니지만 반드시 가치가 있습니다..

내부 본문 내용

body 태그 안에 ID가있는 래퍼 div를 설정했습니다. #w. 내부에서 ID를 사용하여 레이아웃을 두 개의 div로 나누었습니다. #pagebody 과 #navmenu. 전체 페이지 너비는 선택에 따라 640px로 제한되므로 레이아웃이 엄격한 숫자로 확장됩니다..

 
  
홍콩 모바일
 
 
 
모바일 사이트에 오신 것을 환영합니다.!
 
 
 
 
 
메뉴 링크
 
 
 
집
 
회사 소개
 
공시 하다
 
우리를 위해 쓰십시오
 
콘택트 렌즈
 
개인 정보 정책
 
 
 

탐색 메뉴의 Z- 색인 값이 낮아 지므로 #pagebody 항상 위에있다. JavaScript 코드가 페이지 본문 위로 특정 수의 픽셀을 이동하여 아래의 탐색을 표시하므로 중요합니다..

나는 각 .html 페이지 앞에 해시 기호 (#)를 사용하여 모바일 사파리의 불량 행동을 막았다. 링크를 클릭 할 때마다 URL 표시 줄이 나타나고 내용을 푸시 다운합니다. 그러나 ID를 참조 할 때 JavaScript 호출을 통하는 경우를 제외하고는 아무 것도 다시로드되지 않습니다..

CSS 포지셔닝

CSS 코드 안에 혼란스러운 내용이 많이 없습니다. 대부분의 위치 지정은 수동으로 수행 된 다음 jQuery를 통해 조작됩니다. 그러나 우리 문서에는 몇 가지 흥미로운 부분이 있습니다..

/ ** @group 핵심 본문 ** / #w #pagebody 위치 : 상대적; 왼쪽 : 0; 최대 너비 : 640px; 최소 너비 : 320px; z- 색인 : 99999;  #w #navmenu background : # 475566; 높이 : 100 %; 디스플레이 : 블록; 위치 : 고정; 너비 : 300px; 왼쪽 : 0px; 상단 : 0 픽셀; z- 색인 : 0; 

이 최상위 세그먼트는 페이지의 두 섹션에 대한 스타일을 정의합니다. Google의 탐색 메뉴는 너비가 300 픽셀이므로 페이지 콘텐츠를 볼 수있는 여지가 조금 남습니다. 열기 / 닫기 메뉴 단추는 왼쪽에 직접 위치하며 항상 액세스 할 수 있습니다. 여기서 중요한 부분은 z-index 속성 값과 위치 : 고정; 우리의 navmenu에.

상단 툴바 헤더도 흥미로운 섹션입니다. 고정 된 위치로 설정되므로 페이지 내용과 함께 스크롤됩니다. 이 기능은 iOS 앱 제목 표시 줄에서 볼 수있는 것과 비슷한 효과를 나타냅니다..

/ ** @group header ** / #w # 페이지 바디 헤더 # toolbarnav display : block; 위치 : 고정; 왼쪽 : 0px; 상단 : 0 픽셀; z- 색인 : 9999; 배경 : # 0b1851 url ( 'img / tabbar-solid-bg.png') 왼쪽 위 반복 없음; border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px; -o-border-radius : 5px; border-bottom-right-radius : 0; -moz-border-radius-bottomright : 0; -webkit-border-bottom-right-radius : 0; border-bottom-left-radius : 0; -moz-border-radius-bottomleft : 0; -webkit-border-bottom-left-radius : 0; 높이 : 44px; 너비 : 100 %; 최대 너비 : 640px;  #w # 페이지 바디 헤더 # toolbarnav h1 text-align : center; 패딩 - 상단 : 10px; 패딩 오른쪽 : 40px; color : # e6e8f2; font-weight : bold; 글꼴 크기 : 2.1em; 텍스트 그림자 : 1px 1px 0px # 313131; 

모바일 규칙

파란색 머리글 막대 텍스처에 배경 이미지도 사용하고 있습니다. 일관된 레이아웃 구조를 유지하기 위해 640 × 44 픽셀 크기입니다. 그러나 iPhone / iPad 망막 디스플레이 용 이미지 @ 2x도 개발했습니다. 아래 이미지를 모두 보거나 데모 소스 코드에서 가져올 수 있습니다..

• System /demo/img/[email protected]
• System /demo/img/[email protected]

이 기능을위한 모바일 CSS를 다른 파일에 설치했습니다. responsive.css. 여기에는 제목 표시 줄 bg와 망막 장치의 메뉴 단추 아이콘을 대체하는 두 가지 미디어 쿼리가 들어 있습니다.

/ ** 망막 디스플레이 ** / @ 미디어 전용 화면 및 (웹킷 최소 장치 픽셀 비율 : 2), 화면 및 (min - moz- 장치 - 픽셀 비율 : 1.5), 화면 및 ( min-device-pixel-ratio : 1.5) #w # 페이지 바디 헤더 background : # 0b1851 url ('img/[email protected] ') top left no-repeat; background-size : 640px 44px;  #w # 페이지 바디 헤더 # menu-btn background : url ('img/[email protected] ') no-repeat; background-size : 53px 30px; 

메뉴 화살표 디자인하기

탐색 영역에는 각 메뉴 링크의 오른쪽에 작은 화살표 아이콘이 있습니다. 이것은 어떤 창조적 인 공유지 작품의 이미지로 쉽게 대체 될 수 있습니다. 하지만 대부분의 CSS3 애호가들은이 방법을 테스트하는 것을 좋아할 것입니다..

#w #navmenu ul li :: after content : "; 표시 : 블록; 너비 : 6px; 높이 : 6px; 테두리 오른쪽 : 3px 단색 # d0d0d8; 테두리 위쪽 : 3px 단색 # d0d0d8; 위치 : 절대; 오른쪽 : 30px, 위쪽 : 45 %, -webkit-transform : 회전 (45deg), -moz-transform : 회전 (45deg), -o-transform : 회전 (45deg), 변형 : rotate (45deg); #w #navmenu ul li : hover :: after border-color : # cad0e6;

우리는 변환 속성을 사용하여 내용 뒤에 작은 테두리를 만듭니다. 나는 또한 설정 위치 : 절대; 그래서 우리는 안쪽 링크 항목 주위에서이 경계들을 자유롭게 움직일 수 있습니다. 호버 (hover) 상태에서 테두리 색상을 변경하는 것이 매우 쉽기 때문에 더욱 역동적 인 느낌을줍니다. 기본 HTML5 및 CSS3 규칙을 사용하여 달성 할 수있는 놀라운 효과.

이제는 JavaScript 코드의 일부로 이동해 보겠습니다. 이것을 기억하려면 jQuery 라이브러리에 코드를 올바르게 실행하기위한 include가 필요하다..

jQuery 애니메이션

이러한 맞춤 코드를 작성하면서 나는 script.js. 직접 작성해주십시오. > 태그를 사용하거나 데모 소스 코드에서 예제를 다운로드하십시오..

var topbar = $ ( "# toolbarnav"); var content = $ ( "# pagebody"); var theme = $ ( "# navmenu" 변수를 // viewport.width / viewport.height로 검색합니다. (예 : #content); var viewport = width : $ (window) .width (), height : $ (window) .height (); 

pagebody.animate (left : "290px", 기간 : 300 함수 openme () $ (function () topbar.animate (왼쪽 : "290px", 기간 : 300, 대기열 : , queue : false););  pagebody.animate (left : "0px", left : "0px", duration : 180, queue : false) closeme = duration : 180, queue : false);); 

// 탐색을 위해 페이지 내용을로드 $ ( "a.navlink") .call linkhtmlurl (.htm) = linkurl.substring (1, linkurl.length); var imgloader = ''; 

closeme (); $ (function () topbar.css ( "top", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * 콜백 없음 /, 1200);