관심이있는 CSS를 사용하여 이전 방법을 볼 수 있습니다.이 방법은 기사에서 설명합니다.
이제 사업을 위해. 마지막 기사에서와 마찬가지로 먼저 글쓰기 HTML. 우리 메뉴의 코드. 그 코드는 그 기사에서 혼란이 없으며 더 이해할 수있었습니다. 두 가지 항목이있는 메뉴와 둘 다 하위 메뉴가 있습니다.
이전에 라이브러리를 이미 연결 한 라인 또는 이와 유사한 라인이 있으면 다시해서는 안됩니다.
스크립트의 두 번째 문자열에서 메뉴의 IDI를 지정합니다. 이 메소드를 자신의 메뉴에 적용하면 자연스럽게 이름을 직접 변경하십시오. 이 경우 이것은입니다 #slow_nav..
애니메이션 시간을 사용자 정의 할 수도 있습니다. 오프닝 및 폐쇄를위한이 스크립트는 400 밀리 초이며 0.4 초입니다. 더 크거나 작게 변경하려는 경우.
마지막 단계에서 스타일을 추가하십시오. 그들은 과거 기사의 스타일과 매우 유사합니다. CSS 애니메이션 속성 만 있습니다.
#slow_nav\u003e UL (너비 : 500px, 여백 : 25px 자동 0;) #slow_nav\u003e ul\u003e li (list-style : 없음; 디스플레이 : 인라인 블록; 위치 : 상대; 패딩 : 0;) #slow_nav a (text- 장식 : 없음;) #slow_nav\u003e ul\u003e li\u003e a (글꼴 크기 : 18px, 패딩 : 5px, 배경색 : 배경색 : # 333; 색상 : # 333; 색상 : # 333; 색상 : # 333, 색상 : # 333;) #slow_nav li ul (위치 : 절대, 목록 스타일 : 없음; 텍스트 정렬 : 센터; 상단 : 15px; 글꼴 크기 : 15px; 왼쪽 : 0; 여백 : 0; 패딩 : 0; 디스플레이 : 없음;) #slow_nav li ul li (배경 - 색상 : # 333, 국경 하단 : 1px 단단한 # 888;) #slow_nav li ul li : last-child (border bottom : 없음;) #slow_nav li ul li li (패딩 : 5px 12px, 색상 : #fff, 디스플레이 : 블록;) #slow_nav li ul Li : 호버 (배경 - 색상 : # 444;) #slow_nav li UL LI : 첫 번째 자식 (마진 - 상단 : 25px; 위치 : 상대;) #slow_nav li ul li : 첫 번째 자식 : 이전 (콘텐츠 : "; : 절대; 너비 : 1px; 높이 : 1px; 테두리 : 5px 단단한 투명; 국경 바닥 - 색상 : # 333; 왼쪽 : 10px; top : -10px;
또한 스크립트가 올바르게 작동하는 스타일에 새 줄을 추가했습니다. 요소의 경우 - #slow_nav li ul. 속성이 정의됩니다 디스플레이 : 없음;...에 추가되지 않은 경우 드롭 다운 메뉴는 처음에 보이고 커서가있는 후에 만 \u200b\u200b사라집니다. 이전 기사의 다른 모든 스타일.
과거의 방법과 마찬가지로 자체 포함 메뉴뿐만 아니라 관리 시스템에서 생성되는 동일한 동적 메뉴에도 적용 할 수 있습니다. Wordpress....에 이렇게하려면 스타일과 모든 것을 조정해야합니다. 즉, 첫 번째 HTML 코드는 스타일 만 사용할 필요가 없습니다. 스타일에서 iyidi #slow_nav라는 \u200b\u200b이름을 대체 해야하는 이름의 이름을 바꿀 수 있습니다. 사소한 무언가를 수정할 수 있습니다. 나는 자세하게 멈추지 않을 것이다. 각각의 경우에, 당신은 개인적인 접근이 필요하므로 죄송합니다.
그게 전부 야. 당신의 관심을 가져 주셔서 감사합니다. 🙂.
매우 자주 템플릿에서 드롭 다운 탐색 요소를 찾을 수 있습니다. 개발자는이 유형의 숨겨진 메뉴를 사용하여 추가 숨겨진 참조를 주제와 관련된 주제로 출력합니다. 탐색의 원리를 구현하는 Accorder 스타일의 패널 또는 다양한 메뉴의 예제를 찾을 수 있습니다.
그러나이 공과에서는 jQuery를 사용하여 간단한 드롭 다운 메뉴를 구성합니다. 애니메이션 메소드를 사용하여 탈기지 효과를 생성합니다. 자바 스크립트 코드와 함께 CSS3 전환 효과도 적용됩니다. 결과적으로 사이트를 탐색하기 위해 공백을 꺼냅니다.
HTML.
첫째, 주 HTML5 템플릿을 빌드하십시오. Google API에서 얻은 최신 버전의 jQuery가 필요합니다. 파일 스타일을 추가하십시오 styles.css.아래에 제시 될 것입니다 :
이제 페이지 상단의 정렬되지 않은 목록을 기반으로 구축 된 구조를 고려하십시오. 전체 목록은 HTML5 요소에 배치됩니다 최고의 SEO 결과를 위해.
코드 구조는 매우 간단합니다. 각 목록 항목에는 마우스 커서가있는 경우 선택 효과가 포함됩니다. 모든 내부 UL 요소가 원래 목록 항목에 포함되어 있으므로 드롭 다운 메뉴의 점으로 이동할 때 입력 초점이 손실되지 않습니다.
스타일 탐색
스타일 테이블에는 기본 등록 정보 재설정 코드가 들어 있습니다. 많은 개발자들은 에릭 메이 (Eric Meye)의 파일을 포함하지만, 우리의 경우에는 너무 번가 롭습니다. 또한 코드는이 경우 다른 서버에 저장됩니다.이 경우이 경우 나쁜 해결책입니다.
HTML, BODY, DIV, SPAN, 애플릿, 개체, iFRAME, H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre, A, ABBR, 약어, 주소, 큰, 인용, 코드, Del, DFN, EM, IMG, INS, KBD, Q, S, SAMP, 작은, 파업, 강하고, SUB, SUP, TT, VAR, B, U, I, Center, DL, DT, DD, OL, UL, LI, FieldSet, 양식, 라벨, 전설, 테이블, 캡션, tb, td, thead, tr, th, td, 기사, aside, 캔버스, 세부 사항, 삽입, 그림, 그림, 꼬리말, 헤더, hgroup, 메뉴, nav, 출력, 루비, 섹션, 요약, 시간, 마크, 오디오, 비디오 (여백 : 0, 패딩 : 0, 테두리 : 0, 글꼴 크기 : 100 %, 글꼴 : 상속; 수직 정렬 : 기준, 개요 : 없음; --webkit-font- 스무딩 : 항의; -webkit-text 크기 조정 : 100 %; --webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box;) html (높이) : 101 %;) 몸 ( "이미지 / bg.png"); 글꼴 크기 : 62.5 %; 라인 - 높이 : 1; 글꼴 : arial, 타호마, SANS-serif; 패딩 - 하단 : 60px;) 기사, 제쳐두고, 세부 사항, 지구, 그림, 바닥 글, 헤더, h 그룹, 메뉴, NAV, 섹션 (디스플레이 : 블록; ) OL, UL (목록 스타일 : 없음;) BlockQuote, Q (따옴표 : 없음) blockquote : Before, BlockQuote : 나중에, Q : 이전, Q : 이후 (콘텐츠 : "; 내용 : 없음) 강력한 (글꼴 - 굵게 : 대담한;) 테이블 (국경 붕괴 : 붕괴, 국경 - 가정 : 0;) IMG (국경 : 0, 최대 너비 : 100 %;)
이 코드에는 흥미로운 재산이 있습니다 -webkit-폰트 - 스무딩...에 Mac OS X 또는 iOS를 실행하는 브라우저에서 작업 할 때 글꼴을 부드럽게 할 수 있도록 설계되었습니다.
이제 메뉴에 가자.
#ddmenu (디스플레이 : 블록; 너비 : 100 %, 높이 : 80px; 여백 : 0 자동, 패딩 : 0 15px; 배경 : #fff; 국경 반경 : 6px, 테두리 : 1px 솔리드 RGBA (0, 0, 0, 0.15) ); 상자 - 그림자 : 0 1px 1px RGBA (20, 20, 20, 0.2); 커서 : 포인터; 개요 : 없음; 글꼴 무게 : 굵게; 색상 : # 8AA8BD;) #ddmenu li (디스플레이 : 블록; 위치 : 상대; float : 왼쪽; 글꼴 크기 : 1.45em; 텍스트 - 그림자 : 1px 1px 0 #fff; 국경 - 오른쪽 : 1px 단단한 # dae0e5;) #ddmenu li a (왼쪽, 패딩 : 0 12px ; 선 - 높이 : 78px; 글꼴 무게 : 대담한; 텍스트 장식 : 없음; 색깔 : # 6C87C0; --webkit-transition : 모두 0.2s 선형; -Moz-transition : 모두 0.2s 선형; -o-transition : all 0.2s 선형; 전환 : 모두 0.2s 선형;) #ddmenu li : 호버\u003e A (색상 : # 7180A0, 배경 : # d9e2ee; 배경 : # d9e2ee;) #ddmenu ul (위치 : 절대; 맨 : 88px, 너비 : 배경 : # fff; 디스플레이 : 없음; 마진 : 0; 패딩 : 7px 0; 목록 스타일 : 없음; 국경 반경 : 3px; 테두리 : 1px 솔리드 RGBA (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 0 5px RGBA (0, 0, 0, 0.2); )
선택기를 추가하십시오 #ddmenu ul. 목록의 각 항목의 모든 내부 요소를 강조 표시하려면 절대 위치 지정을 사용하여 거리를 결정하는 것이 중요합니다. 또한 커서를 맴돌 때 자체를 나타내는 모든 링크에 대한 선형 전환을 추가하십시오.
이제 상단 요소 포인터를 만드는 것을 고려하십시오. 그늘을 위해 어두운 배경으로 회전 및 유니버설 프레임의 특성을 사용하여 형성됩니다. 옵셋으로 위치 결정을 사용하여 구조체의 한 요소는 다른 하나 위에 위치하고 드롭 다운 메뉴의 포인터의 시각적 표현을 생성합니다.
#ddmenu UL : 다음 (콘텐츠 : ""; 너비 : 0; 높이 : 0; 위치 : 절대; 아래쪽 : 100 %; 왼쪽 : 8px; 테두리 폭 : 0 8px 8px 8px; 테두리 스타일 : 솔리드, 국경 색상 : #fff 투명;) #ddmenu ul : 전에 : 0; 높이 : 0; 위치 : 절대; 아래쪽 : 100 %; 왼쪽 : 4px; 테두리 폭 : 0 10px 10px 10px; 국경 스타일 : 솔리드; 국경 색상 : RGBA (0, 0, 0, 0.1) 투명;) #ddmenu UL LI (디스플레이 : 블록; 너비 : 100 %; 글꼴 크기 : 0.9em; 텍스트 - 그림자 : 1px 0 #fff;) #ddmenu ul li a (디스플레이 : 블록; 너비 : 100 %; 패딩 : 6px 7px; 라인 높이 : 1.4em; -webkit-transition : 모두 0.2s 선형; -Moz-transition : 모두 0.2s 선형; - O-transition : 모두 0.2s 선형; 전환 : 모두 0.2s 선형;) #ddmenu UL LI A : 호버 (배경 : # e9edf3;)
자바 스크립트.
코드의 첫 번째 부분은 링크를 눌러 가로 채고 기본 처리 (URL 주소에서 페이지로드)를 중지합니다.
코드의 두 번째 부분은 모든 마법의 행동을 만듭니다. 마우스 커서에 대한 이벤트 처리기를 첨부하여 목록을 가리 킵니다. 핸들러는 현재 활성 애니메이션을 중지하고 .slidedown ()을 사용하여 새로운 Subpalaragraph를 표시합니다. 또한 항목의 실제 선택에만 응답하기 위해 작은 지연을 설정했습니다.
오늘 나는 새로운 세대의 사이트를 선택하고 싶습니다 - 전체 화면 메뉴...에 네비게이션 자체가 페이지에 있지 않은 경우에 적용됩니다. 메뉴가 표시되는 메뉴를 클릭하면 하나의 버튼 만 있습니다. 네비게이션 라인이 멈출 때 유사한 원칙을 볼 수 있습니다. 메뉴 항목 목록이있는 블록은 단순히 숨겨집니다. 그녀의 장소에서 단추가 이미지와 함께 화면, 규칙, 3 개의 스트립으로 나타납니다. 전체 메뉴를 누르면됩니다. 많은 현대 메뉴 사이트가 끊임없이 큰 화면에서도 숨겨져 있습니다. 페이지를로드하지 않도록 만들었습니다. 이제는 모든 프로젝트가 그렇게 할 것입니다. 메뉴가 사소한 값인 경우 숨길 수 있지만 복잡한 구조가있는 큰 사이트가있는 경우이 옵션은 사용하지 않는 것이 좋습니다. 그래서. 업무의 일반적인 원칙을 가지고 있지만,이 유형의 메뉴는 아주 표준이며, 새로운 것을 원합니다. 오래 전에 나는 탐색이 단지 떨어지지 않는 사이트를 알아 차리기 시작했습니다. 팝업 창에서 완전히 전체 화면으로 열립니다....에 인기있는 슬라이드 패널과 같은 것이지만이 모든 경우에는 작업 공간의 전체 영역이 필요합니다. 사이트는 나타나기 시작하고 분리되었습니다 jquery 플러그인 그리고 실제로이 주제에 대한 CSS3 솔루션.
개인적으로, 모바일 장치가있는 사용자에게 편리하고 대규모 모니터에서 매우 인상적으로 보이는 탐색 메뉴 의이 구현을 정말 좋아합니다. 사이트 S. 전체 화면 메뉴 점점 더 많아서 무료 jQuery 플러그인도 점차적으로 추세가되고 있습니다.
그래서. 귀하의 관심 20 jQuery 플러그인 전체 화면 메뉴 팝업 창에서.
전체 화면 추진 탐색
최고의, 오늘 무료 중 하나 스크립트 전체 화면 탐색...에 "MENU"버튼을 클릭하면 탐색이 나타나고 연락처가있는 블록이 제공되면 호출 전의 경로가 1을 클릭하는 경로가되므로 사이트 방문자에게 매우 편리합니다. 나는 스크립트와 모바일 장치에서 연락처가있는 블록을 탐색하게된다는 점에 유의해야합니다.디자인 창에 매우 쾌적한 추가는 애니메이션 SVG 아이콘입니다. 기본적으로 3 개의 스트립이 있지만 아이콘을 클릭하면 메뉴가 숨길 수 있음을 나타내는 화살표로 변환됩니다.
둥근 애니메이션 탐색
하나는 매우 멋지다 jquery 스크립트 전체 화면 탐색 위의 플러그인으로 동일한 개발자로부터 이 스크립트는 매우 시원하고 비정상적인 외관 효과가 있습니다. 메뉴 버튼을 클릭하면 CSS3을 사용하여 아이콘에서 웨이브는 메뉴 항목 배경으로 개발하는 전체 모니터를 통해 진행됩니다. 숨기기의 동일한 효과.이 네비게이션은 모바일 장치에서 완벽하게 작동하지만 외관의 효과가 매우 무겁습니다. 모든 것이 오래된 전화기에서 느려질 것입니다 (나는 당신이 당신의 경험을 쓸 경우 기뻐할 것입니다). ...에
관점 페이지보기 탐색
또 다른 훌륭한 스크립트 전체 화면 메뉴...에 메뉴 버튼을 클릭하면 페이지의 가시적 인 부분이 효과가있는 측면으로 이동하면 메뉴가 백신 접종 된 공간에 나타납니다. 애니메이션 모양의 몇 가지 효과가 있습니다.불행히도 휴대 전화에서 잘못 작동합니다. 많은 메뉴 항목이 화면에 배치되지 않은 경우 수직 스크롤이 나타나지 않고 탐색이 단순히 클리핑됩니다.
전체 페이지 소개 및 탐색
꽤 간단한 스크립트 전체 화면 메뉴...에 나는 매우 훌륭한 것을 말할 수는 없지만 모바일 장치에서 편리 할 것입니다.
비행 사이드 메뉴.
다른 전체 화면 메뉴3D 효과가있는 가시 부분이 측면으로 이동했지만 이미 다른 개발자는 이미 이동합니다. 이전의 비슷한 스크립트와 달리 메뉴가 화면에 맞지 않는 것처럼 이는 모바일 장치에서 잘 작동해야합니다. 세로 스크롤이 나타납니다.
jQuery-Classic의 도움 으로이 주제의 기사가 작성됩니다. 나는 사이트를 통과 할 때 메뉴 열기 (또는 사용자 선택에 따라)에 파티션을 유지할 수있는 기능을 조금 더 복잡하게하려고 시도했습니다.
이 작업을 해결하려면 jQuery 쿠키 플러그인을 사용하기로 결정했습니다. 이 플러그인의 장점은 클라이언트 측에서 조작이 수행되며, 이는 차례로 서버의 부하가 줄어 듭니다. 마이너스 - JS로 사용자가 비활성화 된 경우 플러그인이 작동하지 않습니다. 그러나이 옵션을 고려하지는 않습니다. 이후 드롭 다운 메뉴의 전체 의미가 손실됩니다. 그래서, 시작하자.
첫째, jQuery 프레임 워크 자체와 jQuery 쿠키 플러그인을 연결해야합니다.
코드 : HTML.
추가 - 마크 업. 그것은 간단한 목록처럼 보일 것입니다, 초자연적 인 것도 없습니다. 태그에있는 유일한 메모
메뉴가 나올 메뉴를 클릭 할 때 제목이 있어야합니다.
코드 : HTML.
음, 너무 무한정. 이제 가장 흥미로운 것입니다. 이 코드에서는 대략 이해할 수 있도록 약간의 주석을 추가 할 것입니다.
코드 : js.
$ (document). 개선 (함수 () (함수) (
if ($. 쿠키 ( "num_open_ul")) (// 쿠키에 항목이 있는지 확인합니다.
if ($. cookie ( "num_open_ul")! \u003d 0) (// 그리고이 레코드는 0과 같지 않습니다.
var number_eq \u003d parseint ($. 쿠키 ( "num_open_ul") - 1);
$ ( ". navigation_body"). eq (number_eq) .show (). prevall ( "# navigation h2.navigation_head : 첫 번째"). AddClass ( "active_navigation");
}
};
$ ( "navigation h2.navigation_head"). (함수 () (// 클릭 할 때이 기능이 작동합니다)를 클릭하십시오.
if (! $ (this) .next (). ( "표시됨")) (
$ ( "div.navigation_body"). 형제 자매 ( "div.navigation_body"). 슬라이드 업 (500); // 다른 사람들이 열면, 현재를 제외한 모든 것을 닫았습니다.
}
$ (이) .next ( "div.navigation_body"). slidetoggle (500) .siblings ( "div.navigation_body"). 슬라이드 업 (500);
$ (이) .togGleclass ( "active_navigation") 형제 자매 ( "# navigation h2.navigation_head"). RemoveClass ( "active_navigation"); // 스타일을 변경할 수있는 클래스를 엽니 다
SetTimeout (Fncookie, 600); // 지연이있는 쿠키에 쿠키에 기록되므로 스크립트가 작업을 완료 할 수 있도록 (500 ms 속도, 지연, 600ms)
});
기능 fncookie () (// 녹화 기능 자체)
var number_open_ul \u003d 0;
var i \u003d 0;
$ ( "div.navigation_body"). 각 (함수 () () (
i ++;
if ($ ($ (this) .is ( ": Visible")) (
number_open_ul \u003d i;
}
$ .cookie ( "num_open_ul", number_open_ul, (만료 : 3, 경로 : "/")); // 전체 사이트에 대해 3 일을 저장합니다.
});
}
});
즉, 사용자가 메뉴를 열고 사이트를 왼쪽으로 며칠이 지나면 메뉴가 여전히 열려 있습니다.
음, 마침내, 우리는 작은 바코드가 있습니다 : 실제로 CSS 스타일. 당신은 당신의 취향에 정말로 수행합니다.이 예에서는 프로젝트 중 하나에서 준비된 디자인을 취했습니다.
코드 : CSS.
#항해 (
여백 : 80px 자동;
너비 : 250px;
}
#Navigation h2, #navigation h2.navigation_head (
글꼴 크기 : 18px;
글꼴 무게 : Bolder;
배경색 - FFB6C1;
배경 - 이미지 : -webkit-gradient (선형, 50 % 0.50 % 100 %, 컬러 스톱 (0 %, # FFE9E9), 컬러 스톱 (100 %, # FFB6C1);
배경 이미지 : -webkit-linear-gradient (# FFE9E9, # FFB6C1);
배경 이미지 : -moz-linear-gradient (# FFE9E9, # FFB6C1);
배경 이미지 : -o 선형 - 그라디언트 (# FFE9E9, # FFB6C1);
배경 이미지 : 선형 그라디언트 (# FFE9E9, # FFB6C1);
패딩 : 5px 3px 6px 3px;
마진 : 자동;
위치 : 상대;
}
#navigation h2.navigation_head : 후 (
위치 : 절대;
오른쪽 : 5px;
색상 : # 550000;
내용 : "CSSB";
}
#Navigation H2 : hover, #navigation h2.navigation_head : 호버 (
커서 : 포인터;
}
. 활성화 _Navigation (
배경 - 이미지 : -webkit-gradient (선형, 50 % 0.50 % 100 %, 컬러 스톱 (0 %, # FFB6C1), 컬러 스톱 (100 %, # FFE9E9))! 중요;
배경 - 이미지 : -webkit-linear-gradient (# FFB6C1, # FFE9E9)! 중요;
배경 - 이미지 : -moz-linear-gradient (# FFB6C1, # FFE9E9)! 중요;
배경 이미지 : -o 선형 - 그라디언트 (# FFB6C1, # FFE9E9)! 중요;
배경 이미지 : 선형 그라디언트 (# FFB6C1, # FFE9E9)! 중요;
}
.ctive_navigation : 후 (
위치 : 절대;
오른쪽 : 5px;
내용 : "CSSD"! 중요;
}
.Navigation_body (
디스플레이 : 없음;
}
# ul ul (
마진 : 0;
패딩 : 0;
목록 스타일 - 유형 : 없음;
}
* HTML #NAVIGITING UL LI (
높이 : 1 %;
}
#navigation div.navigation_body UL LI (
마진 왼쪽 : 10px;
}
# 자격 A (
글꼴 - 가족 : "Times New Roman";
디스플레이 : 블록;
색상 : # 918871;
패딩 : 3px;
배경색 : # FFE3E0;
테두리 바닥 : 1px 고체 #FFF;
텍스트 장식 : 없음;
}
#Navigation A : 호버 (
색상 : # 585858;
배경색 : # FFB6CC;
}
누구든지주의를 기울이면 여기에서 폐쇄 / 열기 메뉴를 사용하여 +/- 콘텐츠 속성을 사용하려고했지만 이미지 또는 다른 디자인을 추가 할 수 있습니다. 우리가 한 일의 예를 보면, 당신은 할 수 있습니다.
언제나처럼, 나는 질문을들을 준비가되어 있으며 대답하려고 노력할 준비가되어 있습니다. 모든 것이 가장 좋습니다.
하위 카테고리 드롭 다운 목록을 가진 jQuery의 jQuery의 수직 드롭 다운 메뉴의 형태로 탐색 자체를 쓸려면이 메커니즘의 작동 원리를 이해해야합니다. 그러나 먼저 우리는 네비게이션 구조를 분석 할 것입니다 :
항해
이미 추측했듯이 드롭 다운 메뉴는 표시된 목록을 기반으로 구축됩니다. 태그에 마우스 커서를 가져올 때
- 테스트 1.
- 테스트 2.
- 테스트 3.
- 테스트 4.
하지만 어떻게 물어 보니? 예, 모든 것이 정말로 매우 간단합니다. 시작하려면 탐색 목록의 스타일 테이블을 처리하겠습니다.
본문 (배경 : RGB (244, 244, 244); 글꼴 - 얼굴 : verdana; 글꼴 무게 : 100;) / * --- 네비게이션 --- * / --- --- * / #menu (폭 : 200px, 여백 : 0, 패딩 : 2px;) #menu li (목록 스타일 - 유형 : 없음;) .menu (위치 : 상대, 배경 : 초콜릿, 배경 : - 맨 - 선형 - 그라디언트 (맨 위, RGB (198, 255, 242), # 2AC4B3) - 배경 : -Webkit-linear-gradient (상단, RGB (198, 255, 242), # 2AC4B3); 배경 : -O 선형 - 그라디언트 (TOP, RGB (198, 255, 242), # 2AC4B3); 국경 : 1px 솔리드 # 2AC4B3;) .MENU : 호버 (배경 : 배경 : # 00C, 배경 : --MOZ 선형 - 그라디언트 (상단, RGB (230, 230, 230), # 0CBFAB); 배경 : -Webkit-linear-gradient ( 탑, RGB (230, 230, 230), # 0CBFAB); 배경 : -O 선형 - 그라디언트 (상단, RGB (230, 230, 230), # 0CBFAB).) .MENU SPAN (너비 : 11px, 높이 : 11px; 디스플레이 : 블록; 위치 : 절대; 상단 : 8px; 오른쪽 : 10px; 커서 : 포인터;) .menu ul (폭 : 150px; 여백 : 0; 패딩 : 1px, 위치 : 절대; 상단 : -1px; 198px;) .menu UL Li (배경 : 초콜릿, 배경 : -moz-linear-gradient (TOP, RGB (198, 255, 242), # 2AC4B3); 배경 : -webkit-linear-gradient (탑, RGB (198, 255, 242), # 2AC4B3); 배경 : -O 선형 - 그라디언트 (TOP, RGB (198, 255, 242), # 2AC4B3); 테두리 : 1px 고체 #FFF; ) .menu UL LI : 호버 (배경 : 배경 : # 00C, 배경 : - 맨스 - 선형 - 그라디언트 (상단, RGB (230, 230, 230), # 0CBFAB); 배경 : - 웨이브 키트 - 선형 - 그라디언트 (맨 위, RGB ( 230, 230, 230), # 0CBFAB); 배경 : -O 선형 - 그라디언트 (TOP, RGB (230, 230, 230), # 0CBFAB);) .MENU A (패딩 : 5px, 디스플레이 : 블록; 텍스트 - 장식 : 없음; 색상 : 흰색;) .menu A : 호버 (색상 : 흰색;) / * --- End --- * /
스타일 시트에서 처음에는 드롭 다운 목록이 숨겨져 있지 않지만이 순간은 다음을 사용하여 수정 될 것입니다.
$ (document) .Ready (함수 () ( "메뉴 ul"). 숨기기 (); $ ( "메뉴 스팬"). CSS ( "배경", "URL ("down.png ")"); ( "# 메뉴 LI"). 호버 (함수 (함수) ($ (이). 쇼 ( "UL"). show (); / * 동등한 $ ( "UL",이) .show (); * / $ ( 이) .find ( "span"). CSS ( "배경", "URL ("right.png ")"); / * 해당 $ ( "스팬",이) .css ( "배경", "URL (" right.png "); * /), function () ($ ($). 숨기기 ("UL "). 숨기기 ("UL ",이) .hide (); * / $ (이) .find ( "span"). CSS ( "배경", "URL ("down.png ")"); / * $ ( "스팬",이) .css ( "배경", "URL "down.png") "); * /))))))
이제 우리는 드롭 다운 메뉴의 jQuery 코드를 분석 할 것입니다. 아마도 누군가가 완전히 이해되지 않을 것입니다. 처음에는 다음과 같은 구조가 처방됩니다.
$ (document) .ready (함수 () ())
전체 페이지 다운로드 후 수행 해야하는 규정 된 명령입니다. 이것은 아직 짐을 싣지 않기 때문에 다른 물체를 찾는 것이 불가능하다면 다른 종류의 실수가 없도록 수행됩니다.
$ ( "메뉴 UL"). 숨기기 ();
이 진입은 무엇을 의미합니까? "$ ()"디자인을 사용하면 요소를 선택할 수 있습니다. 결과적으로 처음에는 드롭 다운 목록을 숨길 필요가 있습니다. 우리는 디자인 "$ ()"를 사용하고 관심있는 객체를 작성합니다. 우리의 경우이 개체는 "메뉴"클래스가있는 표시된 목록이됩니다. 다음으로, 우리는 당신이 관심있는 객체를 숨길 수있는 "hide ()"메소드를 처방합니다.
$ ( "메뉴 스팬"). CSS ( "배경", "URL ("down.png ")");
그녀가하는 일은 무엇입니까? 그녀는 "메뉴"클래스를 할당하고 "CSS"메소드 ( "배경", ""URL ( "down.png") "를 사용하여"배경 "을 할당하는 태그를 찾고 있습니다. 스타일 속성 "URL ("Down, PNG ")". "down.png"는 목록이 열 수 있음을 보여주는 아이콘입니다.
그런 다음 우리의 목록을 공개 할 디자인이 있습니다.
$ ( "# 메뉴 li"). 호버 (함수 () ($ () ($ ($ ($ (u). show (); $ (이) .find ( "span"). css ( "배경", " URL ( "right.png");), 함수 () ($ (이) .children ( "UL"). 숨기기 (); $ (이) .find ( "span") css ( "배경") , "URL ("downg ")");)
우리는 할당 된 상위 요소에 태그를 찾고 있습니다 id \u003d "menu"입니다. 다음은 "호버"메소드와 브래킷 두 기능입니다. 마우스 커서가 마우스를 가져 가면 첫 번째 기능이 수행되고 마우스 커서가 관심있는 항목을 떠나는 경우 두 번째로 실행됩니다.
첫 번째 기능은 철자가됩니다.
$ (이) .Children ( "UL"). show (); $ (이) .find ( "span"). CSS ( "배경", "URL ("right.png ")");
디자인 "$ (이)"은 우리가 현재 우리가 가지고있는 그 항목에 관심이 있음을 의미합니다 (영어에서). 그리고 우리는 태그를 가져 왔습니다.
그 후, 우리가 자손을 찾고있는 태그, 즉 태그와 그는 다른 아이콘에 대한 배경이 있습니다.
그 후,이 기능은 처방되어 있으며, 마우스 커서가 목록 항목을 떠난 후 원래와 마찬가지로 모든 것을 수행합니다.
function () ($ (이) .children ( "UL"). hide (); $ (이) .find ( "span"). CSS ( "배경", "URL ("downg ")");)
jQuery 및 드롭 다운 메뉴에서 작성된 코드를 올바르게 작동 시키려면 jquery.com에서 라이브러리를 다운로드하고 연결 태그 뒤에 말하기를 연결해야합니다.
선.그게 다야! 결론적으로 사이트가 꽤 재미 있다면 스크립트가 너무 늦게 시작될 가능성이 있습니다 (사이트는 오랫동안로드됩니다) 및 사용자는 첫 번째가 완전히 공개되는지를 볼 수 있지만 그 다음 숨 깁니다. 그게, 당신은 매우 추한 것입니다. 따라서이 디자인의 모든 jQuery 명령을 지속해야합니다 : "$ (문서) .Ready (함수 ())". 그것은 다음과 같습니다.
$ (document). steady (function ()) $ ( "메뉴 UL"). 숨기기 (); $ ( "메뉴 스팬"). CSS ( "배경", "URL ("down.png ")"); $ ( "# menu li"). 호버 (함수 () ( "UL). show (); $ (이) .find ("span ") css ("배경 ","URL ( "rike.png") "), 함수 () ("ul). 숨기기 (); $ (이) .find ( "span"). CSS ( "배경", "URL ("downg ") ");))
우리 스크립트를 연결합니다 태그에서 전송해야합니다
닫는 태그 앞에서 가장 쉽게또는 표시된 목록 직후 스크립트를 연결할 수 있습니다.(드롭 : 314)
